title: Implementing loading gif while processing data and fade in animation on jQuery form UI
body: <p>I am using the jquery form (http://jquery.malsup.com/form/) to submit a form on this page: <a href="http://licf.ronaldboadi.com/practice/test.html" rel="nofollow">http://licf.ronaldboadi.com/practice/test.html</a>. Here is the code below:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  // prepare the form when the DOM is ready 
  $(document).ready(function() { 
      var options = { 
          target:        '#submitform',   // target element(s) to be updated with server response 
          beforeSubmit:  showRequest,  // pre-submit callback 
          success:       showResponse  // post-submit callback 
  
          // $.ajax options can be used here too, for example: 
          //timeout:   3000 
      }; 
  
      // bind to the form's submit event 
      $('#camperapplicationForm').submit(function() { 
          // inside event callbacks 'this' is the DOM element so we first 
          // wrap it in a jQuery object and then invoke ajaxSubmit 
          $(this).ajaxSubmit(options); 
  
          // !!! Important !!! 
          // always return false to prevent standard browser submit and page navigation 
          return false; 
      }); 
  }); 
  
  // pre-submit callback 
  function showRequest(formData, jqForm, options) { 
      var queryString = $.param(formData); 
     // var formElement = jqForm[0]; 
  
      alert('About to submit: \n\n' + queryString); 
      return true; 
  } 
  
  // post-submit callback 
  function showResponse(responseText, statusText, xhr, $form)  { 
      alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
          '\n\nThe output div should have already been updated with the responseText.'); 
  } 
  &lt;/script&gt;
  </code></pre>
  
  <p>I have settled on using a loading gif while I am processing data and once I have the div ready I can use a fade in animation. </p>
  
  <p>This would involve adding a simple img element (loading gif) to the div when I submit the form. When I have the result, for example in the success method of an $.ajax call, I need to hide the div, replace the img element with the result I got from the server then add the fade in animation.</p>
  
  <p>But I've been wondering how I can implement the below code into my current code... any ideas how to?</p>
  
  <pre><code>//Assuming you have a $.ajax request to submit the form:
  
  //add the loading gif
  $('#submitform').html('&lt;img src="loading.gif" /&gt;');
  
  //send your form data
  $.ajax({
      url: "process.php",
      data: {
          param1: 1,
          param2: 2,
          param3: 3
      },
      success: function(data){
          //hide the div, assuming the process.php return simple html code to your page update the div content, then add the fade in animation
          $('#submitform').hide().html(data).fadeIn('slow');
      }
  });
  </code></pre>