JQuery .fadein() data insert at top instead of bottom

StackOverflow https://stackoverflow.com/questions/7707419

  •  08-02-2021
  •  | 
  •  

Question

Right now I have ClipBucket, and I'm editing the comments part of it.

When comments are posted, the new comment shows up at the bottom of the list, it needs to show up at the top when posted. 

var formObjectData = $('#'+form_id).serialize()+'&mode=add_comment';

$.post(page,formObjectData,
    function(data)
    {
        if(!data)
            alert("No data");
        else
        {

            $("#add_comment_button").attr("disabled","");

            $("#add_comment_result").css("display","block");
            if(data.err!='')
            {
                $("#add_comment_result").html(data.err);
            }
            if(data.msg!='')
                $("#add_comment_result").html(data.msg);

            if(data.cid)
            {
                get_the_comment(data.cid,"#latest_comment_container");
                $("#"+form_id).slideUp(1500).delay(10000).fadeIn(1500).val("");
            }
        }
    },'json');
}

function get_the_comment(id,div)
{

    $(div).html(loading);
    $.post(page, 
    {     
        mode : 'get_comment',
        cid : id
    },
    function(data)
    {
        if(!data)
            alert("No data");
        else
        {        
            $(div).css("display","none");
            $(div).html(data).fadeIn("slow");
        }
    },'text');
}

Also, on the line where I have:

$("#"+form_id).slideUp(1500).delay(10000).fadeIn(1500).val("");"

Is there something I can add to this to make it clear and reset the form? It shows back up with the old text, and if a new comment comes in, it simply appears to edit that first one even though it posted a new one.

Also, is there a button I can add that will refresh the comments listing without refreshing the page?

HTML:

