代码之家  ›  专栏  ›  技术社区  ›  Amin Hijaz

如何在jquery show/hide方法中停止repeat div?

  •  0
  • Amin Hijaz  · 技术社区  · 8 年前

    我的问题是,每当我单击下一页时,当我将ajax称为加载图像时,我需要停止此重复加载图像,并在单击下一页时出现一次。

    我所做的就是 <div class="image_ajax_loader" style="display:none;" > 然后使用jquery show/hide方法显示div

    我有我自己 html 页此 div

    <div class="image_ajax_loader" style="display:none;" >
        <p class="loadingimage">
            <img src="{$img_ps_dir}loader.gif" alt="" />
            <br />{l s='Loading...' mod='blocklayered'}
        </p>
    </div>
    

    因此,我通过以下方式显示加载图像:

    $('.image_ajax_loader').show();
    

    我把它藏起来:

    $('.image_ajax_loader').hide();
    

    这是我的jquery代码:

    function reloadContent(params_plus)
    {
        stopAjaxQuery();
    
        if (!ajaxLoaderOn)
        {
            $('.image_ajax_loader').show();
            $('.product_list').hide();
            ajaxLoaderOn = 1;
        }
    
        data = $('#layered_form').serialize();
        $('.layered_slider').each( function () {
            var sliderStart = $(this).slider('values', 0);
            var sliderStop = $(this).slider('values', 1);
            if (typeof(sliderStart) == 'number' && typeof(sliderStop) == 'number')
                data += '&'+$(this).attr('id')+'='+sliderStart+'_'+sliderStop;
        });
    
        $(['price', 'weight']).each(function(it, sliderType)
        {
            if ($('#layered_'+sliderType+'_range_min').length)
                data += '&layered_'+sliderType+'_slider='+$('#layered_'+sliderType+'_range_min').val()+'_'+$('#layered_'+sliderType+'_range_max').val();
        });
    
        $('#layered_form .select option').each( function () {
            if($(this).attr('id') && $(this).parent().val() == $(this).val())
                data += '&'+$(this).attr('id') + '=' + $(this).val();
        });
    
        if ($('.selectProductSort').length && $('.selectProductSort').val())
        {
            if ($('.selectProductSort').val().search(/orderby=/) > 0)
            {
                // Old ordering working
                var splitData = [
                    $('.selectProductSort').val().match(/orderby=(\w*)/)[1],
                    $('.selectProductSort').val().match(/orderway=(\w*)/)[1]
                ];
            }
            else
            {
                // New working for default theme 1.4 and theme 1.5
                var splitData = $('.selectProductSort').val().split(':');
            }
            data += '&orderby='+splitData[0]+'&orderway='+splitData[1];
        }
        if ($('select[name=n]:first').length)
        {
            if (params_plus)
                data += '&n=' + $('select[name=n]:first').val();
            else
                data += '&n=' + $('div.pagination form.showall').find('input[name=n]').val();
        }
    
        var slideUp = true;
        if (params_plus == undefined || !(typeof params_plus == 'string'))
        {
            params_plus = '';
            slideUp = false;
        }
    
        // Get nb items per page
        var n = '';
        if (params_plus)
        {
            $('div.pagination select[name=n]').children().each(function(it, option) {
                if (option.selected)
                    n = '&n=' + option.value;
            });
        }
        ajaxQuery = $.ajax(
        {
            type: 'GET',
            url: baseDir + 'modules/blocklayered/blocklayered-ajax.php',
            data: data+params_plus+n,
            dataType: 'json',
            cache: false, // @todo see a way to use cache and to add a timestamps parameter to refresh cache each 10 minutes for example
            success: function(result)
            {
                $('.image_ajax_loader').hide();
    
                if (result.meta_description != '')
                    $('meta[name="description"]').attr('content', result.meta_description);
    
                if (result.meta_keywords != '')
                    $('meta[name="keywords"]').attr('content', result.meta_keywords);
    
                if (result.meta_title != '')
                    $('title').html(result.meta_title);
    
                if (result.heading != '')
                    $('h1.page-heading .cat-name').html(result.heading);
    
                $('#layered_block_left').replaceWith(utf8_decode(result.filtersBlock));
                $('.category-product-count, .heading-counter').html(result.categoryCount);
    
                if (result.nbRenderedProducts == result.nbAskedProducts)
                    $('div.clearfix.selector1').hide();
    
                if (result.productList){
                    $('.product_list').replaceWith(utf8_decode(result.productList));
                }
                else
                    $('.product_list').html('');
    
                $('.product_list').css('opacity', '1');
                if ($.browser.msie) // Fix bug with IE8 and aliasing
                    $('.product_list').css('filter', '');
    
                if (result.pagination.search(/[^\s]/) >= 0)
                {
                    var pagination = $('<div/>').html(result.pagination)
                    var pagination_bottom = $('<div/>').html(result.pagination_bottom);
    
                    if ($('<div/>').html(pagination).find('#pagination').length)
                    {
                        $('#pagination').show();
                        $('#pagination').replaceWith(pagination.find('#pagination'));
                    }
                    else
                        $('#pagination').hide();
    
                    if ($('<div/>').html(pagination_bottom).find('#pagination_bottom').length)
                    {
                        $('#pagination_bottom').show();
                        $('#pagination_bottom').replaceWith(pagination_bottom.find('#pagination_bottom'));
                    }
                    else
                        $('#pagination_bottom').hide();
                }
                else
                {
                    $('#pagination').hide();
                    $('#pagination_bottom').hide();
                }
    
                paginationButton(result.nbRenderedProducts, result.nbAskedProducts);
                ajaxLoaderOn = 0;
    
                // On submiting nb items form, relaod with the good nb of items
                $('div.pagination form').on('submit', function(e)
                {
                    e.preventDefault();
                    val = $('div.pagination select[name=n]').val();
    
                    $('div.pagination select[name=n]').children().each(function(it, option) {
                        if (option.value == val)
                            $(option).attr('selected', true);
                        else
                            $(option).removeAttr('selected');
                    });
    
                    // Reload products and pagination
                    reloadContent();
                });
                if (typeof(ajaxCart) != "undefined")
                    ajaxCart.overrideButtonsInThePage();
    
                if (typeof(reloadProductComparison) == 'function')
                    reloadProductComparison();
    
                filters = result.filters;
                initFilters();
                initSliders();
    
                current_friendly_url = result.current_friendly_url;
    
                // Currente page url
                if (typeof(current_friendly_url) === 'undefined')
                    current_friendly_url = '#';
    
                // Get all sliders value
                $(['price', 'weight']).each(function(it, sliderType)
                {
                    if ($('#layered_'+sliderType+'_slider').length)
                    {
                        // Check if slider is enable & if slider is used
                        if (typeof($('#layered_'+sliderType+'_slider').slider('values', 0)) != 'object')
                        {
                            if ($('#layered_'+sliderType+'_slider').slider('values', 0) != $('#layered_'+sliderType+'_slider').slider('option' , 'min')
                            || $('#layered_'+sliderType+'_slider').slider('values', 1) != $('#layered_'+sliderType+'_slider').slider('option' , 'max'))
                                current_friendly_url += '/'+blocklayeredSliderName[sliderType]+'-'+$('#layered_'+sliderType+'_slider').slider('values', 0)+'-'+$('#layered_'+sliderType+'_slider').slider('values', 1)
                        }
                    }
                    else if ($('#layered_'+sliderType+'_range_min').length)
                        current_friendly_url += '/'+blocklayeredSliderName[sliderType]+'-'+$('#layered_'+sliderType+'_range_min').val()+'-'+$('#layered_'+sliderType+'_range_max').val();
                });
    
                window.location.href = current_friendly_url;
    
                if (current_friendly_url != '#/show-all')
                    $('div.clearfix.selector1').show();
    
                lockLocationChecking = true;
    
                if (slideUp)
                    $.scrollTo('.product_list', 400);
                updateProductUrl();
    
                $('.hide-action').each(function() {
                    hideFilterValueAction(this);
                });
    
                if (display instanceof Function) {
                    var view = $.totalStorage('display');
    
                    if (view && view != 'grid')
                        display(view);
                }
            }
        });
        ajaxQueries.push(ajaxQuery);
    }
    
    1 回复  |  直到 8 年前
        1
  •  1
  •   sree    8 年前

    根据您的代码,您将使用图像ajax加载器2次。就在一个地方评论一下。据我所知,您在单击“下一步”按钮时使用的是调用“reloadcontent(params_plus)”函数,并且调用了两次ajax_加载器。