Inserting html with jquery doesn't work

Question

I'm building a simple shoutbox.

Here's the html :

<div id="shoutbox">    
    <form method="post" id="form" class="shoutbox-form">
        <table>
            <tr>
                <td><label>User</label></td>
                <td><input class="text user" id="nick" type="text" MAXLENGTH="25" /></td>
            </tr>
            <tr>
                <td><label>Message</label></td>
                <td><input class="text" id="shout" type="text" MAXLENGTH="255" /></td>
            </tr>
            <tr>
                <td></td>
                <td><input id="send-shout" type="submit" value="Dodaj!" /></td>
            </tr>
        </table>
    </form>
    <div id="shoutbox-container">
        <span class="clear"></span>
        <div class=".shoutbox">
            <div id="shoutbox-loading"><img src="css/images/loading.gif" alt="Loading..." /></div>
            <ul>
            </ul>
        </div>
    </div>
</div

>

Here's the js code :

$(document).ready(function(){
    var inputUser = $("#nick");
    var inputMessage = $("#shout");
    var loading = $("#shoutbox-loading");
    var messageList = $(".shoutbox > ul");

    function updateShoutbox(){
        messageList.hide();
        loading.fadeIn();
        $.ajax({
            type: "POST", 
            url: "/shouts/", 
            data: "action=refresh",
            success: function(data){
                var data = JSON.parse(data);
                loading.fadeOut();
                messageList.html(data["response"]);
                messageList.fadeIn(2000);
            }
        });
    }
});

But apparently the messageList.html(data["response"]) doesn't work although firebug shows that my response is :

{"response": "<li><strong>user1</strong><img src=\"\" alt=\"\" >test<span class=\"date\">2010-10-07 19:36:13</span></li><li><strong>user2</strong><img src=\"\" alt=\"\" >test2<span class=\"date\">2010-10-07 20:23:56</span></li>"}

If instead of success in ajax I have complete I get var data = JSON.parse(data); error. Any ideas what can be changed to fix this issue ?

UPDATE :

Adding:

    var c = data["response"];
    console.log(c);

Gives me :
<li><strong>user1</strong><img src="" alt="" >test<span class="date">2010-10-07 19:36:13</span></li><li><strong>user2</strong><img src="" alt="" >test2<span class="date">2010-10-07 20:23:56</span></li> in firebug console.

Answer 1

I get var data = JSON.parse(data); error

The response you are quoting is not JSON, is it? It's HTML. Just insert it directly and it should work.

Answer 2

You should make your call set json as the dataType:

$.ajax({
    type: "POST", 
    url: "/shouts/", 
    data: "action=refresh",
    dataType: 'json',
    success: function(data){
        loading.fadeOut();
        messageList.html(data["response"]);
        messageList.fadeIn(2000);
    }
});

This gets jQuery to automatically parse the JSON and give you data as the returned object.

This may fix your problem. At the very least it will take care of JSON interpreting for you and prevent cross-browser issues.

Answer 3

I love to follow up the latest plugin

Why you don't make your response as JSON only and then populate them with the new jQuery Templating Plugin

for more information about using this plugin

http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-working-with-the-official-jquery-templating-plugin/

Answer 4

Nobody else noticed the error in your html.

<div class=".shoutbox">

Should be:

<div class="shoutbox">

Fix that and see if your jQuery stuff works.

EDIT As mentioned in other answers you should also set your response type to JSON. Which would avoid you having to use JSON.parse() on the data. But this isn't necessary given your use of JSON.parse() on the response data.

Answer 5

Proper answer:

$(document).ready(function(){
    var inputUser = $("#nick");
    var inputMessage = $("#shout");
    var loading = $("#shoutbox-loading");
    var messageList = $(".shoutbox > ul");

    function updateShoutbox(){
        messageList.hide();
        loading.fadeIn();
        $.ajax({
            type: "POST", 
            url: "/shouts/", 
            data: "action=refresh",
            dataType: "json",
            success: function(data){
                loading.fadeOut();
                var c = data["response"];
                console.log(c);
                messageList.html(c);
                messageList.fadeIn(2000);
            }
        });
    }