CODEWITHSUNDEEP
javascriptphpjqueryajax
Syntax_Error
Syntax_Error

Reputation: 6230

Ajax code with javascript

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?

Upvotes: -1

Views: 108

Answers (4)

Profesor08
Profesor08

Reputation: 1258

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

Upvotes: 0

Sniper
Sniper

Reputation: 108

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

Upvotes: 0

Prior99
Prior99

Reputation: 619

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>

Upvotes: 1

Arko Elsenaar
Arko Elsenaar

Reputation: 1739

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

Upvotes: 0

Related Questions