ajax Preloader is not working in chrome,safari while working in firefox

Question

I have a problem in "Ajax Loader image". On Firefox it is working fine but on chrome that ajax loader image does not seems.

I have a some attributes on sidebar when I check any attribute Products changes according with it and a Preloader image generated before ajax completed.What I am doing is when I check on any attribute first I insert a gif image in div html and show it using .show() method and after success of ajax I set div html null and hide it.

You can see that div in firebug (<div id="ajax_loader_div" style="display:none;"></div>)

Code is really complicated that's why I am not posting code here.Really very Sorry for that.You can see it on http://vcompare4u.com/wpcompare/products/laptops/

I need help.Please Thanks!!!

It occurs sometimes in chrome with some weird reasons. Sometimes the loader animation will not work in chrome. Try updating your chrome and try your loader. — Sandeep Thomas, Jul 17 '13 at 14:14
I am not seeing a div with that id in either chrome or ff, how is it making it into the page? — Orangepill, Jul 18 '13 at 04:31

score 1 · Answer 1 · edited May 23 '17 at 12:21

1

<div id="#ajax_loader_css" style="display:none;"></div>

should be

<div id="ajax_loader_css" style="display:none;"></div>

Based on the accepted answer here valid values for an id element are

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Firefox is obviously trying to fix it by removing the invalid character making the #ajax_loader_css css selector match something where as chrome is ignoring it so your selector matches nothing.

edited May 23 '17 at 12:21

Community

1
1

answered Jul 18 '13 at 04:20

Orangepill

23,853
3
38
62

Sorry for my question it was my typing mistake. id = "ajax_loader_div". SORRY – Bhuvnesh Gupta Jul 18 '13 at 04:23
Please edit your answer and Sorry for that div id. I need solution. Thanks – Bhuvnesh Gupta Jul 18 '13 at 04:24
I am seeing some invalid request for images like 'htthttp://www.getprice.com.au/images/uploadimg/1060/120_51190B88B26D2550E10080010AF11387.JPGp://www.getprice.com.au/images/uploadimg/1060/120_516BBF4CFADEF370E10080000AF11387.JPG' – Orangepill Jul 18 '13 at 04:35
and http://vcompare4u.com/wpcompare/wp-content/plugins/custom-post-type-ui/img/shadow.png – Orangepill Jul 18 '13 at 04:36
where are you seeing these request. I am not getting sir. – Bhuvnesh Gupta Jul 18 '13 at 04:42
@BhuvneshGupta the 4th image in #products-carousel . – Orangepill Jul 18 '13 at 04:49
@BhuvneshGupta The bigger issue is #ajax_loader_div does not appear anywhere on your page. – Orangepill Jul 18 '13 at 04:50
It is coming there sir. Please check it in firebug.this comes under
– Bhuvnesh Gupta Jul 18 '13 at 04:55
I think its my mistake. you need to click on subcategories too. this is the actual link where that loader div is.http://vcompare4u.com/wpcompare/products/laptops/ Thanks for your replies now you can see that Please help me. Thanks – Bhuvnesh Gupta Jul 18 '13 at 05:06

score 1 · Accepted Answer · edited May 23 '17 at 10:25

I've seen your code

It is well known a synchronous requests will lock the UI. So not surprisingly on chrome and safari, (it does in Firefox interestingly)

can you try something like this

jQuery('#customtag_widget-2 .compare_attribute').bind('change', 

jQuery.filterProductsCompare2 = function () {
$.ajaxSetup({async:false});
jQuery('#ajax_loader_div').css('display', 'block');
jQuery('#ajax_loader_div').html('<img src="http://vcompare4u.com/wpcompare/wp-content/themes/compare/_assets/img/ajax-loader.gif" / >');

jQuery('#customtag_widget-2 .compare_attribute_group').each(function () {



        jQuery(this).children().each(function () {

            if (jQuery(this).children('.compare_attribute').attr('checked')) {

                if (jQuery(this).children('.compare_attribute').attr('name').indexOf('b[') != -1) {

                    brands.push(jQuery(this).children('.compare_attribute').attr('value'));

                }

                if (jQuery(this).children('.compare_attribute').attr('name').indexOf('c[') != -1) {

                    categories.push(jQuery(this).children('.compare_attribute').attr('value'));

                }

            }

        })

    } else {

        minmaxarr = jQuery(this).attr('value').split(';');

        minPrice = minmaxarr[0];

        maxPrice = minmaxarr[1];

    }

    if (!jQuery.support.placeholder) {

        if (isEmptyPlaceholder == 1) {

            jQuery(this).val('Search...');

        }

    }

})

if (jQuery('#dont_change_price').is(':checked')) {
    minPrice = jQuery('#overall_min').val();
    maxPrice = jQuery('#overall_max').val();
} else {}

jQuery.ajax({

    url : file_url,
    data : {
        ajaxsearch : '1',
        s : 'compare',
        ki : keywords_comparei,
        product : '',
        c : categories,
        b : brands,
        checked_id : checked_string,
        dont_change_price : dont_change_price,
        min : minPrice,
        max : maxPrice,
        product_category : product_category
    },
    success : function (data) {
        // Do stuff here
    }
});

jQuery.ajax({
    url : bracket_file_url,
    data : {
        ajaxsearch : '1',
        s : 'compare',
        ki : keywords_comparei,
        product : '',
        c : categories,
        b : brands,
        checked_id : checked_string,
        min : minPrice,
        max : maxPrice,
        product_category : product_category
    },
    success : function (bracket_data) {
        // DO stuff here
    }

});
if (!jQuery('#dont_change_price').is(':checked')) {
jQuery.ajax({

    url : price_file_url,
    data : {
        ajaxsearch : '1',
        s : 'compare',
        ki : keywords_comparei,
        product : '',
        c : categories,
        b : brands,
        checked_id : checked_string,
        min : minPrice,
        max : maxPrice,
        product_category : product_category

    },

    success : function (price_data) {

        // DO stuff here

    }

});
}
jQuery('#ajax_loader_div').hide();
jQuery('#ajax_loader_div').html('');


$.ajaxSetup({async:true});
});

What I am trying to do is to do synchronous request for each ajax request and instead of using success functions I am using ajax request separately. Due to synchronous nature each request will be processed one after another.

Inspecting your code in chrome console I've seen ajax loader for very little moment get hided immediately.

here is reference problem same like yours

Force UI repaint in Webkit (Safari & Chrome) right before Synchronous "Ajax" request

One more question with same when I am clicking on next and prev it is not showing loader while I am triggering the same event. — Bhuvnesh Gupta, Jul 18 '13 at 05:27

ajax Preloader is not working in chrome,safari while working in firefox

2 Answers2