Search code examples
javascriptprototypejs

running ajax code after fade function is completed

I need to run my ajax function after fade is completed. How can I do that? Thanks.

$$('.loading').invoke("fade", "from: 0, to: 1");

new Ajax.Request(ajaxUrl,
    {
     method:'post',
     onSuccess: function(data){
     var tmp=data.responseText;
     $$('.content').invoke('insert',tmp);
    }
Solution

  • Firstly, since the fade method expects an object as an argument, you need to pass an object to invoke instead of a string. Then, you can add the afterFinish property to that object (as I already showed you how to do in your previous question):

    $$('.loading').invoke("fade", {
    from: 0, 
    to: 1,
    afterFinish: function() {
        //Do stuff
    }
});

    However, note that since invoke basically iterates over the array of elements, the afterFinish callback will be called once for every element. I don't know if you want to fire multiple AJAX requests or not, but it's worth bearing that in mind.