saving... (AJAX)

[anujgarg]

I am submitting a form and trying to show the Saving... image for a while. I have written a code for this but it is not working properly.

The code is:

function showSaving()

{

    document.getElementById('basic_info').style.display='block';

    setTimeout('clearSaving();', 2000);

}

 

function clearSaving(){

    document.getElementById('basic_info').style.display='none';

}

 

<a href=javascript:showSaving()> Click</a>

<div id=basic_info>Saving...</div>

 

Any suggestion

 

TIA

[GKWelding]

can you show your AJAX code as it may be something to do with when you're calling this function and to what on_ready_state_chage value you're 'assigning' it...

[anujgarg]

Can you please give me an idea where and how to call this function so that I can call that image for 2 secs only?

 

Should the function be called in the js file or the other file in which business logic is being done?

 

Please suggest?

[GKWelding]

var xmlHttp

function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  return
  } 
var url="gethint.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
} 
}function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}
return xmlHttp;
}

 

The code above gives a simple example of an AJAX request for a suggestions/comment box. An example of it can be seen here http://www.w3schools.com/PHP/php_ajax_suggest.asp.

 

The stateChanged() Function

 

This function executes every time the state of the XMLHTTP object changes.

 

When the state changes to 4 (or to "complete"), the content of the txtHint placeholder is filled with the response text.

 

The ready state goes from 1, which is loading request, sequentially through to 4 which is request completed. Before any AJAX command is passed the ready state is at 0. Binding your 'waiting' or 'loading' image to any of these ready state numbers should in theory give you the desired effect. I'm still looking into getting it to wait 2 seconds.

[GKWelding]

found a useful list of what all of the states are...

 

0 The request is not initialized

1 The request has been set up

2 The request has been sent

3 The request is in process

4 The request is complete

[GKWelding]

This script is exactly what you're looking for...

 

<script type="text/javascript">
// code to create and make AJAX request
function getFile(pURL) {
    if (window.XMLHttpRequest) { // code for Mozilla, Safari, etc 
        xmlhttp=new XMLHttpRequest();
    } else if (window.ActiveXObject) { //IE 
        xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
    }

    // if we have created the xmlhttp object we can send the request
    if (typeof(xmlhttp)=='object') {
        xmlhttp.onreadystatechange=xmlhttpResults;
        xmlhttp.open('GET', pURL, true);
        xmlhttp.send(null);
        // replace the submit button image with a please wait for the results image.
        document.getElementById('theImage').innerHTML = '<img id="submitImage" name="submitImage" src="images/ajaxCallChangeImage_wait.gif" alt="Please Wait for AJAX Results">';
    // otherwise display an error message
    } else {
        alert('Your browser is not remote scripting enabled. You can not run this example.');
    }
}

// function to handle asynchronous call
function xmlhttpResults() {
    if (xmlhttp.readyState==4) { 
        if (xmlhttp.status==200) {
            // we use a delay only for this example
            setTimeout('loadResults()',3000);
        }
    }
}

function loadResults() {
    // put the results on the page
    document.getElementById('nextDropDown').innerHTML = xmlhttp.responseText;
    // replace the please wait image with the results are ready image
    document.getElementById('theImage').innerHTML = '<img id="submitImage" name="submitImage" src="images/ajaxCallChangeImage_ready.gif" alt="AJAX Results Ready">';
    // delay for 2 seconds before resetting the submit image button.
    setTimeout('resetImage()',2000);
}


function resetImage() {
    // show the submit image button for another AJAX call.
    document.getElementById('theImage').innerHTML = '<a href="javascript:void(0);" onclick="getFile(\'http://www.rodsdot.com/ee/stateDropDownSelect.asp?l=\'+document.getElementById(\'letter\')[document.getElementById(\'letter\').selectedIndex].value)"><img id="submitImage" name="submitImage" src="images/ajaxCallChangeImage_submit.gif" alt="Submit AJAX Request" type="image"><\/a>';
}
</script>