DHTML Page doesn't refresh (NOT Reload question!) objects ...

you have to check teh state of the Response.

>> why does IE wait till the response comes back from the server before updating the page
when using XMLHttpRequest the
you have to assign orReadyStateChange function;
there are 4 staets to this object 4==page /reuest loaded.
The IE waits beacuse of that.

mean while im going over your code to see if there are any other issues.

Nushi

Hi,

thanks for your comments. But I think you misunderstand.

it's not a problem AFTER the xml has been returned from the server.

The problem is BEFORE. It doesn't take the time to execute the 'divPleaseWait.style.display="block";' and 'BODY.style.cursor="wait";' until afterwards.

In my code I call 'document.all("divPleaseWait").style.display="block";' right at the beginning after the user has clicked the button, however, the div does not show on in IE till after the server has completed...

I need the 'Please wait' div to be displayed before the xml is created and xmlhttprequest is called, stay on screen till the response comes back, then I can hide it after building the results table from the xmlhttp response object.

I tried putting the alert after the divPleaseWait change display code, and that worked, but again, clicking ok on this leaves the message box on the screen till the table is built using the xmlhttp response.

it seems that IE just doesn't take time to update the pages, but goes straight on ...

Here is my entire client-side scrpt:

>>>> CODE >>>>
<script language=javascript >

function SendRequest(requestXMLDoc)
      {
// this function receives an XML DOM Document from the calling function.
// it loads posts it using HTTP to the backend service page '_Funds_action.asp'
// http://<%= sPath %>
      var retvalue;
      var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      xmlhttp.Open("POST", "ImportData.asp", false);
      
      xmlhttp.Send(requestXMLDoc);
      
      //document.write(xmlhttp.xml)
      //alert(xmlhttp.xml)
      //alert(xmlhttp.responseText);
             
      if (xmlhttp.status==200)
      {
            var xmlResponseDoc = xmlhttp.responseXML;
            //xmlhttp.responseXML menthod returns the persistable XML document sent from the
            //the server using the .save method of XMLDOM objects(xmldoc.save(response)),but
            //it requires the.asp page generating the response to set its MIME type
            //(Response.ContentType) to "text/xml",otherwise it won't parse the response
            //correctly and      xmlResponseDoc.parseError.errorCode will always be 0,also
            //xmlResponseDoc.xml will always be empty string ""
            //Alternatively,we can create a new instance of Microsoft.XMLDOM,and load the
            //response as xml string text from xmlhttp.responseText.For this,the .asp page
            //generating the response is not required to set its MIME type to "text/xml",
            //and it can parse any response sent by response.write() in the .asp page.
            //But this approach might encounter Unicode encoding(UTF-8,UCS-2,..) conversion problems.
            if ((xmlResponseDoc.parseError.errorCode == 0) && (xmlResponseDoc.xml !=""))
            {
                  var oResponseRoot = xmlResponseDoc.documentElement;
                  var ActionStatus = oResponseRoot.getAttribute("actionstatus");
                  var iRecs = oResponseRoot.getAttribute("records");
                              
                  if((ActionStatus == null) || (iRecs == null))
                  {
                        alert("Required data missing from response message.");
                        retvalue = false;
                  }
                  else
                  {
                        switch (ActionStatus)
                        {
                              case "success":retvalue = true;
                                    BuildResultsTable(oResponseRoot)
                                    break;
                              case "failed":retvalue = false;
                                                  alert(oDescription.text);
                                                  break;
                              default:alert("Response action status invalid.");
                                      retvalue = false;
                        }
                  }
            }
            else
            {
            alert("Response message is not well formed XML.");
              retvalue = false;
            }
      }
      else
      {
            alert("Backend service page unreachable or not working correctly.");
            retvalue = false;
      }
return retvalue;
}

function ShowBusy(sSystem)
      {
      document.all("divPleaseWait").style.display = "block";
      
      // set up the screen, put the elements in the right places!
      window.document.body.style.cursor="wait";
      window.status="importing...";
      
      //window.history.forward(1);
      divPleaseWait.style.left = ((document.body.offsetWidth -
      divPleaseWait.offsetWidth) / 2);
                              
      divPleaseWait.style.top = ((document.body.offsetHeight -
      divPleaseWait.offsetHeight) / 2);
      
      LoadData(sSystem)

      document.all("divPleaseWait").style.display = "none";
      window.document.body.style.cursor="default";
      window.status="Ready";            
      }

