Question

I have a form with two places that use ajax to submit the information to 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 the ajax in jQuery so that I can use different progressbar for different ajax submission.

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

Thank you

Answer 1

Similar jsFiddle Example w/o ajaxForm

Instead of using Ajaxstart and stop, just show the individualized loading image first, then fire the Ajax directly. Ajaxstop fires when all the ajax is done on a page. You want individualized attention.

The ajaxForm plugin allows for a callback function for after the AJAX has fired. Use this to remove your custom animation. Separately bind a click event handler to the form’s submit button to load that custom animation. I haven’t used that plugin, so there may be an easier way.

For the other case, simply load the custom image, call the AJAX and remove the image on success.

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