CODEWITHSUNDEEP
jqueryhtml
Michael Grigsby
Michael Grigsby

Reputation: 12163

appending data before an element

I'm developing a wall and I'm having trouble with the following code. As you can tell from the image below that new comments are added to the bottom. But I need it to be appended but appended before the commentBox. I thought maybe the .before() would come in handy but I couldn't figure out how to get it to work. Any ideas on how to get this to work?

enter image description here

jQuery:

e.closest('.status-border-bottom-box1').find('.commentsList').append(html); // needs to insert before commentBox

Html:

        <div class="commentsList" style="width: 104%">
        <div id="commentLikeListing" style="width: 100%; display: none"></div>
<?php   $query1 = $this->db->query("SELECT * FROM wallpostcomments wp INNER JOIN users u ON u.userid = wp.userid WHERE wallPostId = '{$row->idwallPosts}' ORDER BY wp.idwallPostComments ASC");
        foreach($query1->result() as $row1)
            if ($query->num_rows() > 0) { ?>
        <div id="likeList" style="display: none; width: 95%"></div>
        <div id="commentsList" style="width: 96%">
        <table cellpadding="0" cellspacing="0" style="width: 408px" class="style1 commentStyle">
        <tr>
        <td valign="top" style="width: 10px">
        <img style="padding: 3px" id="defaultImg a0" src="<?=base_url().$row1->defaultImgURI?>" align="left" width="25px" height="25px" />
        &nbsp;</td>
        <td valign="top" style="width: 319px">
        <a class="font1 link-font1"><b><?=$row1->firstname.' '.$row1->lastname?> </b></a><?=$row1->entryData.'<br>'.date('m/d/Y h:ia ', strtotime($row1->DateTimeCreated))?></a>
        </td>
    </tr>
</table>
        </div>
        <?php } ?>
        <input placeholder="Write a comment..." id="commentBox-<?php echo $row->idwallPosts; ?>" class="textbox1" style="width: 400px"></input>
        </td>
        </tr>

</table>
<?php } } else { ?>
    <div id="commentsListNewData" class="commentStyle" style="visibility: hidden; width: 96%"></div>
    <br>
    <div class="font2" style="text-align: center">Sorry but you are not associated with any churches. Click <span class="link-font1" id="findChurch">here</span> to find your church.</div>
    <?php } ?>
        <div id="newData"></div>
</div>
</div>
</td>

Upvotes: 0

Views: 95

Answers (2)

NimChimpsky
NimChimpsky

Reputation: 47290

prepend ? http://api.jquery.com/prepend/

Its not exactly clear what you want, but jQuery is likely have the specific built in function for it. And as mentioned elsewhere you have two commentsList, which rings an alarm bell.

Upvotes: 4

Nishu Tayal
Nishu Tayal

Reputation: 20830

Try .after() function. It insert content, specified by the parameter, after each element in the set of matched elements.

e.closest('.status-border-bottom-box1').find('.commentsList').after(html);

Upvotes: 0

Related Questions