Wie kann ich diesen HTML-Block in eine Seite aus einer JSON-Antwort mit jQuery einfügen?

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> 

Ich brauche das oben, um den folgenden Code an eine Kommentarliste auf der aktuellen Seite anzufügen.

KOMMENTAR-ID-NUMBEER = Diese werden Teil der json Antwort oben
KOMMENTAR-POST-date = Diese werden Teil der json Antwort oben
KOMMENTAR-Text sein = wird dieser Teil der json Antwort sein oben

USER-gender = dies in der PHP-Session ist
USER-IMAGE-URL = dies in der PHP-Session ist
USER-NAME = dies in der PHP-Session ist

Hier ist, was ich brauche den folgenden Code in die Seite einzufügen, aber mit dem it ems I Liste direkt oben, um auch in die richtigen locatons eingefügt zu werden.

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

Eine andere Frage, machen die Liste Zellen alternative Hintergrundfarbe in meinem Skript, so wie könnte ich es class = „Thread-even“ oder class = „Thread-ungerade“, je nach dem letzten Element einfügen?

Answer 1

Ich empfehle, diesen HTML-Block bereits auf der Seite als Vorlage versteckt zu haben. Wenn Sie Ihre Ajax-Antwort erhalten, klonen Sie sie mit jquery, fügen Sie instanzspezifische Daten ein und hängen Sie sie an Ihre Seite an.

Um die Kommentarklassen zu wechseln, markieren Sie einfach die letzte und verwenden Sie die entgegengesetzte Klasse. Natürlich benötigen Sie eine Standardklasse für den ersten Kommentar.

Beispiel:

Lassen Sie sich diese irgendwo auf Ihrer Seite, versteckt von CSS oder 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--> 

nächste in Ihrem Erfolg Rückruf, müssen Sie tun, was ich oben erwähnt. Hier ist ein Beispiel, um loszulegen:

//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 sollte die Rechnung passen. Gehen Sie direkt zum Download, es enthält ein Beispielprojekt mit dem, wonach Sie suchen ... oder versuchen Sie a fewblog posts für schnelle Beispiele. Es ist beabsichtigt für wiederholte Segmente, aber es funktioniert gut für alles Vorlagenvorlagen, ob es wiederholt oder nicht.

Answer 3

Warum nicht Ihre Server-Seite diesen HTML als einen der Schlüssel zu Ihrem JSON-Objekt zurückgeben. Sie sollten bereits über diese Logik verfügen, um einen Kommentar vorbereitete anzuzeigen, so dass die "HTML formatierte" Version davon in data.htmlComment nicht so schwer wäre.

Answer 4

Als Antwort auf Ihre zweite Frage:

"Eine andere Frage, die Liste Zellen alternative Hintergrundfarbe in meinem Skript, so wie könnte ich es Klasse machen einfügen =" Thread-even "oder class =" Thread -Odd "abhängig vom letzten Artikel?"

Test, wenn das letzte Element der sogar Klasse hat, wenn es ist, geben sie die ungeraden Klasse und umgekehrt:

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

der Selektor verwendet, wählt das letzte Kind der ID angegeben. Sobald Sie das letzte Kind angefügt haben, sollte das sein, dem Sie die neue Klasse geben müssen, so dass Sie den gleichen Selektor verwenden können;) Es könnte einen besseren Weg geben, dies in Ihren Code einzufügen, aber das Snippet sollte Ihnen das geben muss es funktionieren ... viel Glück :)