function LoadData(sSystem)
      {

      // call the Import ASP page, but in a Modal window that will
      // close as soon as the HTTP stream starts being written on
      // the server! So while the import is running server-side,
      // the DataLoad.htm will show the nice 'Please Wait'
      // DIV dialog. Then when the ASP Response is finished, and the
      // HTTP starts coming onto IE on the client - the Window_Onload
      // event will run, set up the screen of the calling page (ImportSysIDsWait.htm !)
      // and immediately close itself!

      // NOTE: XML 3 used here
      var oFundsData, sFundsDataVal
        
      // create a new XML Doc object  
      var oXML = new ActiveXObject("Microsoft.XMLDOM");
        
      // set props
      oXML.async=true;
      oXML.resolveExternals = false;
        
      // create the root element
      var oRoot=oXML.appendChild(oXML.createElement("Request"));
        
      // set the attribute to determine which table to update
      oRoot.setAttribute("system", sSystem);
      
      Isloaded = SendRequest(oXML)
      
      if (Isloaded==true)
            {
            alert("Import successful");
            }
      else
            {
            alert("Import failed")
            }

      }

function BuildResultsTable(xmlRoot)
      {
      // the DocumentELement of the xmlhttp Response object is passed in,
      // so navigate it and build a table...
      
      var nodes=xmlRoot.childNodes;
      var oTable = document.all("tblImpResults")
      
      // loop through the entire xml doc, and for each node, add a new row to the table
      for (x=0; x<nodes.length; x++)
            {
            var y = xmlRoot.childNodes.item(x)
            var oRow
            oRow = oTable.insertRow();
            
            // for each childnode, add a new cell to the table
            for (chiNode=0; chiNode< y.childNodes.length; chiNode++)
                  {
                  var oCell = oRow.insertCell();
                  oCell.innerText = y.childNodes(chiNode).text;
                  oCell.face = "Tahoma";
                  oCell.style.fontSize="10";
                  }            
            }
            document.all("divResults").style.display="block"      
            return;
      }
      
</script>
<<<< END CODE <<<

function ShowBusy is called by the 'button' click.
function LoadData is called by 'ShowBusy', but AFTER the div should be displayed.
function 'SendRequest' is called by function LoadData to send the rquest to the back-end service page using xmlhttp request

then after the server finishes and returns a xml response object conbtaining the results,

function 'BuildResultsTable' uses the xml object to data to dynamically  build a table.

finally the code returns to ShowBusy to hide the divPleaseWait and show a 'Finished' dialog


thanks for your help and investigation...

Philip

hi again:

instead of if (Isloaded==true)    {

use the
onreadystatechange to hide your div.

Nushi.

i have posted the last comment before your last comment.
so im looking over your new code now.

Nushi.

ok, I tried changing it like this, but still the div won't display untill AFTER (as opposed to before, and also I get a Type Mismatch due to the function call of ProcessLoading

function LoadData(sSystem)
      {

      // call the Import ASP page, but in a Modal window that will
      // close as soon as the HTTP stream starts being written on
      // the server! So while the import is running server-side,
      // the DataLoad.htm will show the nice 'Please Wait'
      // DIV dialog. Then when the ASP Response is finished, and the
      // HTTP starts coming onto IE on the client - the Window_Onload
      // event will run, set up the screen of the calling page (ImportSysIDsWait.htm !)
      // and immediately close itself!

      // NOTE: XML 3 used here
      var oFundsData, sFundsDataVal
        
      // create a new XML Doc object  
      var oXML = new ActiveXObject("Microsoft.XMLDOM");
        
      // set props
      oXML.async=true;
      oXML.resolveExternals = false;
      
      oXML.onreadystatechange= ProcessLoading(oXML, sSystem)
      }

function ProcessLoading(oXML, sSystem)
      {
      if (oXML.readyState == 4)
            {
          // Hide divs and change window.status
             
            // create the root element
            var oRoot=oXML.appendChild(oXML.createElement("Request"));
                    
            // set the attribute to determine which table to update
            oRoot.setAttribute("system", sSystem);
      
            Isloaded = SendRequest(oXML)
      
            if (Isloaded==true)
                  {
                  alert("Import successful");
                  }
            else
                  {
                  alert("Import failed")
                  }
            }      
      }

sorry, not entirely familiar with the idea of 'subfunction' ...

still fairly new to JavaScript.

if I use another function, I must ensure that the other function has access to the variables of the calling function right?

so should I use module-level variables? Or is there a way of passing in the variables like this:

oXML.onreadystatechange= ProcessLoading(oXML, sSystem)
     }

