[SOLVED] script works but still get error message

kcp4911 · September 16, 2009

Hi. Very new to the AJAX scene. Have dabbled and have managed to make a couple of scripts work.

The following script does work - and the earlier version (before adding added deletion functionally as described below) worked without errors.

I am trying to make a twitter/status type "widget" that will update without reloading the page. Now, that part works without any problems.

However, I also wanted to add the ability for a poster to delete their post. This works too - but I also get the error message (alert("Error during AJAX call. Please try again")). Easy answer would be to remove the error message from the script - but I feel that might bite me on the bum later on.

Here is the main "widget" page...

<?php include 'security_check.php';?>
<html>
<head>
<script type="text/javascript">
var time_variable;

function getXMLObject()  //XML OBJECT
{
   var xmlHttp = false;
   try {
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
   }
   catch (e) {
     try {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
     }
     catch (e2) {
       xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
     }
   }
   if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
     xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
   }
   return xmlHttp;  // Mandatory Statement returning the ajax object created
}

var xmlhttp = new getXMLObject();	//xmlhttp holds the ajax object

function ajaxFunction() {
  var getdate = new Date();  //Used to prevent caching during ajax call
  if(xmlhttp) { 
  	var detail = document.getElementById("detail");
    xmlhttp.open("POST","update.php",true); //calling update.php using POST method
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("detail=" + detail.value); //Posting detail to PHP File
  }
}

function ajaxFunction2() {
  var getdate = new Date();  //Used to prevent caching during ajax call
  if(xmlhttp) { 
  	var delete_this2 = document.getElementById("delete_this2");
    xmlhttp.open("POST","update2.php",true); //calling update2.php using POST method
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("delete_this=" + delete_this2.value); //Posting delete_this to PHP File
  }
}

function ajaxFunction3() {
  var getdate = new Date();  //Used to prevent caching during ajax call
  if(xmlhttp) { 
  	var delete_this3 = document.getElementById("delete_this3");
    xmlhttp.open("POST","update2.php",true); //calling update2.php using POST method
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("delete_this=" + delete_this3.value); //Posting delete_this to PHP File
  }
}
function ajaxFunction4() {
  var getdate = new Date();  //Used to prevent caching during ajax call
  if(xmlhttp) { 
  	var delete_this4 = document.getElementById("delete_this4");
    xmlhttp.open("POST","update2.php",true); //calling update2.php using POST method
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("delete_this=" + delete_this4.value); //Posting delete_this to PHP File
  }
}
function ajaxFunction5() {
  var getdate = new Date();  //Used to prevent caching during ajax call
  if(xmlhttp) { 
  	var delete_this5 = document.getElementById("delete_this5");
    xmlhttp.open("POST","update2.php",true); //calling update2.php using POST method
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("delete_this=" + delete_this5.value); //Posting delete_this to PHP File
  }
} 
function handleServerResponse() {
   if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       document.getElementById("message").innerHTML=xmlhttp.responseText; //Update the HTML Form element 
     }
     else {
        alert("Error during AJAX call. Please try again");
     }
   }
}
</script>
<script type="text/javascript" src="characterCounter.js"></script>
</head>
<body>
<div id="message" name="message">
<?php
include 'connect.php';
$i = 2;
$query = "
SELECT 
*
FROM 
updates
order by id desc limit 4
";

$result = mysql_query($query) or die("<b>A fatal MySQL error occured</b>.\n<br />Query: " . $query . "<br />\nError: (" . mysql_errno() . ") " . mysql_error());

if (mysql_num_rows($result)) 
while($row = mysql_fetch_assoc($result)) 
{
extract($row);
$detail = stripslashes("$detail");
$uid = stripslashes("$uid");
if($_SESSION['uid']==$uid)//if the logged in user is the author of the comment, provide the option to delete
{
?>
<p><form name="<?php echo $i; ?>"><input type="hidden" name="delete_this<?php echo $i; ?>" id="delete_this<?php echo $i; ?>" value="<?php echo $id; ?>"><?php echo $detail; ?> - <input type="image" src="images/delete.jpg" value="Submit" align="absmiddle" onclick="ajaxFunction<?php echo $i; ?>();" /></form></p>
<?php
}
else//if the logged in user is not the author of the comment, don't provide the option to delete
{
?>
<p><?php echo $detail; ?></p>
<?php
}
$i++;
}
?>
</div> 
<form name="myForm">
<p><textarea rows="2" cols="37" name="detail" id="detail" onKeyUp="toCount('detail','sBann','{CHAR} characters left',200);">Add your own "Personal Par". Your name and leaving year will be added automatically.</textarea></p>
<span id="sBann" class="minitext"> 200 characters left.    </span> <input type="button" value="Submit" onclick="ajaxFunction();" /> 
</form>
</body>
</html>

Here is the update2.php file which is used for deleting the post and returning the ammended set of posts

