Вставка HTML с помощью jquery не работает - PullRequest
Новая
       2

Вставка HTML с помощью jquery не работает

0 голосов
/ 08 октября 2010

Я строю простой чат.

Вот 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

>

Вот код js: 

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

Но, очевидно, messageList.html (data ["ответ "]) не работает, хотя firebug показывает, что мой ответ:

{"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>"}

Если вместо success в ajax у меня complete, я получаю var data = JSON.parse(data); ошибку,Любые идеи, что можно изменить, чтобы решить эту проблему?

ОБНОВЛЕНИЕ:

Добавление: 

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

Дает мне:
<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> в консоли Firebug.

Ответы [ 5 ]

3 голосов
/ 08 октября 2010

Никто не заметил ошибку в вашем html. 

<div class=".shoutbox">

Должно быть: 

<div class="shoutbox">

Исправьте это и посмотрите, работает ли ваш jQuery.

РЕДАКТИРОВАТЬ Как уже упоминалось в других ответах, вы также должны установить тип ответа JSON.Что позволит вам избежать использования JSON.parse() в данных.Но это не обязательно, если вы используете JSON.parse() в ответных данных.

0 голосов
/ 08 октября 2010

Правильный ответ: 

$(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);
            }
        });
    }
0 голосов
/ 08 октября 2010

Вы должны сделать свой вызов, установив JSON как dataType: 

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

При этом jQuery автоматически анализирует JSON и выдает данные в качестве возвращаемого объекта.

Это может решить вашу проблему. По крайней мере, он позаботится о переводе JSON и предотвратит кросс-браузерные проблемы.

0 голосов
/ 08 октября 2010

Я люблю следить за последним плагином

Почему вы не делаете свой ответ как JSON, а затем заполняете их новым плагином шаблонов jQuery

для получения дополнительной информации об использовании этого плагина

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

0 голосов
/ 08 октября 2010

Я получаю var data = JSON.parse (data); ошибка

Ответ, который вы цитируете, не является JSON, не так ли? Это HTML. Просто вставьте его прямо, и он должен работать.

...