Inserting html with jquery doesn't work

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();
 开发者_如何学C       $.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.

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.

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.

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.

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

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/