Как я могу вставить этот блок html на страницу из ответа json с jquery?

Question

<script type="text/javascript">
var dataString2 = 'run=captchagood&comment=' + comment;
$.ajax({
    type: "POST",
    url: "process.php",
    data: dataString2,
    dataType: "json",
    error: 'error',
    success: function (data) {
        if (data.response === 'captchasuccess') { 
            $('div#loader').find('img.load-gif').remove();
            $('div#loader').append('<span class="success">Thanks for your comment!</span>');
            $('div#loader').hide().fadeIn('slow');
            $('span.limit').remove();
            $('ol#commentlist').prepend(data.comment);
            $('input#submit-comment').unbind('click').click(function () {
                return false;
            });
        };
    }
});
</script>

Мне нужно выше, чтобы добавить код ниже в список комментариев на текущей странице.

COMMENT-ID-NUMBEER = это будет частью ответа json выше
COMMENT-POST-DATE = это будет частью ответа json выше
COMMENT-TEXT = это будет частью ответа json выше

USER-GENDER = это в сеансе PHP
USER-IMAGE-URL = это в сеансе PHP
ИМЯ ПОЛЬЗОВАТЕЛЯ = это в сеансе PHP

Вот то, что мне нужно вставить на страницу, приведенный ниже код, но с элементами, которые я перечисляю непосредственно выше, для вставки в соответствующие местоположения.

<ol class="commentlist" id="commentlist">


    <!-- START Comment block -->
    <li class="thread-even"  id="COMMENT-ID-NUMBEER"> 
        <div class="photocolumn"> 
            <div class="imageSub" style="width: 100px;"> 
                <img class="USER-GENDER" src="USER-IMAGE-URL" width="100"/>
                <div class="blackbg"></div>
                <div class="label">USER-NAME</div>
            </div>
        </div>
        <div class="commenttext"> 
            <span class="comment_date">COMMENT-POST-DATE</span>
            <p>COMMENT-TEXT</p> 
        </div> <!-- END COMMENTTEXT -->
        <div class="modcolumn">
            <a href=""><img class="delete " src="../../images/icons/error.gif"></a> 
            Delete
        </div>
    </li> 
    <!-- END comment block-->

</ol>   

Другой вопрос, ячейки списка меняют цвет фона в моем скрипте, так как я могу заставить его вставлять class = "thread-even" или class = "thread-odd" в зависимости от последнего элемента?

Answer 1

Я рекомендую, чтобы этот блок html уже был скрыт на странице в качестве шаблона. Получив ответ ajax, клонируйте его с помощью jquery, вставьте данные, специфичные для экземпляра, и добавьте их на свою страницу.

Чтобы чередовать классы комментариев, просто отметьте последний и используйте противоположный класс. Конечно, вам понадобится класс по умолчанию для первого комментария.

Пример:

Поместите это где-нибудь на своей странице, скрытое с помощью CSS или javascript:

<!-- START Comment block -->
<li class="thread-even"  id="comment_template"> 
    <div class="photocolumn"> 
            <div class="imageSub" style="width: 100px;"> 
                    <img class="USER-GENDER" src="USER-IMAGE-URL" width="100"/>
                    <div class="blackbg"></div>
                    <div id="username" class="label">USER-NAME</div>
            </div>
    </div>
    <div class="commenttext"> 
            <span class="comment_date">COMMENT-POST-DATE</span>
            <p>COMMENT-TEXT</p> 
    </div> <!-- END COMMENTTEXT -->
    <div class="modcolumn">
            <a href=""><img class="delete " src="../../images/icons/error.gif"></a> 
            Delete
    </div>
</li> 
<!-- END comment block-->

Далее, при успешном обратном вызове вам нужно будет сделать то, что я сказал выше. Вот пример, с которого можно начать:

//clone your template
var comment = $('#comment_template').clone();

//insert instance specific data
$('#username', comment).html(USERNAME);
$('.comment_date', comment).text(DATE);
//do the rest

//append it to your page
$('#commentlist').append(comment);

Answer 2

В ответ на ваш второй вопрос:

"Другой вопрос, ячейки списка меняют цвет фона в моем сценарии, так как я могу сделать так, чтобы он вставлял class =" thread-even "или class =" thread-odd "в зависимости от последнего элемента?"

проверить, имеет ли последний элемент четный класс, если он есть, присвоить ему нечетный класс и наоборот:

if ( $("#mylist > :last").is(".thread-even") ){
    $(/* thing appending to */).append( /* whatever */ );
    $("#mylist > :last").addClass('thread-odd');
} else if ( $("ul > :last").is(".thread-odd") ){
    $(/* thing appending to */).append( /* whatever */ );
    $("#mylist > :last").addClass('thread-even');
}

используемый селектор выбирает последнего потомка указанного идентификатора. После того, как вы добавили, последний ребенок должен быть тем, что вам нужно дать новому классу, чтобы вы могли использовать тот же селектор;) Может быть, есть лучший способ встроить это в ваш код, но фрагмент должен дать вам то, что вы нужно, чтобы это заработало ... удачи:)

Answer 3

Почему бы не заставить серверную часть возвращать этот HTML как один из ключей к вашему объекту JSON. У вас уже должна быть вся эта логика для отображения подготовленного комментария, поэтому вернуть его в формате «HTML отформатированный» в data.htmlComment не составит большого труда.

Answer 4

jTemplates должны соответствовать требованиям. Перейдите непосредственно к загрузке, она включает в себя пример проекта с тем, что вы ищете ... или попробуйте несколько сообщений в блоге для быстрого ознакомления. Он предназначен для повторяющихся сегментов, но он отлично работает для всех шаблонов, независимо от того, повторяется он или нет.