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 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2007
    Location
    Colorado, USA
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts

    AJAX content loads, then page refreshes and content is gone

    If you look at: http://www.bcsfanpoll.com/newvoteframe.php and just click "submit", you'll get an alert, and if you wait you'll see where the "need username" and "need password" comes up, but as soon as you hit the alert, that content goes away. If I didn't have the alert there, you wouldn't even see the content at all. It's like it just reloads the page.

    I'm new to AJAX and prettymuch copied the tutorial stuff from w3schools ( http://www.w3schools.com/php/php_ajax_xml.asp ). Here's what I've got:

    The newvoteframe.php:
    Code:
    <html>
    <head>
    <script src="vote.js"></script> 
    </head>
    <body>
    
    <div id="poll">
    <p>Not registered yet? Signup in the <a href="phpBB2/">forums</a>.</p>
    <form name="entry">
    <table>
    <tr>
    <td><label>Username:</label></td>
    <td><input type="text" name="username" size="40" value=""></td>
    </tr>
    <tr>
    <td><label>Password:</label></td>
    <td><input type="password" name="password" size="40" value=""></td>
    </tr>
    <tr class="row-a"><td colspan="2"><input type="submit" value="Submit" onclick="getVote(document.entry.username.value, document.entry.password.value);"></td></tr>
    </table></form>
    </div>
    <span id="login"></span>
    </body>
    </html>
    The vote.js:
    Code:
    var xmlHttp
    
    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;
    }
    
    function getVote(username, password)
    {
    xmlHttp=GetXmlHttpObject()
    if (xmlHttp==null)
     {
     alert ("Browser does not support HTTP Request")
     return
     } 
    var url="loginvote.php"
    url=url+"?username="+username
    url=url+"&password="+password
    url=url+"&sid="+Math.random()
    xmlHttp.onreadystatechange=stateChanged 
    xmlHttp.open("POST",url,true)
    xmlHttp.send(null)
    alert("got here");
    } 
    
    function stateChanged() 
    { 
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
     { 
     document.getElementById("login").innerHTML=xmlHttp.responseText 
     } 
    }
    and the loginvote.php:
    Code:
    <?php
      $username = $_REQUEST['username'];
      $password = $_REQUEST['password'];
    
      $checkok = true;
      if ($username == ""){
        print "<p>You must enter your username.</p>";
        $checkok = false;
      }
      if ($password == ""){
        print "<p>You must enter your password.</p>";
        $checkok = false;
      }
    
      if ($checkok){
        //do stuff (edited this out)
    	}
    ?>
    This AJAX stuff is sweet, once I figure out how to get it to stick around.

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    The page reloads because the submit button is completing the submit after the request loads and the alert is clicked away.

    If you change the type='submit' to type='button' or add return false, ie...
    Code:
    <input type="submit" value="Submit" onclick="getVote(document.entry.username.value, document.entry.password.value);return false;">
    the page will not reload.

  • #3
    Senior Coder
    Join Date
    Mar 2003
    Location
    Atlanta
    Posts
    1,037
    Thanks
    14
    Thanked 30 Times in 28 Posts
    Code:
    xmlHttp.onreadystatechange=stateChanged 
    xmlHttp.open("POST",url,true)
    xmlHttp.send(null)
    Check the following quote
    Quote Originally Posted by A1ien51 View Post
    Are you reusing the Object?

    The correct order with IE is

    open()
    onreadystatechange
    send()

    If you have onreadystatechange before the open, IE will not work.

    Eric
    http://www.codingforums.com/newreply...reply&p=586561
    Most of my questions/posts are fairly straightforward and simple. I post long verbose messages in an attempt to be thorough.

  • #4
    New Coder
    Join Date
    Jul 2007
    Location
    Colorado, USA
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you rwedge.

    I don't understand your post StupidRalph.

  • #5
    Senior Coder
    Join Date
    Mar 2003
    Location
    Atlanta
    Posts
    1,037
    Thanks
    14
    Thanked 30 Times in 28 Posts
    W3Schools goofed , the code they have is wrong. If you've followed that link I gave you'd see what I'm talking about.

    In your code, you have have
    Code:
    xmlHttp.onreadystatechange=stateChanged 
    xmlHttp.open("POST",url,true)
    xmlHttp.send(null)
    but as A1ein51 states thats incorrect for IE and should be in this order
    Code:
    open()
    onreadystatechange
    send()
    Most of my questions/posts are fairly straightforward and simple. I post long verbose messages in an attempt to be thorough.

  • #6
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    W3Schools goofed
    from msdn2
    Code:
    function reportStatus()
    {
        if (oReq.readyState == 4)
            alert('Transfer complete.');
    }
    
    var oReq = new XMLHttpRequest();
    oReq.onreadystatechange = reportStatus;
    oReq.open("GET", "http://localhost/test.xml", true);
    oReq.send();


  •  

    Posting Permissions

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