如何刷新链接或按钮点击div?

时间:2016-06-10 14:56:19

标签: javascript jquery

我正在开展一个小型社交网络项目,我正在使用帖子评论功能。我坚持的是,一旦使用删除评论,评论计数应自动减少。这可以使用刷新功能完成,但当前代码似乎不起作用。它删除注释但不显示减少的计数。因此,每当删除评论时,它都应显示减少的计数。到目前为止,这是我的代码。

<div style="border:2px solid red;" class="comment_ui" id="view<?php echo $id; ?>">
<div>
<a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a>
</div>


<div class="comment_ui">

<div class="comment_text">
  <div  class="comment_actual_text">
    <?php echo $FirstName.' '.$LastName;?>
    <a id="<?php echo $c_id;?>" class = "delete_comment" style="position: relative; float:right; right: 20px; text-decoration: none;" href="#">x</a><p/>
    <div id="sssss"><?php echo $comment; ?></div>
  </div>
</div>

</div>

JQuery的

<script type="text/javascript">

        $(function(){
          $(".delete_comment").click(function(){
            var element = $(this);
            var comment = element.attr("id");
            var commentRow = $(this).closest('.comment_text');
            var info = "comment="+comment;            

            $.ajax({
              type: "POST",
              url: "delete_comment.php",
              data: info,
              success: function(){
                commentRow.fadeOut('slow', function() {$(this).remove();});
                $('.comment_ui').load(url + ' .comment_ui');                
              }
            });
            return  false;
          });
        });

        </script>

2 个答案:

答案 0 :(得分:0)

你不能像这样使用.load()。变量url未定义,您无法向URL添加jquery选择器。

如果你不能.load()你需要的确切html必须.get()代替.find()你在响应中需要的部分并插入.html()

编辑:添加了代码建议

<div style="border:2px solid red;" class="comment_ui" id="view<?php echo $id; ?>">
    <div>
        <a href="#" class="view_comments" id="<?php echo $id; ?>">View all 
            <span id="totalCommentsCount"><?php echo $comment_count; ?></span> comments</a>
    </div>

    <div class="comment_ui">
        <div class="comment_text">
          <div  class="comment_actual_text">
            <?php echo $FirstName.' '.$LastName;?>
            <a id="<?php echo $c_id;?>" class = "delete_comment" style="position: relative; float:right; right: 20px; text-decoration: none;" href="#">x</a><p/>
            <div id="sssss"><?php echo $comment; ?></div>
          </div>
        </div>
    </div>  
</div>

<script type="text/javascript">
    $(function(){
      $(".delete_comment").click(onDeleteComment);
    });


    function onDeleteComment() {
        var commentElement = this;
        var commentId = commentElement.id;

        //Start the fade-out even before the delete is committed to create a fast user experience
        var commentRow = $(commentElement).closest('.comment_text');
        commentRow.fadeOut('slow', function() { commentRow.remove(); });

        //Post the delete to the server
        $.ajax({
          type: "POST",
          url: "delete_comment.php",
          data: { comment: commentId },
          success: function (deleteResponse) {

            //USE ONE OF THE ALT. BELOW:

            //Alt.1: delete_comment.php returns a json like { count: 12 } which describes number of comments left
            $('#totalCount').text(deleteResponse.count);

            //Alt.2: you don't care to reload number of comments from server and just decrease by one.
            var totalCountSpan = $('#totalCount');
            totalCountSpan.text(parseInt(totalCountSpan.text()) - 1);

            //Alt.3: get number of comments left on server by reloading the "view" an extra time. Really not optimal!           
            var viewId = $('.comment_ui').attr('id');
            $.get( "get_view.php?id=" + viewId, function( data ) {
                var newCount = $(data).find('#totalCount').text();
                $( "#totalCount" ).text( newCount );
             });             
          },
          error: function(){
                //Possibly restore the comment here if this happens often?
                alert("somthing is wrong")
          },
        });
    }
</script>

答案 1 :(得分:0)

尝试以下代码

viewModel.productHandlingDataSource.add({ Name: "Other" })