How to show please wait while ajax request process in complete -

How to show please wait while ajax request process in complete -

this code working fine, want create ajax please wait while still requesting information: here code.

function products(){ if (document.getelementbyid('date').value.length == 0) { alert("please pick date"); document.getelementbyid('date').focus(); homecoming false; } var ajaxrequest; // variable makes ajax possible! try{ // opera 8.0+, firefox, safari ajaxrequest = new xmlhttprequest(); } grab (e){ // net explorer browsers try{ ajaxrequest = new activexobject("msxml2.xmlhttp"); } grab (e) { try{ ajaxrequest = new activexobject("microsoft.xmlhttp"); } grab (e){ // went wrong alert("your browser broke!"); homecoming false; } } } // create function receive info sent server ajaxrequest.onreadystatechange = function(){ if(ajaxrequest.readystate == 4){ var ajaxdisplay = document.getelementbyid('sum'); ajaxdisplay.innerhtml = ajaxrequest.responsetext; } } var usr = document.getelementbyid('usr').value; var date = document.getelementbyid('date').value; var querystring = "?usr=" + usr + "&date=" + date; ajaxrequest.open("get", "ajax_prom.php" + querystring, true); ajaxrequest.send(null); }

in page, add together div id - divajaxrequestinprogress. add together text want show while ajax request in progress div. have animated gif well. now, show when start ajax processing , hide 1 time request complete. function products(){ if (document.getelementbyid('date').value.length == 0) { alert("please pick date"); document.getelementbyid('date').focus(); homecoming false; } $("#divajaxrequestinprogress").show(); var ajaxrequest; // variable makes ajax possible! try{ // opera 8.0+, firefox, safari ajaxrequest = new xmlhttprequest(); } grab (e){ // net explorer browsers try{ ajaxrequest = new activexobject("msxml2.xmlhttp"); } grab (e) { try{ ajaxrequest = new activexobject("microsoft.xmlhttp"); } grab (e){ // went wrong alert("your browser broke!"); homecoming false; } } } // create function receive info sent server ajaxrequest.onreadystatechange = function(){ if(ajaxrequest.readystate == 4){ var ajaxdisplay = document.getelementbyid('sum'); ajaxdisplay.innerhtml = ajaxrequest.responsetext; } $("#divajaxrequestinprogress").hide(); } var usr = document.getelementbyid('usr').value; var date = document.getelementbyid('date').value; var querystring = "?usr=" + usr + "&date=" + date; ajaxrequest.open("get", "ajax_prom.php" + querystring, true); ajaxrequest.send(null); }

i have added 2 lines code - 1 show , 1 hide div.

ajax