I want to refresh a form after posting it back to itself with php or ajax.

Question

My project is a bistro menu, using PHP and MySQL. It prints out a pretty table of menu items, as long as they are in stock.

I made addRemove.php to add and remove items from the menu. It creates a button for each item, on or off. Items that are 'on' are in stock and displayed on the menu. When the user clicks a button, it will post the button's name back to the form, then the 'toggle' function performs an UPDATE on that item. If the button is on, it gets toggled to off. If it is off, it gets toggled to on.

Example: I have 3 items on the menu, Spaghetti, Pizza, and Cheeseburger. I run out of Spaghetti, so I go to addRemove.php.

Spaghetti, Pizza, and Cheeseburger load as buttons Pizza:[ON] Spaghetti:[ON] Cheeseburger:[ON]

I click the Spaghetti button, and the database correctly updates to: Pizza:[ON] Spaghetti:[OFF] Cheeseburger:[ON]

but the form shows: Pizza:[ON] Spaghetti:[ON] Cheeseburger:[ON]

then I click the Cheeseburger button, and the database is again correctly updated: Pizza:[ON] Spaghetti:[OFF] Cheeseburger:[OFF]

and the form now shows Pizza:[ON] Spaghetti:[OFF] Cheeseburger:[ON]

The form shown is one step behind the actual data. I think the problem is that the form is posted and reloaded before the 'toggle' UPDATE query is executed.

I don't know AJAX, is there a simple way to force a refresh after the UPDATE?

here is addRemove.php:

<?php include ("data2.php");
$keys = array_keys($_POST);
if(isset($keys[0])){
    toggle($name[$keys[0]]);
}
?>
<form action="addRemove2.php" method="post">
<?php
global $name;
$c = count($name);
//$c = 2;
for($i=0;$i<$c;$i++){
$item = $name[$i];
if($inStock[$i]==1){
    $onOff = "ON";$color = "blue";
}
else{
    $onOff = "OFF";$color = "red";
}
echo "<label>$item</label>";
echo "<input type='submit' name='$i' value='$onOff' style='color:$color'>";
echo "<br />";
}
?>
</form>
<?php

function turnOn($item){ 
    $dbc = mysqli_connect('localhost','root','','bigItaly')
        or die('Error connecting to MySQL Server.');
    $queryString = "UPDATE items SET inStock='1' WHERE name='$item'";
    mysqli_query($dbc, $queryString);
    mysqli_close($dbc);
}

function turnOff($item){
    $dbc = mysqli_connect('localhost','root','','bigItaly')
        or die('Error connecting to MySQL Server.');
    $queryString = "UPDATE items SET inStock='1' WHERE name='$item'";
    mysqli_query($dbc, $queryString);
    mysqli_close($dbc);}

function getInStock($item){
    global $name, $inStock;
    $key = array_search($item, $name);
    return $inStock[$key];
}

function toggle($item){
    if (getInStock($item)=="1"){
        turnOff($item);
    }
    else{
        turnOn($item);
    }
}
?>
</html>

here is the database schema.

INSERT INTO `items` (`id`, `name`, `unitPrice`, `inStock`, `category`) VALUES
(1, 'Fettucine Alfredo', 2, 1, 'Pastas'),
(2, 'Hawaiian', 3, 1, 'Pizzas'),
(3, 'Spaghetti', 3, 1, 'Pastas'),
(4, 'Supreme', 5, 1, 'Pizzas'),
(5, 'Deluxe Lasagna', 2, 1, 'Pastas'),
(6, 'Barbecue Chicken', 6, 1, 'Pizzas'),
(7, 'Guacomole Bacon', 3, 1, 'Burgers'),
(8, 'Swiss Mushroom', 2, 1, 'Burgers'),
(9, 'Breakfast Burger', 2, 1, 'Burgers');

Answer 1

OK I figured out a solution, but its kind of ugly. I added this code:

<?php include ("data.php");
$keys = array_keys($_POST);
if(isset($keys[0])){
    toggle($name[$keys[0]]);
/* This refreshes the page after a 1/5 sec delay*/
    $urlRefresh = "addRemove.php";    
    header("Refresh: 0.2; URL=\"" . $urlRefresh . "\"");

}
?>

Answer 2

I might be simply missing the true problem, but if all you need is to have the page wait for the result and then refresh, I think you could simply add a refresh after you receive your query back. Because PHP, unlike Javascript, is synchronous, execution will pause while the database is queried. Therefore, just add:

header("Location: http://www.yoursite.com/addRemove.php");

At the very end of your "toggle()" function:

function toggle($item){
if (getInStock($item)=="1"){
    turnOff($item);
}
else{
    turnOn($item);
}
}

But that is not very user friendly (they click on the form, and see the page refresh twice). Instead, why not just have the UPDATE logic in a separate file. The form submits there, the file queries the database, and once the query is complete, redirects to the original form page. No double refresh that way.