Question

Hey all, i am trying to learn how to insert a comment within some html code without having to refresh the page. I know jQuery is capable of inserting a comment into a div area but i am having problems finding an example like that with fading in. Here is my comment code:

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

The code i need to insert again would be:

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

But again, i am unable to find an example using jQuery to automatically insert that part of the code under the other “table> /table>” box..

So after its inserted by jQuery, the code should look like this:

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

As always, any help would be great! :o)

David

Answer 1

Given your structure, you could do this:

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

Where “#stylized” is the ID of the container for your input form and “htmlString” is the html of your new table you want inserted. This approach will always append the new string at the end of your list of tables but before the input form.

EDIT:
Actually, I’m suspicious of your ID for the input form – it appears that it may not be unique to the page. You could also do this:

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

This will restrict the “#stylized” ID selector to within the context of the element “#CommentBox122”.