Develop Reference

Php not receiving post from JavaScript

I have implemented the same setup elsewhere in my site and can't figure out why it's not working this time.
When a user clicks the accept button, it calls a JavaScript function acceptOrder(orderID) which passes the orderID onto a php page to update a record in the db.
orderID is assigned ok in the JavaScript but it doesn't reach the php. Var_dump on POST shows nothing, nor does $_POST('orderID'). I've even tried just sending an integer to the php in case there was a problem with the var but it made no difference.
Js
function acceptOrder(orderID) {
var orderID=orderID;
console.log("assigned: "+orderID);
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
// code for IE6, IE5
else
{
xmlhttp=new ActiveXObject("Microsoft. }
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
console.log (xmlhttp.responseText);
}
}
xmlhttp.open("POST","acceptorder.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-rule encoded");
xmlhttp.send(orderID);
console.log(orderID+" sent");
//location.reload();
//console.log("reload");
}
Php
<?php
require_once("config1412/class.shop.php");
session_start();
$shop = new SHOP();
echo var_dump($_POST);
//$orderID = $_POST['orderID'];
//echo "orderId var = ".$orderID."<br/>post ".$_POST['orderID'];
//$shop->acceptOrder($orderID);
?>
Needless to say I've searched about and don't see any solutions elsewhere.
Many thanks

As i can see, you didn't set variable name for orderID, change line of code:
xmlhttp.send(orderID);
to:
xmlhttp.send("orderID="+orderID);
If it's only SQL error of missing orderID, and all other passess okay, it's solution for you. As you said in comments "I just get a sql error because the variable orderID is empty".
You're missing only naming post send data, that's why it's empty.

Please replace this line
xmlhttp=new ActiveXObject("Microsoft. }
with following this line
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

You should write this in your js
function acceptOrder(orderID) {
var orderID=orderID;
console.log("assigned: "+orderID);
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
// code for IE6, IE5
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
console.log (xmlhttp.responseText);
}
}
xmlhttp.open("POST","acceptorder.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-rule encoded");
xmlhttp.send(orderID);
console.log(orderID+" sent");
//location.reload();
//console.log("reload");
}

I would recommend you to use jQuery for ajax calls. It's much easier to setup and straightforward. Especially, and specialy because it is very easy setup for a beginner. And for people who want to install ajax the easy way. I use it every single time I want to do ajax in my code. Here is a link:
http://api.jquery.com/jquery.ajax/
Just put the tag to include jQuery and then one javascript command to call the ajax.

Timer based Ajax call with 2 calls on one page

Is it possible to have multiple ajax calls on the same page, at the same time to different receiving div tags? I am struggling with finding answer to this.
I have 3 pages. A home page and 2 php pages: status and alert pages echoing the results.
Inside the home page I have 2 divs that get their data changed using ajax.
<div id="statusTable"> </div>
<div id="alertsTable"> </div>
Using setInterval I make 2 requests for new data for the divs at the same time. My problem is that both divs have the same data in them once the call is made - it's as if only one call was made for both.
setInterval
(
function()
{
getAlerts();
getStatus();
},
1000
);
I get this eg.
alerts table // getStatus() call
2 2
2 2
status table // getStatus()
2 2
2 2
instead of
alerts table //getAlerts()
1 1
1 1
status table //getStatus()
2 2
2 2
This is the code:
function loadXMLDoc(url,cfunc)
{
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=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function getAlerts()
{
loadXMLDoc("alerts.php?update=variable",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("alertsTable").innerHTML=xmlhttp.responseText;
}
});
}
function getStatus()
{
loadXMLDoc("status.php?update=variable",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("statusTable").innerHTML=xmlhttp.responseText;
}
});
}
I changed the timer setIntervals so the calls don't overlap the data received in the divs like below
setInterval
(
function()
{
getAlerts();
},
5000
);
setInterval
(
function()
{
getStatus();
},
3000
);
I am hoping there is a way to make a call at the same time and not have to worry about my divs having the same content.

First, AJAX uses HTTP protocol which is stateless. If you can't be sure which answer reached first unless you tag them yourself in the response body.
Maybe the 2 reaches first and set, as receiving only one packet results in readyState change and drops other.
Your xmlhttp variable is defined globally. So by that, the packet with 1 inside is overloaded by packet with 2 inside. Try using var xmlhttp while defining it in your getAlert and getStatus functions and provide it to your loadXMLDoc function as a parameter.
Second, make sure whether the results should be different or not. Maybe it is just a coincident that both values are the same.

You need to decalre the xmlhttp variable locally in loadXMLDoc()
function loadXMLDoc(url,cfunc)
{
var xmlhttp;
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=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
Without doing this, the xmlhttp value that is improperly declared in the function "leaks" into the global scope, meaning that you end up overwriting the values with whichever is called second (including the url value set on the object). You in essence introduce a race condition into your code due to asynchronous nature of the calls.

The race condition and the xmlhttp being global are the problems here.
What ever came last is overwriting the data written in the divs. Solve it by making xmlhttp variable
local as per suggestions and tagging the response body.
function loadXMLDoc(xmlhttp,url,cfunc)
{
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function getAlerts()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
loadXMLDoc(xmlhttp,"alerts.php?update=variable",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200 && xmlhttp.responseText.indexOf("unique key") != -1)
{
//change div which matches unique key
}
});
}
Credit: #Mike Brant and #Cunning
Before people like me want to continue and use more ajax calls check out
how browsers handle and process multiple ajax calls:
How many concurrent AJAX (XmlHttpRequest) requests are allowed in popular browsers?
http://sgdev-blog.blogspot.com/2014/01/maximum-concurrent-connection-to-same.html

