AJAX content loads, then page refreshes and content is gone

MECU

07-28-2007, 09:55 PM

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:
<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:
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:
<?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.

rwedge

07-28-2007, 10:18 PM

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...
<input type="submit" value="Submit" onclick="getVote(document.entry.username.value, document.entry.password.value);return false;">the page will not reload.

StupidRalph

07-28-2007, 10:34 PM

xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("POST",url,true)
xmlHttp.send(null)

Check the following quote
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.php?do=newreply&p=586561

MECU

07-29-2007, 12:29 AM

Thank you rwedge.

I don't understand your post StupidRalph.

StupidRalph

07-29-2007, 08:51 AM

W3Schools goofed :o, 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
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
open()
onreadystatechange
send()

rwedge

07-29-2007, 09:41 AM

W3Schools goofed
from msdn2 (http://msdn2.microsoft.com/en-us/library/ms534308.aspx)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();