Jquery set HTML via ajax

Question

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 completed 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']);

You should never use document.write after the initial page load. — epascarello
– epascarello, Commented Aug 28, 2013 at 12:23

Rory McCrossan · Accepted Answer · 2013-08-28 12:23:44Z

10

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();

answered Aug 28, 2013 at 12:23

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

epascarello Over a year ago

The data is "JSON" so probably would have to do something a little different in the html() part.

Rory McCrossan Over a year ago

@epascarello also true, but I'll leave that until the OP specifies it as a requirement.

Rory McCrossan Over a year ago

@MarcRasmussen if the code in the success handler is not being executed it means there is an error somewhere, either client or server side. Check the console, and make sure the response code is 200. If not, try creating an error handler and interrogate the passed parameters to discover the issue.

Yasitha · Accepted Answer · 2013-08-28 12:24:59Z

1

Replace with this

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

answered Aug 28, 2013 at 12:24

Yasitha

2,3034 gold badges25 silver badges39 bronze badges

Comments

VahidNaderi · Accepted Answer · 2013-08-28 12:25:06Z

1

In success method you should use something like this:

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

answered Aug 28, 2013 at 12:25

VahidNaderi

2,4881 gold badge24 silver badges36 bronze badges

Comments

jcubic · Accepted Answer · 2013-08-28 12:25:08Z

1

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

answered Aug 28, 2013 at 12:25

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

2 Comments

Marc Rasmussen Over a year ago

Nothing happens :S ive even tried $('.username').html('hello world') but with no result

jcubic Over a year ago

@MarcRasmussen Because you need to execute that function first or put that code without a function.

Suryaprakash Pisay · Accepted Answer · 2013-08-28 12:28:16Z

1

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;
    }

answered Aug 28, 2013 at 12:28

Suryaprakash Pisay

6489 silver badges23 bronze badges

1 Comment

Rory McCrossan Over a year ago

This won't work due to the request being asynchronous. Nothing will ever be returned.

Sank · Accepted Answer · 2013-08-28 12:30:20Z

1

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

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

answered Aug 28, 2013 at 12:30

Sank

1311 silver badge6 bronze badges

Collectives™ on Stack Overflow

Jquery set HTML via ajax

6 Answers 6

3 Comments

Comments

Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related