JQuery Problems with Loader Indicator and Button Disable

I am having some issues with Jquery. When a user clicks on the submit button, I want to replace the main contents with an animated .gif of a loader bar, and I want to disable the search button.

I have two problems: 1. The animated .gif does not move. 2. When the user presses the back button, the button is still disabled.

Here is the code that I am using:

  // Setup AJAX
  $.ajaxSetup ({
    cache: false
  });

  // Process search submit click
  var ajax_load = 开发者_JAVA百科"<img src='static/loader.gif' />";
  var loadURL = "/results/";
  $("#search-submit").click(function() {
    $("#main").html(ajax_load).load(loadURL);
    $(this).attr('disabled', 'disabled');
  });

So, I want the animated .gif to actually move, and I want the submit button to be enabled again when the user goes back.

Thanks!

I suggest placing the .gif inside a div and using CSS to {display:none;} When the submit click event is fired do this: $('#hidden-div').show(0); After you confirm new content is loaded use a callback function to $('#hidden-div').hide(0);

This way the animated gif is already there and should be animated. Doing this from my phone but I hope this helped!

It sounds to me like the submit button is posting the form data somewhere when its clicked. At the same moment it is trying to redirect it is also inserting html into the #main container. The gif may not animate because the browser is moving away from that page?

is the form submitting somewhere or is it just an iteraction with the dom?