jquery wait for ajax load to complete after click event

Question

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 completed.

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(){
    }

why not call the click at the end of the success function in the ajax call? — Pete, Jul 09 '15 at 09: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, Jul 09 '15 at 09:11
Provide your ajax so we can see how you are initializing it. — EternalHour, Jul 09 '15 at 09:24

score 4 · Accepted Answer · answered Jul 09 '15 at 09:35

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();
    });
});

answered Jul 09 '15 at 09:35

Holly

7,462
23
86
140

This is brilliant and works like a charm! Thank you!! – cbloss793 Oct 05 '17 at 23:33

score 1 · Answer 2 · answered Jul 09 '15 at 09:11

1

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();
    });
});

answered Jul 09 '15 at 09:11

Matt Herbstritt

4,754
4
25
31

It didn't work, I'm not sure what to put in the url. I put in the `href` from the `` which seems to fire the ajax, i.e. `http://dev.mysite.local/clothing.html?hoi_search_colors=109` – Holly Jul 09 '15 at 09:17

score 1 · Answer 3 · answered Jul 09 '15 at 09:15

1

You can make any of the following 3

calling your click event on the success of your ajax call
you can make the asynch property of your ajax call to false;
callback the click event on success of your ajax call.

answered Jul 09 '15 at 09:15

KDP

1,481
7
13

Setting async property to false is deprecated and in the process of being removed (https://xhr.spec.whatwg.org/#sync-warning). It doesn't work on latest Chrome already (2016-04-26). – Laurynas Lazauskas Apr 27 '16 at 11:54

score 0 · Answer 4 · answered Jul 09 '15 at 09:13

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( "complete" );
  });

// Perform other work here ...

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

jquery wait for ajax load to complete after click event

4 Answers4