<?php
require 'security_check.php';
require 'connect.php';

$id = mysql_real_escape_string($_POST['delete_this']);
$fname = $_SESSION['first_name'];
$lname = $_SESSION['surname'];
$year = $_SESSION['year'];
$i = 2;

$query = "
delete from
updates
where
id = '$id'
";
$result = mysql_query($query) or die("<b>A fatal MySQL error occured</b>.\n<br />Query: " . $query . "<br />\nError: (" . mysql_errno() . ") " . mysql_error());


$query = "
SELECT 
*
FROM 
updates
order by id desc limit 4
";

$result = mysql_query($query) or die("<b>A fatal MySQL error occured</b>.\n<br />Query: " . $query . "<br />\nError: (" . mysql_errno() . ") " . mysql_error());

if (mysql_num_rows($result)) 
while($row = mysql_fetch_assoc($result)) 
{
extract($row);
$detail = stripslashes("$detail");
$uid = stripslashes("$uid");
if($_SESSION['uid']==$uid)
{
?>
<p>
<form>
<input type="hidden" name="delete_this" id="delete_this<?php echo $i; ?>" value="<?php echo $id; ?>">
<?php print "<b>$fname $lname ($year)</b> $detail"; ?> - <input type="image" src="images/delete.jpg" value="Submit" align="absmiddle" onclick="ajaxFunction<?php echo $i; ?>();" />
</form>
</p>
<?php
}
else
{
print "
<p><b>$fname $lname ($year)</b> $detail</p>
";
}
$i++;
}
?>

I am going to hazard a guess that it is to do with this bit of code

function handleServerResponse() {
   if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       document.getElementById("message").innerHTML=xmlhttp.responseText; //Update the HTML Form element
     }
     else {
        alert("Error during AJAX call. Please try again");
     }
   }
}

but I have no idea why.

Don't know if this is too much or not enough info. Please advise.

Anyone? (Thanks for getting this far)

regards

simon

Kieran Menor · September 16, 2009

I don't think xmlhttp gets passed to handleServerResponse() automatically.

Try having:

function handleServerResponse(xmlhttp) {
   if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       document.getElementById("message").innerHTML=xmlhttp.responseText; //Update the HTML Form element
     }
     else {
        alert("Error during AJAX call. Please try again");
     }
   }
}

Note that it takes an argument now.

And then doing something like this instead:

xmlhttp.onreadystatechange  = function() { 
   handleServerResponse(xmlhttp);
}

Adam · September 16, 2009

I don't think xmlhttp gets passed to handleServerResponse() automatically.

He's declared the "xmlhttp" variable globally, and the fact that the alert is only called once the readyState property == 4, means that can't be the problem. Obviously the problem is the HTTP status is not 200 / OK, possibily 404 / not found? Have you tried running the script without the AJAX layer?

kcp4911 · September 16, 2009

thanks for looking at this Boom and Adam.

Have you tried running the script without the AJAX layer?

Ummm, the script actually works with the AJAX layer i.e. the row is actually deleted from the database and the updated database is reflected accurately in the refreshed "widget".

The only problem is the alert appears. I can always remove the alert from the script - but, that doesn't seem like the best answer.

Adam · September 16, 2009

Try alerting the status to actually see what the 'else' is catching:

     else {
        //alert("Error during AJAX call. Please try again");
        alert('status is: ' + xmlhttp.status);
     }

kcp4911 · September 16, 2009

Actually, I need to qualify the statement that the script "works".

It does delete the row from the database as it should.

However, the url changes on the refresh to something weird like

http://localhost/oaa/temp/Tim/pg1.php?delete_this3=48&x=34&y=6

when it should just stay the same like this

http://localhost/oaa/temp/Tim/pg1.php

kcp4911 · September 16, 2009

Adam, status is:0

kcp4911 · September 16, 2009

Appears to have something to do with the fact the button used is an image as opposed to a button according to...

http://ajaxian.com/archives/xmlhttprequest-and-status-code-0

Shall dig deeper and respond accordingly.

kcp4911 · September 16, 2009

OK - I can confirm that changing the submit element to a button as opposed to an image fixes this problem.

Would like to use a more attractive form element than a standard button tho.

Anyway, the problem is sort of solved.

kcp4911 · September 16, 2009

Thanks Mr Adam and Boom

Adam · September 16, 2009

Oh if that's the cause of the status 0, just turn your 'else' into an 'elseif':

     elseif (xmlhttp.status != 0) {
        alert("Error during AJAX call. Please try again");
     }

Sign In

[SOLVED] script works but still get error message

Recommended Posts

kcp4911

Link to comment

Share on other sites

Kieran Menor

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

kcp4911

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

kcp4911

Link to comment

Share on other sites

kcp4911

Link to comment

Share on other sites

kcp4911

Link to comment

Share on other sites

kcp4911

Link to comment

Share on other sites

kcp4911

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information