0

I am write a dynamic comment system, without page refreshing.

The problem is, how do I move the "form" element to add sub comments? Like the comment-reply.min.js

My workspace:

<script type="text/x-tmpl" id="intoTemplate">       
{% for (var i=0; i<o.result.length; i++) { %}
<div id="post-{%=o.result[i].post.id%}">
    <div><a href="<?php echo homeurl(); ?>/{%=o.result[i].post.type%}/{%=o.result[i].post.slug%}/">{%=o.result[i].post.title%}</a></div>
    <div class="content">{%=o.result[i].post.content%}</div>
    <div>{%=moment.unix(o.result[i].post.time).locale('tr').format("DD MMMM YYYY, ddd kk:mm:ss")%}</div>

<h3>Comments</h3>
    {% if(o.result[i].post.comment.total.found>0){
         for (var d=0; d<o.result[i].post.comment.result.length; d++) { %}

        <div id="comment-{%=o.result[i].post.comment.result[d].id%}">
            <div class="content auto-hashtag auto-usertag">
                {%=o.result[i].post.comment.result[d].content%}
                <button>Reply</button>
            </div>
        </div>

        {% }
    } else { %}
        <div>no comments</div>
    {% } %}

    <div id="comments-{%=o.result[i].post.id%}" data-nonce="{%=o.result[i].post.nonce%}">
        <form id="commentForm-{%=o.result[i].post.id%}" class="comment-form">
            <?php if($currentUserId!=0&&is_numeric($currentUserId)): ?>
                 <input type="hidden" name="user_id" value="<?php echo $currentUserId; ?>" />
            <?php else: ?>
                 <input type="text" name="guest" placeholder="Your Name" />
            <?php endif; ?>
                 <input type="hidden" name="nonce" value="{%=o.result[i].post.nonce%}" />
                 <input type="hidden" name="id" value="{%=o.result[i].post.id%}" />
                 <input type="hidden" name="parent" value="0" />
                 <textarea name="content" placeholder="Write..."></textarea>
        </form>
    </div>
</div>
{% } %}
</ul>
</script>

After the jSON parse rendering, my pure html (SIMILAR):

<h3>Comments</h3>

<div id="comments-123">
   <div id="comment-588">
         A sample comment
         <button>Reply</button>
   </div>
   <div id="comment-589">
         A sample comment
         <button>Reply</button>
   </div>
   <form id="commentForm-123">
     <input type="hidden" name="nonce" value="12hf223nf" />
     <input type="hidden" name="id" value="123" />
     <input type="hidden" name="parent" value="0" /> <!-- parent = 0 : not a child comment -->
     <textarea name="content" placeholder="Write..."></textarea>
   </form>
</div>

How to when click any reply button, <form id="commentForm-*"> move to clicked button div inside. Just like the example below.

<h3>Comments</h3>

<div id="comments-123">
   <div id="comment-588">
         A sample comment
         <button>Reply</button>
   </div>
   <div id="comment-589">
         A sample comment
         <button>Reply</button>
         <form id="commentForm-123">
             <input type="hidden" name="nonce" value="12hf223nf" />
             <input type="hidden" name="id" value="123" />
             <input type="hidden" name="parent" value="589" /> <!-- parent = 589 : child from 589 -->
             <textarea name="content" placeholder="Write..."></textarea>
         </form>
   </div>
</div>

After the moved, parent id set the input value: <input type="hidden" name="parent" value="589" /> <!-- parent = 589 : child from 589 -->

Now all these things are working on the backend and frontend. But the only problem I have had is that I did not know how to carry the "<form>" element.

Note: This is like a index.php, archive.php Custom Post Query page.

0
<script>
var addComment = {
    settings: function( parentId, postId ) {        

        var 
            t                   = $(this),
            commentDivName      = $('#comment-'+parentId),
            formDivName         = $('#commentForm-'+postId),
            formReplyDivName    = $('#commentReplyForm-'+parentId),
            postDivName         = $('#post-'+postId),
            theform             = formDivName.find('form.comment-form');

            if( !t.length || !commentDivName.length || !formDivName.length || !postDivName.length ) {
                return;
            }

            if(!theform.length){

                $(postDivName).find('[id^=commentReplyForm-]').each(function(){
                    if($(this).find('form.comment-form').length){
                        formDivName = $('#'+$(this).attr('id'));
                    }
                });

                theform         = formDivName.find('form.comment-form');

            }

            theform.find('input[name=parent]').val(parentId);
            theform.appendTo(formReplyDivName);

            var cancel          = formReplyDivName.find('.cancel')
            cancel.show();

    }
};
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.