AJAX request doesnt change text in div

Question

I'm currently performing a task which involves getting the information from a file using php and returning it using AJAX. The data is getting sent as I tested this using an alert, however for some reason the line:

param.html(str);

won't change the text in the div...

Here is my function:

function updateChat(param) {
    var dataString = 'update=true';
    var str = '';
    $.ajax({
        type: "POST",
        url: "inc/chat.php",
        data: dataString,
        success: function(data) {
            str = data;
        }
    });
    param.html(str);
}

Here is how I call my method:

setTimeout(function() {
    updateChat('#chatbox');
}, 1000);

possible duplicate of [How to return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — PeterKA, Jun 15 '15 at 23:52

ShankarSangoli · Accepted Answer · 2015-06-15T23:56:15.373

5

Since you are performing an async request str will not be set until the ajax request is complete and success handler is invoked. Move param.html(str) inside the ajax success handler then it will update the text in the div.

function updateChat(param) {
    var dataString = 'update=true';
    var str = '';
    $.ajax({
        type: "POST",
        url: "inc/chat.php",
        data: dataString,
        success: function(data) {
           param.html(data);
        }
    });

}

Change this

setTimeout(function() {
    updateChat('#chatbox'); //<----
}, 1000);

to

setTimeout(function() {
    updateChat($('#chatbox'));
}, 1000);

edited Jun 15 '15 at 23:56

answered Jun 15 '15 at 23:49

ShankarSangoli

69,612
13
93
124

This however is still not having my text appear in the div – rshah Jun 15 '15 at 23:51
Can you check what is `data` in the success handler? – ShankarSangoli Jun 15 '15 at 23:52
if `param` is a jQuery object and visible on the page then passing a valid string to `html` should work fine. – ShankarSangoli Jun 15 '15 at 23:54
1

@rshah Make sure you're specifying the parameter correctly. e.g. you should be doing `updateChat($("#myDiv"))`, not `updateChat("#myDiv")`. – Jun 15 '15 at 23:54
@ShankarSangoli the method call was the problem :) Thanks – rshah Jun 15 '15 at 23:57

score 1 · Answer 2 · answered Jun 15 '15 at 23:52

The problem occurs because javascript uses async call in Ajax. In your case, the line that assigns param.html(str) is executed before str gets changed as a result of the delay in server call.

function updateChat(param) {
    var dataString = 'update=true';
    var str = '';
    $.ajax({
        type: "POST",
        url: "inc/chat.php",
        data: dataString,
        success: function(data) {
            str = data; ---> then it's assigned
        }
    });
    param.html(str);  ---> this is executed first
}

Move the param.html assignment inside the success function of the Ajax call.

AJAX request doesnt change text in div

2 Answers2