`comments.html
{if $comments}
<div style="height:10px"></div>
    {foreach from=$comments.comments item=comment}
        {include file="$style_dir/blocks/comments/comment.html" comment=$comment type=$type parents=$comments.parents}
    {/foreach}

    <div style="height:10px"></div>


{else}
    <div id="latest_comment_container">
    <div align="center" class="no_comments">
        {lang code='no_comments' assign=no_comments} {$no_comments|sprintf:$object_type}
    </div>
    </div>

{/if}
{if $comments}
<div id="latest_comment_container"></div>
{/if}


add_comment.html:
<div class="add_comment_box" id="add_comment">
<h2 style="margin:0px">{lang code='grp_add_comment'}</h2>


<div id="add_comment_result" class="add_comment_result" style="display:none"></div>
{if $userquery->login_check('',true) || $Cbucket->configs.anonym_comments == 'yes'}
<form name="comment_form" method="post" action="" id="comment_form" value="0">
    <input type="hidden" name="reply_to" id="reply_to" value="0">
    <input type="hidden" name="obj_id" id="obj_id" value="{$id}">

    {if !$userquery->login_check('',true) && $Cbucket->configs.anonym_comments == 'yes'}
    <label for="name" class="label">{lang code='name'}</label>
    <br>
    <input type="text" name="name" id="name" class="input"><br>
    <label for="email" class="label">{lang code='email_wont_display'}</label>
    <br>
    <input type="text" name="email" id="email"  class="input"><br>
    {else}
    Name : {$userquery->username}<br>
    {/if}

    {ANCHOR place='before_compose_box'}
    <textarea name="comment" id="comment_box" cols="45" rows="5"  class="input" style="width:97%" ></textarea>

    <div style="height:10px"></div>


      {if config('comments_captcha')=='all' || ( config('comments_captcha')=='guests' && !$userquery->login_check('',true) )}

      <div style="width:auto; float:left; ">
    <strong>{lang code='please_enter_confimation_ode'}</strong>

        {assign var=captcha value=func->get_captcha()}
        {if $captcha} 
            {if $captcha.show_field}
                <label class="label" for="captcha">Verification Code</label><br />
                    {load_captcha captcha=$captcha load=field field_params = ' id="captcha" class="input" '}
               <div class="clearfix"></div>
            {/if}
            <label class="label">&nbsp;</label>

                {load_captcha captcha=$captcha load=function}

            <div class="clearfix"></div>
        {/if}

        </div>
    {/if}

    <div style="width:auto; float:left;padding-left:10px; padding-bottom:10px">{ANCHOR place='after_compose_box'}</div>

    <div class="clear"></div>

    <input type="hidden" name="type" value="{$type}" />
    <div style="margin-top:2px" ><input type="button" name="add_comment" id="add_comment_button" value="{lang code='user_add_comment'}" 
    class="cb_button" onclick="add_comment_js('comment_form','{$type}'){ANCHOR place='onClickAddComment'}"></div>
 <div style="margin-top:2px" ><input type="button" name="reload" id="reload_comment_button" value="Reload" 
    class="cb_button" onclick="reload_comment_js('comment_form','{$type}'){ANCHOR place='onClickAddComment'}"></div>
</form>
{else}
    {lang code='please_login_to_comment'}
{/if}
</div>

comment.html:
{if marked_spammed($comment)}
    {assign var='comment_attr' value='style="display:none"'}
    {assign var='spam_attr' value='style="display:block"'}
{else}
{assign var='comment_attr' value=''}
    {assign var='spam_attr' value='style="display:none"'}
{/if}

    <div id="comment_{$comment.comment_id}" class="comment clearfix" {$comment_attr}>
    <div class="user_com_thumb_con">
        <img src="{$userquery->getuserthumb($comment)}" class="user_com_thumb"  />
    </div>
    <div class="comm_other">
        <div class="user_bar">
        <div style="width:70%; float:left">
        {lang code='user_commented_time' assign='user_commented_time'}
        {assign var="nicetime" value=$comment.date_added|niceTime}
        {if $comment.userid !='' && $comment.userid!=0}
            {assign var="comm_link" value=$userquery->profile_link($comment)}
            {assign var="comm_owner" value=$comment.username}
        {else}
            {assign var="comm_id" value="#comment_"}
            {assign var="comm_link" value=$comment.comment_id}
            {assign var="comm_owner" value=$comment.anonym_name}       
        {/if}

        {$user_commented_time|sprintf:"$comm_id$comm_link":$comm_owner:$nicetime}

        </div>
        <div style="width:28%; float:right" align="right"><a href="javascript:void(0)" onclick="to_reply('{$comment.comment_id}')">{lang code='reply'}</a> | <a href="javascript:void(0)" onclick="spam_comment('{$comment.comment_id}','{$type}','{$type_id}')">{lang code='spam'}</a>

        {if has_access('admin_del_access') || $comment.userid==userid() || $comment.type_owner_id==userid()} | <a href="javascript:void(0)" onclick="delete_comment('{$comment.comment_id}','{$type}','{$type_id}')">{lang code='delete'}</a>{/if}</div>
        </div>

        <div class="comment_cont">

        {if $comment.parent_id}
            {assign var=parentid value=$comment.parent_id}
            {assign var=thisParent value=$parents.$parentid}

            {if $thisParent}
            <div style="padding:3px; margin:5px; background-color:#CCC">

                {if $thisParent.username}@{$thisParent.username} : 
                {/if}{$thisParent.comment|comment}
            </div>
            {/if}
        {/if}

        {$comment.comment|comment}

        </div>

        {if $type=='video' && $comments_voting=='yes' && $Cbucket->configs.comment_rating}
        <div class="comment_rating_cont"><span class="thumb_up" onclick="rate_comment('{$comment.comment_id}','up','{$type}','{$type_id}')">Thumbs Up</span><span class="thumb_down" onclick="rate_comment('{$comment.comment_id}','down','{$type}','{$type_id}')">Thumbs Down</span><span id="comment_rating_{$comment.comment_id}" class="comment_rating">{$comment.vote|comment_rating}</span></div>
        {/if}

    </div>
    </div>

    <div id="spam_comment_{$comment.comment_id}" class="spam" {$spam_attr} >
        {lang code='marked_as_spam_comment_by_user' assign='marked_as_spam_comment_by_user'}

        {if $comment.username}{$marked_as_spam_comment_by_user|sprintf:$comment.username}{else}{$marked_as_spam_comment_by_user|sprintf:$comment.anonym_name}{/if} | <a href="javascript:void(0)" onclick="delete_comment('{$comment.comment_id}')">{lang code='delete'}</a>
    </div>`
Was it helpful?

Solution

Take a look at .prepend() or .append() if you want to add content each time a new comment is submitted.

With .load() you can load e.g. a file in a div:

$('#selector').load('comments.php');

Edit:

Prepending comments: E.g.: #comments is your div where all your comments are shown. In this case, every comment has it's own div with the class .comments_box. Now everytime a comment is added, you prepend a new comment box to #comments.

$('#comments').prepend('<div class="comments_box">' + data + '</div>');

Reloading comments: E.g.: in your div #comments you include the file comments.php (<?php include('comments.php'); ?>). Now you want to reload (or simply load) comments.php again in the div #comments when you click on the class .reload:

$('.reload').click(function() {

    $('#comments').load('comments.php');

});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top