PHP,AJAX: Preventing the URL from changing

macguide · February 23, 2009

Hi

I have 2 functions in my javascript code that are very similar yet they behave differently. One is able to send data without changing the URL (ajaxFunction), and the other (addItem) changes the URL. Can anyone explain why?

I don't want the URL to change since hitting refresh on the browser ends up sending the data to PHP again.

Here is a site running the code:

http://macguide.comyr.com/combo.php

Thanks!

MG

Here is the code

<html>
<head>
<title>Todo</title>
<style type="text/css">
body{font-family:"Lucida Grande",Arial, Helvetica, sans-serif; font-size:13px; color:#222222;}
li.done {color: #999;}
ul li {list-style-type: none;}
div.ajaxDiv ul li {
padding-top: 3px;
vertical-align: middle;
padding-bottom: 1px;
}

</style>
</head>
<body>
<script language="javascript" type="text/javascript">
<!--




var xmlHttp;

function addItem(Add){
        xmlHttp=GetXmlHttpObject();
        if (xmlHttp==null)
         {
         alert ("Browser does not support HTTP Request");
         return;
         }
        var url="combo.php";
        url=url+"?add="+Add;
        xmlHttp.onreadystatechange=stateChanged;
        xmlHttp.open("GET",url,true);
        xmlHttp.send(null);
}


function ajaxFunction(Checker,Bool){ 
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 }
var url="combo.php";
url=url+"?completed="+Checker;
url=url+"&bool="+Bool;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}



function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("ajaxDiv").innerHTML=xmlHttp.responseText;
} 
}

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;
}





//-->
</script>

<div id="ajaxDiv">
<?php

if (stristr($_SERVER['HTTP_USER_AGENT'],'iPhone')) {
echo "iphone!\n";
}

$dbhost = "localhost";
$dbuser = "user";
$dbpass = "password";
$dbname = "todolist";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
        //Select Database
mysql_select_db($dbname) or die(mysql_error());
        // Retrieve data from Query String
$done = $_GET['completed'];
$bool = $_GET['bool'];
$add = $_GET['add'];
        // Escape User Input to help prevent SQL Injection
$done = mysql_real_escape_string($done);
$bool = mysql_real_escape_string($bool);
$add = mysql_real_escape_string($add);
        //build query

//echo "$add\n";


if($done){
if($bool == 1){$yesno = 0;} else {$yesno = 1;}
$query = "UPDATE todolist SET completed = $yesno WHERE id_task_pk = $done";
$qry_result = mysql_query($query) or die(mysql_error());
}

if($add){
        $query = "INSERT INTO todolist (task_description,completed) VALUES('$add','0')";
        $qry_result = mysql_query($query) or die(mysql_error());
}



        //Execute query
$query = "SELECT * FROM todolist ORDER by completed ASC";
$qry_result = mysql_query($query) or die(mysql_error());

        //Build Result String
echo "<ul>\n";

echo "<li><form name='formadd'><input name='add' id='add' type='text' size='40'> <input type='button' name='button' value='Add' onclick='addItem(form.add.value);'></form></li>\n";


        // Insert a new row in the table for each person returned
while($row = mysql_fetch_array($qry_result)){
        echo "<li";
if ($row[completed] == 1){echo " class='done'";}
echo ">";
echo "<form name='myForm".$row[id_task_pk]."'><input type='checkbox' name='dope".$row[id_task_pk]."' value='1' onclick='ajaxFunction(".$row[id_task_pk].",".$row[completed].")'";
if ($row[completed] == 1){echo " checked";}
echo "><input name='done".$row[id_task_pk]."' id='done' type='hidden' value='";
echo $row[id_task_pk];
echo "' />";
//        echo $row[id_task_pk];
        echo $row[task_description];
//        echo $row[completed];
//        echo $row[task_insert_date];
        echo "</form></li>\n";
}
echo "</ul>";
// echo "Query: " . $query . "<br />";
?>


</div>
</body>
</html>

Sign In

PHP,AJAX: Preventing the URL from changing

Recommended Posts

macguide

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information