jQuery insertion de commentaire aide

Question

Salut à tous, j'essaie d'apprendre comment insérer un commentaire dans un code html sans avoir à actualiser la page. Je sais que jQuery est capable d'insérer un commentaire dans une zone div mais j'ai des problèmes pour trouver un exemple comme celui avec la décoloration dans Voici mon code commentaire.

<div id="CommentBox122" style="width:80%; padding:2px; margin-left:25px;"> 
    <table width="650px" border="0" cellpadding="0" cellspacing="5" style="margin-left:20px; background-color: #F8F8F8; border-bottom:#CCC solid 1px;"><tr> 
     <td width="10%" rowspan="2" align="center" class="Commentimage"><img src="img/avatar/gkrgimmkdhmggfh.jpg" height="60" /></td> 
     <td width="90%" class="Commentposted">Posted by me on Saturday, May 01, 2010 @ 4:37: PM</td></tr> 
     <tr><td class="Commentsaying">this is a test comment</td></tr> 
    </table> 

<div id="stylized" class="myform" align="center"> 
    <form id="CommentForm122" name="CommentForm122"> 
      <div align="center" style="text-align:center; color:#F00; font-family:Arial, Helvetica, sans-serif; font-weight:bold;">Would you like to leave a comment, Robert?</div> 
      <textarea name="txtComment" class="box" id="txtComment"></textarea> 
      <input name="txtpostid" type="text" id="txtpostid" style="visibility:hidden; display:none; height:0px; width:0px;" value="Demo43639" /> 
      <div class="buttons" align="center"> 
       <button type="button" id="Button122" name="Button122" class="positive" onclick="doStuff();"><img name="Submit" src="img\buttonimgComment.png" alt="" />Post Comment</button> 
      </div> 
    </form> 
</div> 
</div> 

Le code que je dois insérer à nouveau serait la suivante:

<table width="650px" border="0" cellpadding="0" cellspacing="5" style="margin-left:20px; background-color: #F8F8F8; border-bottom:#CCC solid 1px;"><tr> 
    <td width="10%" rowspan="2" align="center" class="Commentimage"><img src="img/avatar/gkrgimmkdhmggfh.jpg" height="60" /></td> 
    <td width="90%" class="Commentposted">Posted by me on Saturday, May 01, 2010 @ 4:37: PM</td></tr> 
    <tr><td class="Commentsaying">this is a test comment</td></tr> 
</table> 

Mais encore une fois, je ne peux pas trouver un exemple en utilisant jQuery pour insérer automatiquement cette partie du code sous l'autre « table>/table> » boîte ..

Ainsi, après son inséré par jQuery , le code devrait ressembler à ceci:

<div id="CommentBox122" style="width:80%; padding:2px; margin-left:25px;"> 
    <table width="650px" border="0" cellpadding="0" cellspacing="5" style="margin-left:20px; background-color: #F8F8F8; border-bottom:#CCC solid 1px;"><tr> 
     <td width="10%" rowspan="2" align="center" class="Commentimage"><img src="img/avatar/gkrgimmkdhmggfh.jpg" height="60" /></td> 
     <td width="90%" class="Commentposted">Posted by me on Saturday, May 01, 2010 @ 4:37: PM</td></tr> 
     <tr><td class="Commentsaying">this is a test comment</td></tr> 
    </table> 

    <table width="650px" border="0" cellpadding="0" cellspacing="5" style="margin-left:20px; background-color: #F8F8F8; border-bottom:#CCC solid 1px;"><tr> 
     <td width="10%" rowspan="2" align="center" class="Commentimage"><img src="img/avatar/gkrgimmkdhmggfh.jpg" height="60" /></td> 
     <td width="90%" class="Commentposted">Posted by me on Saturday, May 01, 2010 @ 4:37: PM</td></tr> 
     <tr><td class="Commentsaying">this is a test comment</td></tr> 
    </table> 

<div id="stylized" class="myform" align="center"> 
    <form id="CommentForm122" name="CommentForm122"> 
      <div align="center" style="text-align:center; color:#F00; font-family:Arial, Helvetica, sans-serif; font-weight:bold;">Would you like to leave a comment, Robert?</div> 
      <textarea name="txtComment" class="box" id="txtComment"></textarea> 
      <input name="txtpostid" type="text" id="txtpostid" style="visibility:hidden; display:none; height:0px; width:0px;" value="Demo43639" /> 
      <div class="buttons" align="center"> 
       <button type="button" id="Button122" name="Button122" class="positive" onclick="doStuff();"><img name="Submit" src="img\buttonimgComment.png" alt="" />Post Comment</button> 
      </div> 
    </form> 
</div> 
</div> 

Comme toujours, n'importe quelle aide serait géniale! : O)

David

Answer 1

Compte tenu de votre structure, vous pouvez le faire:

$("#stylized").before(htmlString); 

Où « #stylized » est l'ID du conteneur pour votre formulaire d'entrée et « htmlString » est le code HTML de votre nouvelle table que vous voulez insérer. Cette approche ajoutera toujours la nouvelle chaîne à la fin de votre liste de tables mais avant le formulaire de saisie.

EDIT: En fait, je me méfie de votre ID pour le formulaire d'entrée - il semble qu'il ne soit pas unique à la page. Vous pouvez aussi le faire:

$("#stylized", "#CommentBox122").before(htmlString); 

Cela limitera la « #stylized » sélecteur d'identité à l'intérieur du contexte de l'élément « # CommentBox122 ».

Answer 2

match le dernier élément de la boîte de commentaires, puis utiliser .before( chaîne , élément, html) pour insérer le commentaire.