SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist pompopom's Avatar
    Join Date
    Feb 2004
    Location
    Huldenberg (Belgium)
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with xmlhttp.readystate and xmlhttp.status

    Long time no post :-)
    I want to apologize in advance for the long post.
    On a webpage I have a 'button-styled' <a></a>
    excerpt...
    PHP Code:
    <li>
          <
    a href="" onClick="InsertRapport('.$klas.');">
                <
    img src="/pics/lco_add_rapport.png" />'.$_LANG['IMG']['ADD_RAPPORT'].'
          
    </a>
    </
    li
    As you can see, when the 'button' is clicked, a javascript is called and passes a php variable along. => works fine
    The function that is called:
    Code:
    function loadXML_post1(postvars,url,cfunc){
    	if (window.XMLHttpRequest){
    	// code for IE7+, Firefox, Chrome, Opera, Safari
    		xmlhttp1=new XMLHttpRequest();
    	}
    	else{
    	// code for IE6, IE5
    		xmlhttp1=new ActiveXObject("Microsoft.XMLHTTP");
    	}
    
    	xmlhttp1.onreadystatechange=cfunc;
    	xmlhttp1.open("POST",url,true);
    	xmlhttp1.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    	xmlhttp1.send(postvars);
    }
    function InsertRapport(klas){
    	postvars="klas="+klas;
    	loadXML_post1(postvars,"/includes/ajax/insertrapport.php",function(){
            //alert('readystate: '+xmlhttp1.readyState+' status:'+xmlhttp1.status);
    		if(xmlhttp1.readyState==4 && xmlhttp1.status==200){
    			SetSelector(klas,0);
    		}
    	});
    }
    The php script 'insertrapport.php' updates a MySQL database => which is working fine
    However it has nothing to return to the browser, instead I want another function (SetSelector()) to be called if script finishes and succeeds.
    Code:
    function SetSelector(klas,rapport){
    	if(klas == 0 && rapport == 0){
    		var rapport = document.getElementById("selrapport").value;
    		var klas = document.getElementById("selklas").value;
    	}
    	postvars="rapport="+rapport+"&klas="+klas;
    	loadXML_post1(postvars,"/includes/ajax/setselector.php",function(){
    		if(xmlhttp1.readyState==4 && xmlhttp1.status==200){
    			document.getElementById("selector").innerHTML=xmlhttp1.responseText;
    			GetRapport(klas,rapport);
    		}		
    	});
    }
    function GetRapport(klas,rapport){
    	var loader = "<img src=\"/pics/lco_clock_small.gif\" />";
    	postvars="rapport="+rapport+"&klas="+klas;
    	document.getElementById("rapport").innerHTML=loader;
    	loadXML_post1(postvars,"/includes/ajax/getrapport.php",function(){
    		if(xmlhttp1.readyState==4 && xmlhttp1.status==200){
    			setTimeout(function(){document.getElementById("rapport").innerHTML=xmlhttp1.responseText;},750);
    		}
    	});
    }
    The first "if" in the SetSelector() function is used when the function is called directly with another element on the page (an onChange from a dropdown) => which works. So the call in SetSelector() for GetRapport() is indeed executed and gives the exact response into
    HTML Code:
    <div id="rapport"></div>
    However when InsertRapport() is fired I get a xmlhttp1.readystate == 4 and a xmlhttp.status == 0 (at the Alert() level)

    In other words: Why can I nest a Ajax query in one case and why not in the other case? What am I doing wrong?

    - I tried to make the InsertRapport function echo something back to a foo div (which I added in the html) in the browser by adding the line: document.getElementById("foo").innerHTML=xmlhttp1.responseText; right before I call SetSelector() (This to make it really look the same as SetSelector() ) => no luck
    - I read about the security issue about cross-site scripting and implemented an url rewrite, but as everything is on localhost it was destined to be of no help :-)
    - I tried creating a separate xmlhttp object for each function => no success
    - ...

    The only thing that pops in mind while I'm writing the Thread is the fact that the InsertRapport() function is not triggered from within a <form> (it's just a button styled link) whereas the SetSelector(), if fired from the webpage, not from within InsertRapport(), is actually a <form><select onChange=...><option>....</option></select></form>
    Could this be the cause?
    The Path of excess leeds to the tower of wisdom (W. Blake)

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,872
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Are you returning something from insertrapport.php? A single space should be enough to give a status of 200 so as to let the calling script know that it completed successfully.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Evangelist pompopom's Avatar
    Join Date
    Feb 2004
    Location
    Huldenberg (Belgium)
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pompopom View Post
    - I tried to make the InsertRapport function echo something back to a foo div (which I added in the html) in the browser by adding the line: document.getElementById("foo").innerHTML=xmlhttp1.responseText; right before I call SetSelector() (This to make it really look the same as SetSelector() ) => no luck
    Quote Originally Posted by felgall View Post
    Are you returning something from insertrapport.php? A single space should be enough to give a status of 200 so as to let the calling script know that it completed successfully.
    Thx for your time.

    Yes I did that, but to no avail...
    The Path of excess leeds to the tower of wisdom (W. Blake)

  4. #4
    SitePoint Evangelist pompopom's Avatar
    Join Date
    Feb 2004
    Location
    Huldenberg (Belgium)
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pompopom View Post
    The only thing that pops in mind while I'm writing the Thread is the fact that the InsertRapport() function is not triggered from within a <form> (it's just a button styled link) whereas the SetSelector(), if fired from the webpage, not from within InsertRapport(), is actually a <form><select onChange=...><option>....</option></select></form>
    Could this be the cause?
    Like I mentioned in the end of my starting post, the only difference was that the 'button' styled link was not within a <form></form>.

    So I redid some coding:
    Added <form></form>
    Changed the button styled <a onClick=...></a> with a <input type="button" onClick=... />

    And it works! Never thought that would do the trick... Can anyone shine a light on this behaviour?

    EDIT: Even without the <form></form> tags it works, as long as the input is a button not an <a>
    Last edited by pompopom; Nov 8, 2012 at 03:51. Reason: Some more info
    The Path of excess leeds to the tower of wisdom (W. Blake)


Bookmarks

Posting Permissions

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