I am trying to use ajax to change the button from active to deactive whenever user click on it along with making a change to the database and vice versa. But the code does not seem to work, Whenever I click the button, the error appeared:'something didnt work right.'.
$query = "SELECT * FROM product"; //query for getting the product from database.
$result = $mysqli->query($query);
if (!$result) die ("Database access failed: " . mysql_error()); //error message.
$rows = mysqli_num_rows($result); //getting number of row.
if ($rows > 0) //Checking whether product exist in the database to shown.
{
for ($i=0; $i < $rows; $i++) //loop through all the row.
{
$row = mysqli_fetch_row($result);
echo '<div id="active">';
if ($row[8] == 1) //product is actived display Deactive button.
{
echo '<form onclick="changeActive()" method="post" id="activeButton">';
echo '<input type="hidden" name="deactive" value="yes"/>';
echo '<input type="hidden" name="id" value="'.$row[0].'" />';
echo '<input type="hidden" name="image" value="$row[5]" />';
echo '<input type="submit" name="deactive" value="DEACTIVE PRODUCT" />';
echo '</form>';
} // end if statement.
else //product is deactived display Active button.
{
echo '<form onclick="changeActive()" method="post" id="activeButton">';
echo '<input type="hidden" name="active" value="yes"/>';
echo '<input type="hidden" name="id" value="'.$row[0].'" />';
echo '<input type="hidden" name="image" value="$row[5]" />';
echo '<input type="submit" name="active" value="ACTIVE PRODUCT" />';
echo '</form>';
} //end else statement
echo '</div>';
}
}
And this is my ajax code.
request = function(link, target, result)
{
var changeListener;
var xhr = new XMLHttpRequest();
changeListener = function()
{
if(xhr.readyState === 4)
{
if(xhr.status == 200)
{
target.innerHTML = xhr.responseText;
}
else
{
target.innerHTML = "<p>Something didn't work right.</p>";
}
}
else
{
target.innerHTML = "<p>Hold Up...</p>";
}
};
xhr.open("GET", link, true);
xhr.onreadystatechange = changeListener;
xhr.send(result);
};
changeActive = function()
{
var target;
target = document.getElementById('active');
request("active_deactive.php", target);
};
And php file:
<?php
include_once 'connect.php'; //connect to the database
if (isset($_POST['deactive']) && isset($_POST['id'])) //Check whether deactive button is pushed.
{
$id = $_POST['id'];
$query = "UPDATE Product SET Active = 0 WHERE ID = '$id'";
$deactive = $mysqli->query($query);
echo '<form onclick="changeActive()" method="post" id="activeButton")">';
echo '<input type="hidden" name="deactive" value="yes"/>';
echo '<input type="hidden" name="id" value="'.$row[0].'" />';
echo '<input type="hidden" name="image" value="$row[5]" />';
echo '<input type="submit" name="deactive" value="DEACTIVE PRODUCT" />';
echo '</form>';
}
if (isset($_POST['active']) && isset($_POST['id'])) //Active button is pushed.
{
$id = $_POST['id']; //getting the id.
$query = "UPDATE Product SET Active = 1 WHERE ID = '$id'";
//back for delete the picture file.
$active = $mysqli->query($query);
echo '<form onclick="changeActive()" method="post" id="activeButton")">';
echo '<input type="hidden" name="active" value="yes"/>';
echo '<input type="hidden" name="id" value="'.$row[0].'" />';
echo '<input type="hidden" name="image" value="$row[5]" />';
echo '<input type="submit" name="active" value="ACTIVE PRODUCT" />';
echo '</form>';
}
?>
