jqueryを使用したjsonの応答から、このhtmlブロックをページに挿入するにはどうすればよいですか？

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 =この
COMMENT-TEXT上記のJSON応答の一部となる=これはJSON応答の一部となります

USER-GENDER上=、これはこれはPHPのセッションここ

である=これはPHPのセッション
USER-NAMEにある= PHPのセッション
USER-IMAGE-URLであることは、私は必要なものですページに挿入するには、以下のコードを追加します私は適切なロカトンにも同様に挿入されるために上にリストされています。

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

もう一つの問題は、私のスクリプト内のリストセルの代替背景色なので、どのように私はそれは、クラス=「スレッドさえ」またはクラス=「スレッド - 奇妙な」最後の項目に応じて挿入作るだろうか？

Answer 1

htmlのブロックを既にページ上にテンプレートとして隠しておくことをお勧めします。 ajaxレスポンスを取得したら、jqueryでクローンを作成し、インスタンス固有のデータを挿入してページに追加します。

コメントクラスを交互に使用するには、最後のクラスを確認して反対のクラスを使用します。もちろん、最初のコメントにはデフォルトのクラスが必要です。

例：

<!-- 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--> 

次に、あなたの成功のコールバックで、あなたは私が上記の何をする必要があります。

があなたのページでこのどこかに、CSSやJavaScriptで隠さを持っています。

//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

jTemplatesは、法案に適合する必要があります。ダウンロードに直接進むと、サンプルプロジェクトが含まれています...またはa fewblog postsを試してみてください。それは繰り返しセグメントの意図ですが、繰り返されるかどうかにかかわらずテンプレート化されたものであれば問題ありません。

Answer 3

JSONオブジェクトのキーの1つとしてHTMLを返さないようにしてください。準備されたコメントを表示するには、すでにロジックをすべて持っている必要があります。そのため、 "HTML Formatted"バージョンをdata.htmlCommentに戻すことはそれほど難しくありません。あなたの2番目の質問に応えて

Answer 4

：

スレッドさえ「またはクラス=」スレッド「もう一つの問題は、私のスクリプト内のリストセルの代替背景色なので、どのように私はそれがクラス=を挿入作ることができます」最後の項目によって「-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'); 
} 

は、指定されたIDの最後の子を選択します。最後の子を追加したら、新しいクラスを与える必要があるので、同じセレクターを使うことができます;）これをコードに適合させるより良い方法があるかもしれませんが、スニペットは、それを稼働させる必要があります...幸運:)