I'm developing a simple site for Year 12 IT, and what it needs to do is sell coffees (or at least give the appearance, we aren't actually selling anything). When orders are submitted, they get converted to PHP variables and then laid down as a brief order summary; a summary of that order gets posted to a text file. All good so far.
The problems come in when I try to clear the text file/"confirm the orders" (post the file contents to a log and then clear the file itself). Using pure PHP (writing both as submit buttons, checking for isset(), and then using file_get_contents()) works perfectly, but forces a page request that also resubmits the most recent order. Using mixed AJAX/PHP lets me create nice little notifications for cleared/confirmed orders and is supposed to refresh specific page areas and avoid resubmits, but for some reason full refreshes and resubmits still happen. Why?
PHP:
<?php
$txtManip = $_REQUEST['txtFunk'];
if($txtManip == "clear"){
file_put_contents('orders.txt', '');
}
if($txtManip == "confirm"){
$n = 1;
$custNum = $n++;
$confirmedOrders = "Customer " . $custNum . " " . "ordered " . file_get_contents('orders.txt') . "
";
file_put_contents('log.txt', $confirmedOrders, FILE_APPEND | LOCK_EX);
file_put_contents('orders.txt', '');
}
?>
Javascript:
clearButton.addEventListener('click', notifyClear);
confirmButton.addEventListener('click', notifyConfirm);
function orderCleared(){
orders.style.display = "block";
orderScrollText.innerHTML = "Order another coffee";
orderShifter.removeEventListener('click', orderDisp);
orderShifter.addEventListener('click', orderHide);
}
function notifyClear(){
ajaxTime.onreadystatechange = function(){
if (ajaxTime.readyState == 4 && ajaxTime.status == 200){
notification.style.display = "flex";
setTimeout(function(){
notifyBox.style.display = "none";
}, 4000);
notifyText.innerHTML = "Cleared!";
}
}
ajaxTime.open("POST", "notepadControl.php", true);
ajaxTime.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajaxTime.send("txtFunk=clear");
/*$.ajax({
url: "notepadControl.php",
data: clear,
type: "post",
success: function(output){
alert (output);
}
})*/
setTimeout(function(){
orderCleared();
window.location = "http://heptane.smgx.co#subbedOrders";
location.reload();
}, 5000);
}
function notifyConfirm(){
ajaxTime.onreadystatechange = function(){
if (ajaxTime.readyState == 4 && ajaxTime.status == 200){
notification.style.display = "flex";
setTimeout(function(){
notifyBox.style.display = "none";
}, 4000);
notifyText.innerHTML = "Confirmed Orders";
}
}
ajaxTime.open("POST", "notepadControl.php", true);
ajaxTime.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajaxTime.send("txtFunk=confirm");
setTimeout(function(){
orderDisp();
window.location = "http://heptane.smgx.co#subbedOrders";
}, 5000);
}
HTML:
<div id="showOrders">
<p class="whiteText" id="orderScroller">See Orders</p>
</div>
<div id="subbedOrders">
<iframe id="orderList" src="orders.txt" ></iframe>
<form method="post">
<input type="button" id="clearOrders" method="post" name="clear" value="Clear Orders" />
<input type="button" id="orderConfirm" method="post" name="confirm" value="Confirm Orders" />
</form>
<div id="notifyBox">
<p id="notifyText" class="whiteText"></p>
</div>
</div>
<script src="milk.js"></script>
In other words, I want something that will empty my text file without resubmitting any data or refreshing the whole page :). JQuery and your pet libray are all fine, so long as the final solution works. Obviously I'm using AJAX, since it's supposed to be the only way to do this. More secure things are preferred, so anything that keeps most of the work server-side will make me happy. Thanks in advance!