Can I control different jumpers for different ajax events?

Question

I have a form with two places that use ajax to send information to the server.

$("#loading img").ajaxStart(function(){ // this progress bar is used by both ajax submission. $(this).show(); }).ajaxStop(function(){ $(this).hide(); }); <div id="loading"> <img src="loading4.gif" border="0" /> </div> $('#countyForm').ajaxForm(options); // Case I: use ajax to submit the form $('form#carSelect').change(function(){ // Case II: use ajax to submit the field $.ajax({ ... } }); }); 

How can I customize ajax in jQuery so that I can use a different progress panel for different ajax views.

Say for case I, I use image1 and case II, I use image2.

thanks

Answer 1

Similar jsFiddle example without ajaxForm

Instead of using Ajaxstart and stopping, just show the individual boot image, then start Ajax right away. Ajaxstop fires when all ajax is executed on the page. You want individual attention.

The ajaxForm plugin allows you to use the callback function after starting AJAX. Use this to remove custom animations. Separately bind the click event handler to the form submit button to load this custom animation. I have not used this plugin, so it might be easier.

Otherwise, just upload your custom image, call AJAX, and delete the image successfully.

 // Case I -------------------------------- // Bind the event handler to the #countyForm submit button $("#countyForm:submit").click(function() { // Throw in the customized loading animation when the form is submitted. $("#idToShowLoading1").html('<img src="custom1.gif" />'); // .ajaxForm() handles the AJAX and the success. }); // Make use of ajaxForm to handle your form $('#countyForm').ajaxForm(function() { // remove loading img $("#idToShowLoading1").html(''); // Haven't used this plugin, but your options, etc here }); // Case II -------------------------------- $("form#carSelect").change(function() { // First throw in the customized loading animation $("#idToShowLoading2").html('<img src="custom2.gif" />'); // Then make the Ajax call. $.ajax({ url: 'yoururlhere.html/blah.php', success: function(data) { // remove loading img or replace it w/ content $("#idToShowLoading2").html(''); // success stuff goes here } }); });