Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Why must I click submit twice?

    Hi all.

    This is my html code:

    Code:
    <body>
    <script type="text/javascript" src="writexml.js"></script>
    <script type="text/javascript" src="readxml.js"></script>
    
    <script type="text/javascript">
    
    function readxmldata(filename) {
    	if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
            }
          else
            {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("POST","http://localhost/census/test.php",true);
            
            poststring = "filename=" + filename;
    
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    	xmlhttp.setRequestHeader("Content-length", poststring.length);
    	xmlhttp.setRequestHeader("Connection", "close");
            xmlhttp.setRequestHeader("charset", "utf-8");
    	xmlhttp.send(poststring);
    	        
            xmlhttp.onreadystatechange=function()
                {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                  {
                  response = xmlhttp.responseText;
                  }
                }
    	
    	document.write(response);
    }
    
    </script>
    
    <input type="button" value="Submit" onclick="readxmldata('default.xml');"/>
    </body>
    and this is the test.php file that it calls:

    Code:
    <?php
    echo "This is the test page";
    ?>
    My question is simply: Why do I only get the response when I click the submit button twice? If I don't use a button but just try to call the "readxmldata" function using <body onload="readxmldata('default.xml');"> then I don't get any response at all.

    Thanks,

    Chris

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    This is because of the asynchronous nature of asynchronous requests ... hm I already told that someone a few hours ago ... I should make it my signature :-)

    Code:
            xmlhttp.onreadystatechange=function()
                {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                  {
                  response = xmlhttp.responseText;
                  }
                }
    	
    	document.write(response);
    What happens here?

    1. onreadystatechange is assigned a function, but this function is not called (yet).
    2. That's why "response" is not set. document.write will write an empty string
    3. In the meantime, the request will finish and populate "response" with the output of the script
    4. By pushing the button the second time, you will start another request (whose onreadystatechange function is not called immediately) and output the previous "response" with document.write

    Solution: You have to do everything you want to do after the onreadystatechange is fired within the onreadystatechange function:
    Code:
            xmlhttp.onreadystatechange=function()
                {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                  {
                  response = xmlhttp.responseText;
                  document.write(response);
                  }
                }
    Last edited by devnull69; 01-11-2011 at 12:26 PM.

  • Users who have thanked devnull69 for this post:

    brichcja (01-11-2011)

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Ta

    Thank you. That makes perfect sense.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •