Ajax code with javascript

Question

I have null experience in web programming, yet I am testing a simple add on to work with my app. On the webpage I display a number of rows. Each row has an editable field that the user needs to input.

Once he inputs it, I want to launch PHP code to run an SQL statement. My initial try worked, yet the page of the php script was opened. I would like somehow the php to run in the background and the user stays on the same page.

Looking online I found that I need to have something like the following:

<script>
function DataChanged(mId,mQ){
 document.getElementById('demo').innerHTML = 'Change Id='+mId+'Q='+mQ ;
 $.ajax({
 url: 'submitChange.php?Id=5'
 });
 document.getElementById('demo').innerHTML = 'Arrived here?';
}
</script>

The text field is changed to:

Change Id=...

yet the script isn't running and text isn't becoming

"Arrived here?"

I ran the submitChange.php?Id=5 separately and it worked, so I am guessing my error is from the script above. Any idea what could be wrong?

• Damien Pirsy: You're using a jQuery method, have you loaded jQuery before ? Also, check on jQuery docs for a more complete code
• Prior99: Please also post your PHP-Code.
• Damien Pirsy: @Prior what for? He says the php part works when called directly, that means (and the code shows it) the ajax part has issues
• dumbass: This question is similar to: How do I return the response from an asynchronous call?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.

Answer 1

jQuerys AJAX is Asynchroneous. This means that at the time you are doing the

document.getElementById('demo').innerHTML = 'Arrived here?';

The AJAX-Request was not yet done. Please consult the API Documentation from jQuery.

You will have to do it like this: (The first parameter of the anonymous function is the result got from the call)

<script>
function DataChanged(mId,mQ){
 document.getElementById('demo').innerHTML = 'Change Id='+mId+'Q='+mQ ;
 $.ajax({
 url: 'submitChange.php?Id=5'
 }).done(function(result) {
 document.getElementById('demo').innerHTML = 'Arrived here?' + result;
 });
}
</script>

As you are already using jQuery, why not use their selectors instead of document.getElementById?

<script>
function DataChanged(mId,mQ){
 $('#demo').html('Change Id='+mId+'Q='+mQ);
 $.ajax({
 url: 'submitChange.php?Id=5'
 }).done(function(result) {
 $('#demo').html('Arrived here?' + result);
 });
}
</script>

Answer 2

You are trying to use jQuery $.ajax to achieve this, what you are looking for is an XMLHTTPRequest

Answer 3

I think that you must specify the type of ajax query:

document.getElementById('demo').innerHTML = 'Change Id='+mId+'Q='+mQ ;
$.ajax({
 type: "POST",
 url: 'submitChange.php',
 data: {
 Id: 5,
 },
 success: function (result) {
 document.getElementById('demo').innerHTML = 'Arrived here?';
 }
});

or

document.getElementById('demo').innerHTML = 'Change Id='+mId+'Q='+mQ ;
$.ajax({
 type: "GET",
 url: 'submitChange.php?Id=5',
 success: function (result) {
 document.getElementById('demo').innerHTML = 'Arrived here?';
 }
});

Answer 4

First of all you have to include the jquery library into you document Example:

There is an example for you task.

function DataChanged(mId,mQ){
 document.getElementById('demo').innerHTML = 'Change Id='+mId+'Q='+mQ ;
 $.ajax({ 
 type: "GET", // type of request [get/post], you need get 
 url: 'submitChange.php?Id=5', 
 async: true, // this is the flag to run ajax request Asynchroneously, you don't need to wait.
 success : function(data)
 {
 // "data" is the text from request
 // there the code for execution after receiving an unswer from request
 document.getElementById('demo').innerHTML = 'Arrived here?';
 }
 });
}