I have the following span:

<span class='username'> </span>

to populate this i have to get a value from PHP therefor i use Ajax:

    $('.username').html(getUsername()); 
    function getUsername(){
    $.ajax({
        type: 'POST',
        url: myBaseUrl + 'Profiles/ajax_getUsername',
        dataType: 'json',
        data: {

        },
        success: function(data){
            document.write(data);
        }
    })
}

Now when i debug i see that the returned data (data) is the correct value but the html between the span tags stay the same.

What am i doing wrong?

Little update

I have tried the following:

    function getUsername(){
    $.ajax({
        type: 'POST',
        url: myBaseUrl + 'Profiles/ajax_getUsername',
        dataType: 'json',
        data: {

        },
        success: function(data){
            $('.username').html('RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRr');
        }
    })
}

getUsername();

Still there is no html between the tags (no text) but when i look at the console the method is pleted and has been executed.

Answer to the little update

The error was in my Ajax function i forgot to print the actual response! Thank you for all of your answers, for those of you who are searching for this question here is my Ajax function:

    public function ajax_getUsername(){
    if ($this->RequestHandler->isAjax())
    {
        $this->autoLayout = false;
        $this->autoRender = false;
        $this->layout = 'ajax';
    }
    print json_encode($this->currentClient['username']);

}

Do note that i am using CakePHP which is why there are some buildin methods. All in all just remember print json_encode($this->currentClient['username']);

I have the following span:

<span class='username'> </span>

to populate this i have to get a value from PHP therefor i use Ajax:

    $('.username').html(getUsername()); 
    function getUsername(){
    $.ajax({
        type: 'POST',
        url: myBaseUrl + 'Profiles/ajax_getUsername',
        dataType: 'json',
        data: {

        },
        success: function(data){
            document.write(data);
        }
    })
}

Now when i debug i see that the returned data (data) is the correct value but the html between the span tags stay the same.

What am i doing wrong?

Little update

I have tried the following:

    function getUsername(){
    $.ajax({
        type: 'POST',
        url: myBaseUrl + 'Profiles/ajax_getUsername',
        dataType: 'json',
        data: {

        },
        success: function(data){
            $('.username').html('RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRr');
        }
    })
}

getUsername();

Still there is no html between the tags (no text) but when i look at the console the method is pleted and has been executed.

Answer to the little update

The error was in my Ajax function i forgot to print the actual response! Thank you for all of your answers, for those of you who are searching for this question here is my Ajax function:

    public function ajax_getUsername(){
    if ($this->RequestHandler->isAjax())
    {
        $this->autoLayout = false;
        $this->autoRender = false;
        $this->layout = 'ajax';
    }
    print json_encode($this->currentClient['username']);

}

Do note that i am using CakePHP which is why there are some buildin methods. All in all just remember print json_encode($this->currentClient['username']);

• javascript
• jquery
• ajax

• do you want to get data inside span ? – Voonic Commented Aug 28, 2013 at 12:23
• You should never use document.write after the initial page load. – epascarello Commented Aug 28, 2013 at 12:23
• did you try directly write to span ? – Janith Chinthana Commented Aug 28, 2013 at 12:24

6 Answers 6

The logic flow of your code is not quite correct. An asynchronous function cannot return anything as execution will have moved to the next statement by the time the response is received. Instead, all processing required on the response must be done in the success handler. Try this:

function getUsername() {
    $.ajax({
        type: 'POST',
        url: myBaseUrl + 'Profiles/ajax_getUsername',
        dataType: 'json',
        data: { },
        success: function(data){
            $('.username').html(data); // update the HTML here
        }
    })
}

getUsername();

Replace with this

success: function(data){
    $('.username').text(data);
}

In success method you should use something like this:

$(".username").text(data);

You should set the html in callback

function getUsername() {
    $.ajax({
        type: 'POST',
        url: myBaseUrl + 'Profiles/ajax_getUsername',
        dataType: 'json',
        data: {

        },
        success: function(data){
            $('.username').html(data);
        }
    })
}

Add a return statement for the function getUsername

       var result = "";
        $('.username').html(getUsername()); 
        function getUsername(){
        $.ajax({
            type: 'POST',
            url: myBaseUrl + 'Profiles/ajax_getUsername',
            dataType: 'json',
            data: {

            },
            success: function(data){
                document.write(data);
                result = data;
            }
        })
          return result;
    }

You can use .load()
Api docs: http://api.jquery./load/
In your case:

$('.username').load(myBaseUrl + 'Profiles/ajax_getUsername',
                    {param1: value1, param2: value2});