javascript - jquery wait for ajax load to complete after click event - Stack Overflow

admin管理员组

文章数量:1399815

I'm working on a magento site which uses ajax layered navigation. When the user clicks on a color link in the layered nav it loads a list of the relevent products. I want to fire a click event after the ajax has pleted.

I thought I could use the jQuery when() function for this but I can't get it working.

jQuery( "a#red-hoi-swatch" ).click(function() {
    jQuery.when( jQuery.ajax() ).then(function() {
      jQuery("a[name*='chili-ireye']").click();
    });
});

Basically, I want to run jQuery("a[name*='chili-ireye']").click(); after the ajax has finished when a user clicks the a#red-hoi-swatch.

UPDATE I found the ajax responsible for this, it's from the Magento Blacknwhite theme we bought

/*DONOT EDIT THIS CODE*/
function sliderAjax(url) {
    if (!active) {
        active = true;
        jQuery(function($) {
            oldUrl = url;
            $('#resultLoading .bg').height('100%');
            $('#resultLoading').fadeIn(300);
            try {
                $('body').css('cursor', 'wait');
                $.ajax({
                    url: url,
                    dataType: 'json',
                    type: 'post',
                    data: data,
                    success: function(data) {
                        callback();
                        if (data.viewpanel) {
                            if ($('.block-layered-nav')) {
                                $('.block-layered-nav').after('<div class="ajax-replace" />').remove();
                                $('.ajax-replace').after(data.viewpanel).remove();
                            }
                        }
                        if (data.productlist) {
                            $('.category-products').after('<div class="ajax-category-replace" />').remove();
                            $('.ajax-category-replace').after(data.productlist).remove();
                        }
                        var hist = url.split('?');
                        if(window.history && window.history.pushState){
                            window.history.pushState('GET', data.title, url);
                        }
                        $('body').find('.toolbar select').removeAttr('onchange');
                        $('#resultLoading .bg').height('100%');
                        $('#resultLoading').fadeOut(300);
                        $('body').css('cursor', 'default');
                        ajaxtoolbar.onReady();
                        jQuery('.block-layered-nav a').off('click.vs');
                        try{
                            ConfigurableSwatchesList.init();
                        }catch(err){}
                    }
                })
            } catch (e) {}
        });
        active = false
    }
    return false
}


function callback(){
    }

I'm working on a magento site which uses ajax layered navigation. When the user clicks on a color link in the layered nav it loads a list of the relevent products. I want to fire a click event after the ajax has pleted.

I thought I could use the jQuery when() function for this but I can't get it working.

jQuery( "a#red-hoi-swatch" ).click(function() {
    jQuery.when( jQuery.ajax() ).then(function() {
      jQuery("a[name*='chili-ireye']").click();
    });
});

Basically, I want to run jQuery("a[name*='chili-ireye']").click(); after the ajax has finished when a user clicks the a#red-hoi-swatch.

UPDATE I found the ajax responsible for this, it's from the Magento Blacknwhite theme we bought

/*DONOT EDIT THIS CODE*/
function sliderAjax(url) {
    if (!active) {
        active = true;
        jQuery(function($) {
            oldUrl = url;
            $('#resultLoading .bg').height('100%');
            $('#resultLoading').fadeIn(300);
            try {
                $('body').css('cursor', 'wait');
                $.ajax({
                    url: url,
                    dataType: 'json',
                    type: 'post',
                    data: data,
                    success: function(data) {
                        callback();
                        if (data.viewpanel) {
                            if ($('.block-layered-nav')) {
                                $('.block-layered-nav').after('<div class="ajax-replace" />').remove();
                                $('.ajax-replace').after(data.viewpanel).remove();
                            }
                        }
                        if (data.productlist) {
                            $('.category-products').after('<div class="ajax-category-replace" />').remove();
                            $('.ajax-category-replace').after(data.productlist).remove();
                        }
                        var hist = url.split('?');
                        if(window.history && window.history.pushState){
                            window.history.pushState('GET', data.title, url);
                        }
                        $('body').find('.toolbar select').removeAttr('onchange');
                        $('#resultLoading .bg').height('100%');
                        $('#resultLoading').fadeOut(300);
                        $('body').css('cursor', 'default');
                        ajaxtoolbar.onReady();
                        jQuery('.block-layered-nav a').off('click.vs');
                        try{
                            ConfigurableSwatchesList.init();
                        }catch(err){}
                    }
                })
            } catch (e) {}
        });
        active = false
    }
    return false
}


function callback(){
    }

• javascript
• jquery
• ajax
• .when

Share Improve this question Follow edited Jul 9, 2015 at 9:26 Holly asked Jul 9, 2015 at 9:05 HollyHolly 7,7822525 gold badges9292 silver badges146146 bronze badges 4

• why not call the click at the end of the success function in the ajax call? – Pete Commented Jul 9, 2015 at 9:11
• Where is the code loading (via ajax) the relevent products when you click on a#red-hoi-swatch ? Is it done elsewhere ? Or do you not put all the code in your example ? – Sébastien Doncker Commented Jul 9, 2015 at 9:11
• Provide your ajax so we can see how you are initializing it. – EternalHour Commented Jul 9, 2015 at 9:24
• @EternalHour, just posted it in my question. – Holly Commented Jul 9, 2015 at 9:27

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

I was able to achieve this with the ajaxComplete() function:

jQuery( "a#red-hoi-swatch" ).click(function() {
    jQuery(document).ajaxComplete(function(){
        jQuery("a[name*='chili-ireye']").click();
    });
});

Not done jQuery for a while but do you really need the .when()?

Can you not just do

jQuery( "a#red-hoi-swatch" ).click(function() {
    var url = 'http://my/api/url';
    jQuery.ajax(url).then(function() {
      jQuery("a[name*='chili-ireye']").click();
    });
});

You can make any of the following 3

1. calling your click event on the success of your ajax call

2. you can make the asynch property of your ajax call to false;

3. callback the click event on success of your ajax call.

You can use handlers just after ajax queries or you can define a success callback for the ajax query. From the jQuery API:

// Assign handlers immediately after making the request,
// and remember the jqXHR object for this request
var jqxhr = $.ajax( "example.php" )
  .done(function() {
    alert( "success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "plete" );
  });

// Perform other work here ...

// Set another pletion function for the request above
jqxhr.always(function() {
  alert( "second plete" );
});

本文标签： javascriptjquery wait for ajax load to complete after click eventStack Overflow