Sending a javascript AJAX request triggers multiple page loads

I have searched but cannot find an answer to this issue. I am calling an asynchronous javascript file and the php page it calls makes a database entry twice.
window.onload = function(){
var xmlhttp;
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) {
alert(xmlhttp.responseText);
//document.write(xmlhttp.responseText);
return;
}
}
xmlhttp.open("POST","http://example.com/api/tracking/index.php?cid=" + get["clientId"] + "&refUrl=" + encodeURIComponent(siteURL) + "&auk=" + get["auth"],true);
xmlhttp.send();
}
The index php page does an insert and returns the new row id. The alert in the successful response corresponds to that id, but there is another entry made one millisecond before. I assume this is happening because the page is being accessed until it gets the ready state of 4. The question is how do I stop or bypass this?

AJAX request with if statement for filename called

I'm making a quiz using AJAX to refresh each question. Instead of having individual AJAX calls for every different question in the quiz, I was wondering if there might be an easy way to use the same AJAX call but add a digit to the end of the filename each time.
So here is the basic AJAX request:
function nextQuestion()
{
var xmlhttp;
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("wordbank").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","question2.php",true);
xmlhttp.send();
}
As you can see the GET request pulls a file called question2.php
xmlhttp.open("GET","question2.php",true);
This is just a stand-in file at the moment, what I really want to do is something like this:
xmlhttp.open("GET","question" i++ ".php",true);
OK, I phrased that badly, but I'm not sure if this is the best way to do this. Essentially I want to have my button bound to the nextQuestion() function, but I want to work out a way to generate the next filename based on the one you're currently on.
Is this possible?
Another idea would be to give the button on each page a different ID and have the nextQuestion() function take that ID and use it to generate the next file. E.G if you are on question 2, the button would have an ID of question2. The ajax would take the last digit (2) and add 1 to it, so the filename called would be question3.php - and that is how it would know to move to the next question.

Here you go you can now place an ID on any button and have it take you to the correct page.
Your JS
function nextQuestion(buttonID)
{
var xmlhttp;
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("wordbank").innerHTML=xmlhttp.responseText;
}
}
var splitID = buttonID.split('_');
var questionID = splitID.pop();
xmlhttp.open("GET","question" + questionID + ".php",true);
xmlhttp.send();
}
Your Button
<button id="question_2" onClick="nextQuestion(this.id)">Go To Question 2</button>
or
<button id="question_14" onClick="nextQuestion(this.id)">Go To Question 14</button>

so build a string with the current index you have
xmlhttp.open("GET","question" + i + ".php",true);

You can have a global var with the current quest and do something like this:
var current_quest=1;
function nextQuestion()
{
...
xmlhttp.open("GET","question"+current_quest+".php",true);
xmlhttp.send();
window.current_quest++;
...
}

AJAX function(this)

I am not familiar with ajax, I am in the process of learning, but as far as I know, it utilizes javascript to access the DOM, so my question is, is it possible to put an argument inside a function?
<script type="text/javascript">
function loadXMLDoc( * * this * * ) {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", ""
test.php ? access = "**+this**", false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
</script>
Shouldn't this work?
Thank you so much for your help.

this in JS changes according to the context you are running in. Depending on how you call it, it will change.
Read this article for more information : http://www.quirksmode.org/js/this.html
xmlhttp.open("GET",""test.php?access="**+this**",false);
This call wouldn't make much sense since this refers to an object, but what you're actually attempting to do is string concatenation (adding two strings together).
If you need to make variable calls, use a variable instead of the this keyword.
function loadXMLDoc(accessVar) {
....
xmlhttp.open("GET","test.php?access=" +accessVar ,false);
}
loadXMLDoc('accessIdentifier'); //passes the value 'accessIdentifier' to your method so it is passed along in the querystring.

You're close. It looks like you're using the example from w3schools. Be warned, that site is not always the most reliable source. See http://w3fools.com/ for more info.
Look over their code again, as it is taken from their page:
var xmlhttp;
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("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
As you can see, the "on success" code is located within the onreadystatechange event handler. Your example code has three problems: one with the way you're passing a variable, two with the way you use this, and three that your response handler won't work as expected.
var xmlhttp;
var var1 = 'testdata';
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)
handleAjaxResponse(responseText);
}
xmlhttp.open("GET","ajax_info.php?var1="+var1,true);
xmlhttp.send();
function handleAjaxResponse(resp) {
document.getElementById("myDiv").innerHTML=resp;
}
In terms of this, it refers to the current scope of execution, a different subject entirely. It isn't a variable you'd pass via AJAX.