I have 3 buttons on my page and depending on which one the user is clickingi want to run through ajax call a delete query in my database. When the user clicks on a button the javascript function seems to work but it doesn't run the query in php script.
The html page:
<?php session_start(); ?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<script>
function myFunction(name)
{
var r=confirm("Are you sure? This action cannot be undone!");
if (r==true)
{
alert(name); // check if is getting in if statement and confirm the parameter's value
var xmlhttp;
if (str.length==0)
{
document.getElementById("clearMessage").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("clearMessage").innerHTML= responseText;
}
}
xmlhttp.open("GET","clearDatabase.php?q="+name,true);
xmlhttp.send();
}
else
alert('pff');
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main">
<?php if (session_is_registered("username")){ ?>
<!--<a href="#">Εκκαθάριση παλαιών μηνυμάτων</a><br />
<a href="#">Εκκαθάριση παλαιών συνεδρίων</a><br />
<a href="#">Εκκαθάριση push notifications</a><br />-->
<input type="button" value="Εκκαθάριση παλαιών μηνυμάτων" onclick="myFunction('messages')" />
<input type="button" value="Εκκαθάριση παλαιών συνεδρίων" onclick="myFunction('conferences')" />
<input type="button" value="Εκκαθάριση push notifications" onclick="myFunction('notifications')" />
<div id="clearMessage"></div>
<?php } else echo "Login first."; ?>
</div>
<div id="footer"></div>
</div>
</body>
</html>
and the php script:
<?php
if (isset($_GET["q"]))
$q=$_GET["q"];
$host = "localhost";
$database = "dbname";
$user = "dbuser";
$pass = "dbpass";
$con = mysql_connect($host,$user,$pass) or die(mysql_error());
mysql_select_db($database,$con) or die(mysql_error());
if ($q=="messages")
$query = "DELETE FROM push_message WHERE time_sent IS NOT NULL";
else if ($q=="conferences")
$query = "DELETE FROM push_message WHERE time_sent IS NOT NULL";
else if ($q=="notifications") {
$query = "DELETE FROM push_friend WHERE time_sent IS NOT NULL";
}
$res = mysql_query($query,$con) or die(mysql_error());
if ($res)
echo "success";
else
echo "failed";
mysql_close($con);
?>
You have a few issues.... and this got the text from clearDatabase.php... I just had it output some generic text
<?php session_start(); ?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<script>
function myFunction(name)
{
var r=confirm("Are you sure? This action cannot be undone!");
if (r==true)
{
// Issue #1: str is not defined anywhere
var str = "sfs";
alert("name " + name); // check if is getting in if statement and confirm the parameter's value
var xmlhttp;
if (str.length==0)
{
document.getElementById("clearMessage").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// Issue #2: responseText was not defined... it needs to belong to something
document.getElementById("clearMessage").innerHTML= xmlhttp.responseText;
}
}
xmlhttp.open("GET","clearDatabase.php?q="+name,true);
xmlhttp.send();
}
else
alert('pff');
}
</script>
note: anyone who runs "clearDatabase.php?q="+name can delete whatever from your database. Also, make those changes but it still may not work if the code on "clearDatabase.php?q="+name doesn't work.
Also: it would have been a lot easier for us to troubleshoot this for you if you had provided the console errors.
How I solved this: I just copied and pasted this in a document myself and opened up the Chrome version of Firebug (control+shift+j) and there was red text to tell me str wasn't defined. So I defined it as var str="". Then I realized it was hitting if (str.length==0) so I give it a value. Then, I got a new error that the responseText wasn't defined. I googled how to use the response form a javascript ajax call (I only know jquery) and looked at the examples. I saw it needed to be from the request and added xmlhttp.responseText;. Then it worked.
Try;
xmlhttp.open("POST","clearDatabase.php?q="+name,true);
instead of;
xmlhttp.open("GET","clearDatabase.php?q="+name,true);
first open the xmlhttp request.
try this:
xmlhttp.open("GET","clearDatabase.php?q="+name,true);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("clearMessage").innerHTML= responseText;
}
}
xmlhttp.send(null);
why dont you use jquery -> ajax() ?
And your code will look like this:
function myFunction(name)
{
var r=confirm("Are you sure? This action cannot be undone!");
if (r==true)
{
alert(name); // check if is getting in if statement and confirm the parameter's value
$.ajax({
type: "GET",
url: "clearDatabase.php?q="+name,true,
success: function (res){
$("#clearMessage").html(res );
}
});
}
else{
alert('pff');
}
}