[jquery] show loading.. image when processing onclick event

Question

A button click event triggers filtering on a data table. While JQuery is processing that , the page should display a loading image.This is not an ajax request.

This is my code that doesn't work :

$("somebutton").click(function(){
  $("#loader").show();
  // do some stuff.....
  //...
  // now hide the loader again
  $("#loader").hide();
});

Any ideas?

Answer 1

If your do some stuff can use a callback function then put the hide loader function in that. Something like

$("somebutton").click(function(){
  $("#loader").show();
  $("yourselector").method(something, function(){$("#loader").hide();});  
});

Answer 2

Try this:

$("somebutton").click(function(){
  $("#loader").show();
  // do some stuff.....
  //...
  // now hide the loader again
  $("#loader").hide();
});

Use click instead of onclick