Multiple JS effects on one event

Question

I've got a bunch of Ajax links in a menu that reload a div called #ajaxupdatediv. I want to display another div while that's loading the new content, so how would I fire off both effects?

<div id="#ajaxupdatediv">
    Content will go here
</div>
<div id="ajaxloadingdiv">
    ...Loading...
</div>

Here's a bit of the PHP

array(
    'update' => '#ajaxupdatediv',
    'before' => $this->Js->get('#ajaxupdatediv')->effect('fadeOut'),
    'complete' => $this->Js->get('#ajaxupdatediv')->effect('fadeIn'),
)

Answer 1

You can trigger it for all events like this:

$(function() {
   //Show loading during ajax...
   $('#ajaxloadingdiv').ajaxStart(function() { $(this).fadeIn(); })
                       .ajaxStop(function() { $(this).hide(); });

   //Hide the content div
   $('#ajaxupdatediv').ajaxStart(function() { $(this).hide(); })
                       .ajaxStop(function() { $(this).fadeIn(); });
});

This will hide the content while loading, fade in #ajaxloadingdiv when any ajax event starts (leave it if multiple ones happen at once) and hide it when the last ajax request finishes, at the same time, #ajaxupdatediv will fade back in. Using this approach, you don't need to do anything per element/call, these are global handlers, see .ajaxStart() and .ajaxStop() for complete info.