Question

如何将html插回到我的html的一部分？使用append删除样式和默认隐藏功能，当页面加载时隐藏所有表单。

这是我的html：

 <div class="col-md-6">
<!-- COMMENT 1 WITHIN COL-MD--6 -->
<div class="gc gcc">

    <div class="upvote">

        <i class="fa fa-thumbs-up upvote_true"></i>
        <span class="like_count">0</span>

        <form method="POST" class="vote_form" ><input type='hidden' name='token' value='nil' />
            <input name="likes" type="hidden" value="1">
            <input name="comment_id" type="hidden" value="37">
        </form>
    </div>

    <div class="downvote">
        <i class="fa fa-thumbs-down downvote_false"></i>

        <span class="like_count">1</span>
        <form method="POST" class="vote_form" > <input type='hidden' name='token' value='nil' />
            <input name="dislikes" type="hidden" value="1">
            <input name="comment_id" type="hidden" value="37">
        </form>
    </div>


    <div class="time_since">1 day, 16 hours ago</div>

    <div class="clear replies">

        <p class="write-up">MAIN COMMENT</p>

        <img class="side-pic mini-picture" src="img.jpg" width="50" height="50">

        <div class="clear"></div>
        <hr> <!-- Below are replies dynamically generated from another included script-->

                    <p>0 reply</p>
                    <p>1 reply to comment</p>
                    <p>3 reply</p>
        <hr>
    </div>

    <div class="reply_form_post">
        <i class="fa fa-reply good_rp" ></i>
        <i class="fa fa-share mean_rp"></i>


        <br/>
         <form method="POST" action="/commentor/comments/" class="post_comment"> <input type='hidden' name='token' value='nil' />

            <input class="comment_type"  name="comment_type" type="hidden" />
            <input class="rep" name="parent_id" type="hidden" value="37"/>
           <textarea class="comment_form" cols="50" name="comment" placeholder="Reply..." rows="3" /></textarea>

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

<br/>
 <!-- COMMENT 2 WITHIN COL-MD--6 -->
<div class="gc gcc">


    <div class="upvote">
        <i class="fa fa-thumbs-up upvote_true"></i>
        <span class="like_count">0</span>

        <form method="POST" class="vote_form" ><input type='hidden' name='token' value='nil' />
            <input name="likes" type="hidden" value="1">
            <input name="comment_id" type="hidden" value="36">
        </form>
    </div>

    <div class="downvote">
        <i class="fa fa-thumbs-down downvote_false"></i>

        <span class="like_count">0</span>
        <form method="POST" class="vote_form" > <input type='hidden' name='token' value='nil' />
            <input name="dislikes" type="hidden" value="1">
            <input name="comment_id" type="hidden" value="36">
        </form>
    </div>


    <div class="time_since">1 day, 16 hours ago</div>

    <div class="clear replies">

        <p class="write-up">Coolest guy ever </p>
        <img class="side-pic mini-picture" src="img2.png" width="50" height="50">
        <div class="clear"></div>
        <hr>
            <p> 1 REPLY HERE</p>
        <hr>
    </div>

    <div class="reply_form_post">
        <i class="fa fa-reply good_rp" ></i>
        <i class="fa fa-share mean_rp"></i>

        <br/>
         <form method="POST" action="/commentor/comments/" class="post_comment"> <input type='hidden' name='token' value='nil' />

            <input class="comment_type"  name="comment_type" type="hidden" />
            <input class="rep" name="parent_id" type="hidden" value="36"/>
            <textarea class="comment_form" cols="50" name="comment" placeholder="Reply..." rows="3" /></textarea>

        </form>
        <span class="clear"></span>
    </div>
</div>
<br/>

 <!-- COMMENT 3 ... N WITHIN COL-MD--6  SHOULD BE HERE -->

下面是我的Ajax / Jquery。

   $(document).ready(function(){
        $(".post_comment").hide();


      $("#next_pp").click(function(e){
                    e.preventDefault();
                    var pageNum = $(this).attr('href').match(/page=(\d*)/)[1];

                    var commentPart = $('.col-md-6');
                    $.ajax({
                        url: window.location,
                        type: 'GET',
                        dataType: 'html',
                        data: {'page': pageNum},

                        success: function(data) {
                            var $response = $(data);
                            var gcc = $(data).find('.gcc');
                            commentPart.append(gcc);
                        },
                        error: function(xhr, textStatus, error){
                           alert("Invalid request");
                        }
                    });

                });
});

Answer 1

I'd suggest you to use this: http://api.jquery.com/load/, it will make your life way easier. Instead of appending after a div, you'll only replace your parent div with your ajax request. Hope it helped.

Jquery append从Ajax响应数据中删除CSS样式

1 个答案: