Интерпретация кода

Тема в разделе "JavaScript", создана пользователем Serkist, 26 май 2014.

  1. Serkist

    Serkist

    Регистрация:
    8 фев 2013
    Сообщения:
    367
    Симпатии:
    75
    Имеем код html:

    На его основании имеем обработку

    Вопрос - как заставить корректно работать js, если в html я поменяю select на a href?
     
    Lasted edited by : 26 май 2014
  2. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.581
    Симпатии:
    1.482
    не совсем ясен смысл сего действа... т.к. у вас был выпадающий список, то в основном действия js обрабатывают изменение в списке, а когда просто ссылки, то не ясно что должно быть.

    скажите как вы хотите что бы оно работало и предоставьте еще HTML исходного списка с выпадающими меню. (на странице открыть исходный код в браузере и скопировать участок со списками)
     
  3. Serkist

    Serkist

    Регистрация:
    8 фев 2013
    Сообщения:
    367
    Симпатии:
    75
    Имеем страницу категорий (Опенкарт 1.5.5.1)
    http://test.verose.ru/shkatulki/
    В штатном опене сортировка и количество элементов задается выпадающими списками
    [​IMG]


    Я хочу сделать вот так
    [​IMG]
    Все вроде бы получилось, НО косячит вывод фильтр про, а именно "Показано с 1 по 30" (выводит надпись, что показано 30, даже если 60 выбрано и на странице отображается 60 элементов) и страница перезагружается, хотя при активном фильтре должны перезагружаться только элементы.

    Исходный код списка:


    Я пробовал заменить в js
    $val = $(".sort select").val();
    на:
    $val = $(".sort a").val();

    И все подобные строки с .sort и .limit,
    но эффекта не возымело (((
     
  4. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.581
    Симпатии:
    1.482
    эффекта не возымело, т.к. у вас обработчик событий onchange так и остался, нужно заменить на onclick,

    Т.е. вместо
    HTML:
    $(".limit a").change(
    сделать
    HTML:
    $(".limit a").click(
    но, это еще не всё.

    Страница перезагружается, т.к. там у вас стоит ссылка и при клике на неё страница соответственно переходит по ней, а должна просто отправить запрос.

    я не силён в opencart и предположить не могу, зачем, в коде, используется функция gUV.

    Нужно сделать, что-то типа так:
    HTML:
    $(".limit a").click(function () {
        $("#filterpro_limit").val(gUV($(this).html(), "limit"));
        iF()
    });
    }
    возможно, нужно вместо $(this).html() написать $(this).innerHTML

    p.s. Фрилансер, что-то перемудрил со своим фильтром.
    К сожалению выдать решённый вариант вам не могу, т.к. нахожусь не за своим компом и тесты нормально провести не могу.

    но, общий принцип должен быть ясен.
     
    Serkist нравится это.
  5. Serkist

    Serkist

    Регистрация:
    8 фев 2013
    Сообщения:
    367
    Симпатии:
    75
    $iD, прописал в итоге так:
    HTML:
    if($(".sort a").length){
    $(".sort a").get(0).onchange = null;
    $(".sort a").click(function () {
    var d = $(this).val();
    var a = gUV(d, "sort");
    var b = gUV(d, "order");
    $("#filterpro_sort").val(a);
    $("#filterpro_order").val(b);
    iF()
    });
    }
    
    if ($(".limit a").length) {
    $(".limit a").get(0).onchange = null;
    $(".limit a").click(function () {
    $("#filterpro_limit").val(gUV($(this).innerHTML, "limit"));
    iF()
    });
    
    и ниже
    HTML:
    if ($(".sort a").length) {
    if ($("#filterpro_sort").val()) {
    $(".sort a").each(function(i, e) {
    if (gUV($(this).val(), "sort") == $("#filterpro_sort").val() && gUV($(this).val(), "order") == $("#filterpro_order").val()) {
    $(".sort a").val($(this).innerHTML);
    return;
    }
    });
    } else {
    $val = $(".sort a").val();
    $("#filterpro_sort").val(gUV($val, "sort"));
    $("#filterpro_order").val(gUV($val, "order"))
    }
    }
    if ($("#filterpro_limit").length) {
    if ($("#filterpro_limit").val()) {
    $(".limit a").val($("#filterpro_limit").innerHTML);
    } else {
    $("#filterpro_limit").val(gUV($(this).innerHTML, "limit"));
    }
    }
    
    В итоге вопрос с перезагрузкой улучшился, но все равно не решен - странице передается правильный параметр для фильтра с # в урл, но потом страница обновляется и грузится адрес http://test.verose.ru/shkatulki/?sort=p.date_added&order=DESC
    Также не решен вопрос с количеством элементов на странице, выбираешь 60, страница обновляется, а на фильтре пишет
    Показано с 1 по 30 из 76 (всего 3 страниц), хотя на самом деле их 60 отображает.

    Всю голову уже сломал, в яве я не силен (((
    Был бы очень признателен, если бы у вас нашлось время написать решенный вариант.

    На всякий случай полный код (исходный) filterpro.min.js
    HTML:
    var fIID = 0;
    var interval = 1;
    var $cookie = false;
    var container = ".product-{view}";
    /**
    * fixs for IE
    */
    if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function(obj, start) {
    for (var i = (start || 0), j = this.length; i < j; i++) {
    if (this[i] === obj) {
    return i;
    }
    }
    return -1;
    }
    }
    
    function escapeHtml(text) {
    return text
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;");
    }
    
    String.prototype.hashCode = function(){
    var hash = 0, i, ch;
    if (this.length == 0) return hash;
    for (i = 0; i < this.length; i++) {
    ch = this.charCodeAt(i);
    hash = ((hash<<5)-hash)+ch;
    hash = hash & hash; // Convert to 32bit integer
    }
    return hash;
    };
    
    var tag_tmpl = $.template(null, '<tr><td><input id="tag_${tag}" class="filtered" type="checkbox" name="tags[]" value="${tag}" {{if checked}} checked="checked" {{/if}}></td>' +
    '<td><label for="tag_${tag}">${name}</label></td></tr>');
    var cat_tmpl = $.template(null, '<tr><td><input id="cat_${category_id}" class="filtered" type="checkbox" name="categories[]" value="${category_id}" {{if checked}} checked="checked" {{/if}}></td>'+
    '<td><label for="cat_${category_id}">${name}</label></td></tr>');
    $(".price_limit").live("change", (function () {
    var b = parseInt($("#min_price").val());
    var a = parseInt($("#max_price").val());
    $("#slider-range").slider("values", [b, a]);
    iF()
    }));
    function synchronizeImgCheckboxes() {
    $("#filterpro input.filtered[type=\"checkbox\"]").each(function() {
    var $img = $(this).next('img');
    if ($img.length) {
    if ($(this).is(":checked")) {
    $img.addClass("selected");
    } else {
    $img.removeClass("selected");
    }
    }
    });
    }
    $("#filterpro .filtered").live("change", (function () {
    iF();
    }));
    $(function () {
    $("#slider-range").slider({range:true, min:0, max:0, values:[0, 0], stop:function (a, b) {
    iF()
    }, slide:function (a, b) {
    $("#min_price").val(b.values[0]);
    $("#max_price").val(b.values[1])
    }});
    $("#min_price").val($("#slider-range").slider("values", 0));
    $("#max_price").val($("#slider-range").slider("values", 1))
    });
    function iF() {
    clearTimeout(fIID);
    $("#filterpro_page").val(0);
    fIID = setTimeout("doFilter(false)", interval)
    }
    
    function success(g, b) {
    
    if ($cookie){
    var view = $cookie("display");
    }
    if (!view) {
    view = "list";
    }
    var cont = container.replace('{view}', view);
    
    var hash = window.location.hash.substr(1);
    if (g.result_html && hash) {
    $(cont).html(g.result_html);
    afterload();
    }
    $(".pagination").html(g.pagination);
    if (b && g.min_price == g.max_price) {
    $('.price_slider').hide();
    }
    var d = parseInt(g.min_price);
    var c = Math.ceil(parseFloat(g.max_price));
    
    if (typeof(display) != "undefined") {
    view ? display(view) : display("list");
    }
    if (b) {
    $("#slider-range").slider("option", {min:d, max:c});
    if ($("#max_price").val() >= 1) {
    d = parseInt($("#min_price").val());
    c = parseInt($("#max_price").val())
    }
    $("#slider-range").slider("option", {values:[d, c]});
    $("#min_price").val(d);
    $("#max_price").val(c)
    }
    if (g.totals_data) {
    if (g.totals_data.tags.length) {
    $('#filter_tags').html('');
    $.tmpl(tag_tmpl, g.totals_data.tags).appendTo('#filter_tags');
    $('#filter_tags').parents('.option_box').show();
    } else {
    $('#filter_tags').parents('.option_box').hide();
    }
    
    $('#filter_categories').html('');
    if (g.totals_data.categories.length) {
    $.tmpl(cat_tmpl, g.totals_data.categories).appendTo('#filter_categories');
    $('#filter_categories').parents('.option_box').show();
    } else {
    $('#filter_categories').parents('.option_box').hide();
    }
    
    var atts = {};
    $.each(g.totals_data.attributes, function(k, v) {
    atts[(v.id + "_" + v.text).replace(/\s/g, '_')] = v.t;
    });
    
    $('.a_name').each(function (k, v) {
    var at_v_i = $(v).attr('at_v_i').replace(/\s/g, '_');
    var at_v_i_e = escapeHtml(at_v_i);
    if (atts[at_v_i]) {
    $('[at_v_t="' + at_v_i_e + '"]').text($('[at_v_t="' + at_v_i_e + '"]').attr('data-value') + " (" + atts[at_v_i] + ")");
    $(v).removeAttr("disabled");
    } else {
    $('[at_v_t="' + at_v_i_e + '"]').text($('[at_v_t="' + at_v_i_e + '"]').attr('data-value'));
    $(v).attr("disabled", "disabled");
    $(v).removeAttr('checked');
    $(v).removeAttr(':selected');
    }
    });
    
    var h = [];
    $.each(g.totals_data.manufacturers, function (f, k) {
    if (k.id) {
    h[h.length] = k.id;
    var j = $("#manufacturer_" + k.id);
    j.removeAttr("disabled");
    if (j.get(0).tagName == "OPTION") {
    j.text($("#m_" + k.id).val() + " (" + k.t + ")")
    } else {
    $('label[for="manufacturer_' + k.id + '"]').text($("#m_" + k.id).val() + " (" + k.t + ")")
    }
    }
    });
    $(".manufacturer_value").each(function (f, k) {
    var j = $(this);
    var l = j.attr("id").match(/manufacturer_(\d+)/);
    if ($.inArray(l[1], h) < 0) {
    j.attr("disabled", "disabled");
    if (this.tagName == "OPTION") {
    j.text($("#m_" + l[1]).val());
    j.prop("selected", false)
    } else {
    $('label[for="manufacturer_' + l[1] + '"]').text($("#m_" + l[1]).val());
    j.prop("checked", false)
    }
    }
    });
    var e = [];
    $.each(g.totals_data.options, function (j, k) {
    if (k.id) {
    e[e.length] = k.id;
    var f = $("#option_value_" + k.id);
    if (f.length) {
    f.removeAttr("disabled");
    if (f.get(0).tagName == "OPTION") {
    f.text($("#o_" + k.id).val() + " (" + k.t + ")")
    } else {
    $('label[for="option_value_' + k.id + '"]').text($("#o_" + k.id).val() + " (" + k.t + ")")
    }
    }
    }
    });
    $(".option_value").each(function (j, k) {
    var f = $(this);
    var l = f.attr("id").match(/option_value_(\d+)/);
    if ($.inArray(l[1], e) < 0) {
    f.attr("disabled", "disabled");
    if (this.tagName == "OPTION") {
    f.text($("#o_" + l[1]).val());
    f.attr("selected", false)
    } else {
    $('label[for="option_value_' + l[1] + '"]').text($("#o_" + l[1]).val());
    f.attr("checked", false)
    }
    }
    })
    }
    }
    var cache = [];
    function doFilter(b) {
    var a = $("#filterpro").serialize().replace(/[^&]+=\.?(?:&|$)/g, "").replace(/&+$/, "");
    if (!b) {
    window.location.hash = a
    }
    var h = a.hashCode();
    if (cache[h]){
    success(cache[h]);
    } else {
    if ($cookie){
    var view = $cookie("display");
    }
    if (!view) {
    view = "list";
    }
    var cont = container.replace('{view}', view);
    
    $(cont).mask();
    $(".filterpro").mask();
    
    $.ajax({url:"index.php?route=module/filterpro/getproducts", type:"POST", data:a + (b ? "&getPriceLimits=true" : ""), dataType:"json",
    success:function (g) {
    success(g, b);
    cache[h] = g;
    $(cont).unmask();
    $(".filterpro").unmask();
    }});
    }
    }
    $(document).ready(function () {
    container = $('#filterpro_container').val();
    if ($.totalStorage!=undefined){
    $cookie = $.totalStorage;
    } else if ($.cookie != undefined){
    $cookie = $.cookie;
    }
    
    $(".option_box .option_name").click(function () {
    $(this).siblings(".collapsible").toggle();
    $(this).toggleClass("hided")
    });
    $(".option_box .attribute_group_name").click(function () {
    $(this).siblings(".attribute_box").toggle();
    $(this).toggleClass("hided")
    });
    $(".clear_filter").click(function () {
    $("#filterpro img").removeClass("selected");
    $("#filterpro select").val("");
    $("#filterpro :input").each(function () {
    if ($(this).is(":checked")) {
    $(this).attr("checked", false)
    }
    });
    var b = $("#slider-range").slider("option", "min");
    var a = $("#slider-range").slider("option", "max");
    $("#slider-range").slider("option", {values:[b, a]});
    $("#min_price").val(b);
    $("#max_price").val(a);
    $("div[id^=slider-range-]").each(function(index, element) {
    var id = this.id.replace(/[^\d]/g, '');
    
    var b = $(element).slider("option", "min");
    var a = $(element).slider("option", "max");
    
    hs = $(element).slider();
    hs.slider("option", {values:[b, a]});
    hs.slider("option","slide").call(hs, null, { handle: $(".ui-slider-handle", hs), values:[b, a] });
    
    $("#attribute_value_"+id+"_min").val('');
    $("#attribute_value_"+id+"_max").val('');
    
    });
    iF()
    });
    $(".pagination .links a").live("click", (function () {
    var a = $(this).attr("href");
    var b = a.match(/page=(\d+)/);
    $("#filterpro_page").val(b[1]);
    doFilter(false);
    $('html, body').animate({ scrollTop: $('.product-filter').offset().top }, 'slow');
    return false;
    }));
    
    if($(".sort select").length){
    $(".sort select").get(0).onchange = null;
    $(".sort select").change(function () {
    var d = $(this).val();
    var a = gUV(d, "sort");
    var b = gUV(d, "order");
    $("#filterpro_sort").val(a);
    $("#filterpro_order").val(b);
    iF()
    });
    }
    
    if ($(".limit select").length) {
    $(".limit select").get(0).onchange = null;
    $(".limit select").change(function () {
    $("#filterpro_limit").val(gUV($(this).val(), "limit"));
    iF()
    });
    }
    
    // deserialize
    var hash = window.location.hash.substr(1);
    if (hash && $('instock').is(':visible') && $('instock').is(':checked')) {
    $('instock').attr("checked", false);
    }
    $("#filterpro").deserialize(hash);
    
    synchronizeImgCheckboxes();
    
    $("#filterpro img").bind("click", function() {
    var $input = $(this).prev("input");
    if ($input.attr("disabled")) {
    return;
    }
    $(this).toggleClass("selected");
    $input.prop('checked', !$input.prop('checked'));
    iF();
    });
    
    
    $("div[id^=slider-range-]").each(function(index, element) {
    var id = this.id.replace(/[^\d]/g, '');
    var arr = window['attr_arr_'+id];
    
    var b = parseInt($("#attribute_value_"+id+"_min").val());
    var a = parseInt($("#attribute_value_"+id+"_max").val());
    b = arr.indexOf(b);
    a = arr.indexOf(a);
    if (a >= 0 && b >= 0){
    hs = $(element).slider();
    hs.slider("option", {values:[b, a]});
    hs.slider("option","slide").call(hs, null, { handle: $(".ui-slider-handle", hs), values:[b, a] });
    }
    });
    
    if ($(".sort select").length) {
    if ($("#filterpro_sort").val()) {
    $(".sort select").each(function(i, e) {
    if (gUV($(this).val(), "sort") == $("#filterpro_sort").val() && gUV($(this).val(), "order") == $("#filterpro_order").val()) {
    $(".sort select").val($(this).val());
    return;
    }
    });
    } else {
    $val = $(".sort select").val();
    $("#filterpro_sort").val(gUV($val, "sort"));
    $("#filterpro_order").val(gUV($val, "order"))
    }
    }
    if ($("#filterpro_limit").length) {
    if ($("#filterpro_limit").val()) {
    $(".limit select").val($("#filterpro_limit").val());
    } else {
    $("#filterpro_limit").val(gUV($(".limit select").val(), "limit"));
    }
    }
    doFilter(true)
    });
    function gUV(e,f){var c=String(e).split("?");var a="";if(c[1]){var b=c[1].split("&");for(var g=0;g<=(b.length);g++){if(b[g]){var d=b[g].split("=");if(d[0]&&d[0]==f){a=d[1]}}}}return a}