function ProcessLoading(oXML, sSystem)
    {
    if (oXML.readyState == 4)
         {
....


thx

Philip
if I do this I get an error msg...

BTW, the comments at the beginning of the 'LoadData' function are rubbish, and meaningless...

what I meant with subfunction was nesting 2 functions like

function LoadXML()
    {
    ....
     oXML.async = true;
     oXML.onreadystatechange = ProcessLoading;

         function ProcessLoading()
           {
                   if (oXML.readyState == 4)
                      {
                      alert("XML has been loaded. Place code to hide your loading message here...");
                      }

            }

    }

This way you are sure the inner function has access to the outer/its parent function.

What error do you get? It works fine for me...

Mingshuo

PS: do not use a function with the name "LoadXML" (as I did in the example above) since this is a predefined function! Just give it a different name...

yep, I got that in the end...

trouble is, when I do this, the code within the if(oXML.readyState == 4) ... never runs...

very strange! I must have some kind of weird XML error, here is the code within my 'LoadData' function :

      // create a new XML Doc object  
      var oXML = new ActiveXObject("Microsoft.XMLDOM");
        
      // set props
      oXML.async=true;
      //oXML.resolveExternals = false;
      
      oXML.onreadystatechange = ProcessLoading;

    function ProcessLoading()
          {
          alert("Process Loading!");
           if (oXML.readyState == 4)
                   {
            // create the root element
            var oRoot=oXML.appendChild(oXML.createElement("Request"));
               
            // set the attribute to determine which table to update
            oRoot.setAttribute("system", sSystem);
      
            Isloaded = SendRequest(oXML)
      
            if (Isloaded==true)
                  {
                  alert("Import successful");
                  }
                  else
                  {
                  alert("Import failed")
                  }

//                 alert("XML has been loaded. Place code to hide your loading message here...");
                 }

           }              

      }

>>> END CODE >>>>

so you see, it is nested.

but we NEVER see the 'alert("Process Loading!");' alert box!

it just

I need to emphasize that before nesting it worked, but the page would not refresh and show the 'divPleaseWait' until AFTER the response xml comes back from the server.

wheras now, with this nesting, I get nothing

increased points ...

BTW, I am using IE 5.5, and I (hope) I am using XML 3 on a Windows 2000 Professionsl workstation...

Sorry, you misunderstood me. The OUTER function needs to do the loading, the INNER function is called only if the state of the http request changes. It it changes to state 4, this means that the xml finally loaded and that you can hide your loading message. (In IE there are several other states that will be called before it reaches 4=loaded, so don't place code before readyState==4)


function myFunctionLoadingXmlThroughHttp()
   {
   ....
    oXML.async = true;
    oXML.onreadystatechange = CheckLoadingStatus;
   
    var success = oXML.load(filename);
    if (!success) alert("XML file not found or not correctly formatted!");


        function CheckLoadingStatus()
          {
                  if (oXML.readyState == 4)
                     {
                     alert("XML has been loaded. Place code to hide your loading message here...");
                     }

           }

   }


Hope this clears is up,
Mingshuo

let's be clear here,

the xml does not load anything, it's simply a way of sending the system id to the back-end service page using XML HTTP POst instead of asp, although it is in fact an ASP page on the back end server that does the work - running the stored procedure on the server, then returns an XML doc in the Response object. I then use that to create a results table, showing which files have been loaded into the table, how many records were read, discarded, and how many archived.

so really, there is no actual XML doc loading done on the client, until the response is sent back by the server.

Now, while that is going on, I want that divPleaseWait showing on the screen.

Unfortunately, even when I put that alert box u suggested in your first coment, yes, it shows, but when I click <OK> on that alert box, well, once again there is a type of IE hangup or memory leak that stops all further action till the response object comes back from the server...

anyway, here is the new LoadData(sSystem) function, with the nested function 'CheckLoadingStatus' as you suggested.

>>> CODE >>>>
function LoadData(sSystem)
      {

      // call the Import ASP page, but in a Modal window that will
      // close as soon as the HTTP stream starts being written on
      // the server! So while the import is running server-side,
      // the DataLoad.htm will show the nice 'Please Wait'
      // DIV dialog. Then when the ASP Response is finished, and the
      // HTTP starts coming onto IE on the client - the Window_Onload
      // event will run, set up the screen of the calling page (ImportSysIDsWait.htm !)
      // and immediately close itself!

      // NOTE: XML 3 used here
      var oFundsData, sFundsDataVal
      
      // create a new XML Doc object  
      var oXML = new ActiveXObject("Microsoft.XMLDOM");
        
      // set props
      oXML.async=true;
      oXML.onreadystatechange = CheckLoadingStatus;
             
      // create the root element
      var oRoot=oXML.appendChild(oXML.createElement("Request"));
        
      // set the attribute to determine which table to update
      oRoot.setAttribute("system", sSystem);
      
      function CheckLoadingStatus()
            {
        if (oXML.readyState == 4)
            {
            alert("XML has been loaded. Place code to hide your loading message here...");
            }
        }      
       
      Isloaded = SendRequest(oXML)
      
      
      if (Isloaded==true)
            {
            alert("Import successful");
            }
      else
            {
            alert("Import failed")
            }

      }

<<<< END CODE <<<

but despite all this, we still cannot get around this kind of IE hangup or timing issue or whatever, very weird and frustrating...

makes me wanna go back to good ole ASP/HTML forms! let the users have a blank page for 30 seconds while the ASP does it's work on the server after a form post and then 20 seconds for the HTTP stream to be written back to the IE client...mad mad mad :))

cheers, I hope you can help me

Philip

I am becomming certain this is a bug in IE 5.5 ...

I know that JS / JavaScript look at all the var decs in a function prior to executingcode, which of course means that the XML DOM Document is instantiated BEFORE the code to set the DIV !

But still, it shouldn't hang up like that.

Has anyone managed to get that DIV to display after the button is pressed, and before anything else is done?

PS: filename = URL

QUOTE:

My problem is that there is no refresh of the window after the user has clicked 'LOad Data' and before the 'SendRequest' is run

Thing is, I have a nice 'Please Wait' div all set up and looking nice, but even though I call 'divPleaseWait.style.display = "block"' before the code to run the xml send, it still only displays AFTER the xml response has come back from the server.

EOQ.

RESOLUTION:

obvious. set display = "block" when user clicks "LOad Data", and then use setTimeout to wait enough untill page refreshes (that's usually 100...500 msecs), and when timeout elapses, go "run xml send" or whatever.

oh, damn, looks like  AcklenX was first -((

Monday !

ok, that at least shows the screen updates. But now I get an error 'Object expected' at line 1 (line 1 ?)

here is my procedure:
>>>> CODE >>>>
function ShowBusy(sSystem)
      {
      // set up the screen for Busy!

      window.document.body.style.cursor="wait";
      window.status="importing...";
      window.history.forward(1);

      //LoadData(sSystem);

      window.divPleaseWait.style.display = "block";

      setTimeout("Voila()", 500)

            function Voila()
            {
               
            // set up the screen, put the elements in the right places!
            // create a new XML Doc object  
            var oXML = new ActiveXObject("Microsoft.XMLDOM");

            // set props
            oXML.async=false;
            oXML.resolveExternals = false;
                 
            // create the root element
            var oRoot=oXML.appendChild(oXML.createElement("Request"));
                 
            // set the attribute to determine which table to update
            oRoot.setAttribute("system", sSystem);
               
            Isloaded = SendRequest(oXML)
               
            if (Isloaded==true)
               {
               alert("Import successful");
               }
               else
               {
               alert("Import failed")
               }
                         
            document.all("divPleaseWait").style.display = "none";
            document.all("divFinished").style.display = "none";
            window.document.body.style.cursor="default";
            window.status="Ready";
            }
        
      }


<<< END CODE <<<<

any idea's why I should suddenly get that - is there a probkem with the nested 'Voila' function?

thanks to everyone for their excellent help with this BTW !

Philip

I don't think you can nest that. I thought that was plain code for <script> tag.
also, if you reference oXML, oRoot, etc from other places, remove all "var"s from Voila() body.

so, the code should be as:

<script>
.....

var oXML, ..., oRoot; // declare as global just in case

function ShowBusy(sSystem)
{
   ......
    window.divPleaseWait.style.display = "block";

    setTimeout("Voila()", 500)
  ........
}

function Voila()
{
 .... ( no "var" here) ....
}

.....

</script>

also, 500 msec is time that was required for IE some very complex data-bound pages.
my guess, 100 will be more than enought for you ;)

you may also try 0, but if it is really fires immediately (???), there's a chance .display="none" will get executed before .display="block" will take effect. or there is no chance. try it.