Question

I have this simple code, where on live(click:) an external link is called through ajax(). What seems wrong is that two functions where fired only on ajax({success:}).

here the code:

$('.ajaxLink').live({
    click :  function(e) {

        $this = $(this);
        var myLink = $this.attr('href');
        var myId = $this.attr('id');

        e.preventDefault();
        $('html,body').animate({  // this is fired only AFTER content load
            scrollTop : 0
        }, 1500);

        $.ajax({ type: 'GET',   
             url: myLink,   
             async: false,
             dataType: 'html',

             beforeSend : function() {
                caricaModal.open();  // this is also fired only after content load
             },                      // is just an animation on a div.

             success : function(page) {
                caricaModal.close(); // this is fired at good timing

            // some more code here where I insert (page) in the DOM

            }
        });

    }

});

If you wonder how much time this takes to load the page it takes about 1.5 seconds, and yes, the fact is that when I click nothing happens before things have loaded and inserted into DOM.

any idea?

Answer 1

That is because your synchronous ajax call locks up the browser, thereby pausing the animation thread created by .animate. When you call .animate, the browser does not wait for it to finish before evaluating the next ($.ajax) statement, so the sajax call effectively pauses it until the server has responded. Try putting the ajax call into .animate‘s callback, or removing the async: false option.