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?

You're using a jQuery method, have you loaded jQuery before ? Also, check on jQuery docs for a more complete code — Damien Pirsy
– Damien Pirsy, Commented May 20, 2014 at 7:02
@Prior what for? He says the php part works when called directly, that means (and the code shows it) the ajax part has issues — Damien Pirsy
– Damien Pirsy, Commented May 20, 2014 at 7:09
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. — dumbass
– dumbass, Commented Jul 13, 2024 at 9:57

Prior99 · Accepted Answer · 2014-05-20 07:11:10Z

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>

Arko Elsenaar · Accepted Answer · 2014-05-20 07:06:29Z

0

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

answered May 20, 2014 at 7:06

Arko Elsenaar

1,7394 gold badges18 silver badges36 bronze badges

Comments

Sniper · Accepted Answer · 2014-05-20 07:16:51Z

0

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?';
  }
});

edited May 20, 2014 at 7:16

answered May 20, 2014 at 7:10

Sniper

1081 silver badge5 bronze badges

Comments

Profesor08 · Accepted Answer · 2014-05-20 07:29:41Z

0

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?';
        }
    });
}

answered May 20, 2014 at 7:29

Profesor08

1,2571 gold badge15 silver badges22 bronze badges

Collectives™ on Stack Overflow

Ajax code with javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related