2017-06-13 38 views
1

我使用foreach循环将表格呈现为PHP。使用jQuery按类别刷新div

@foreach ($comments as $comment) 

       <tr> 
        <td>{{ $comment->lot_date }} 
         <br> 
         @if (count($comment->ourcar) >= 1) 
          <p>Saved</p> 
         @else 
          <form method="POST" action="/comments/{{ $comment->id }}/ourcars"> 
           {{ csrf_field() }} 
           <button type="submit" class="btn btn-xs btn-primary">Our Car</button> 
          </form> 
         @endif 
        </td> 
        <td> 
         <a href="{{ route('comments.show', $comment->id) }}">{{ $comment->bid }}</a> 
        </td> 
        <td>{{ $comment->auction_name }}</td> 
        <td class="block"> 
         @foreach(explode('#', $comment->pics_urls, 3) as $pic) 
          <a href="{{ $pic }}" class='iframe'> 
           <img src="{{ $pic }}" class="img-fluid" width="30" height="32"> 
          </a> 
         @endforeach 
        </td> 
        <td>{{ $comment->company }}</td> 
        <td>{{ $comment->model_name_en }}</td> 
        <td>{{ $comment->model_type_en }}</td> 
        <td>{{ $comment->grade_en }}</td> 
        <td>{{ $comment->model_year_en }}</td> 
        <td>{{ $comment->color_en}}</td> 
        <td>{{ $comment->displacement }}</td> 
        <td>{{ $comment->transmission_en }}</td> 
        <td>{{ $comment->scores_en }}</td> 
        <td>{{ $comment->mileage_num }}</td> 
        <td>{{ $comment->start_price_en }}</td> 
        <td><div class="comment-body">{{ $comment->body }}</div></td> 
        <td>{{ $comment->lot->result_en or '---' }}</td> 
        <td>{{ $comment->user->name }} 
        <td> 
         <button data-id="{{ $comment->id }}" class="btn-link editButton"><span class='glyphicon glyphicon-edit'></span></button> 
        </td> 
        <td> 
         <form method="POST" action="{{route('comments.destroy', ['id' => $comment->id]) }}"> 
          {{ method_field('DELETE') }} 
          {{ csrf_field() }} 
          <div class="form-group"> 
           <button type="submit" class="btn-link" onclick="return confirm('Are you sure?')"><span class='glyphicon glyphicon-trash' style="color:red"></span></button> 
          </div> 
         </form> 
        </td> 

       </tr> 

      @endforeach 

我创建了一个模式窗口来添加注释到使用JS的行。之后,我提出意见和模式被关闭,我想刷新内容<td class="comment-body">comment</td>

所以我要通过类刷新DIV一个问题,我可以用一个id,因为表循环:

$(function() { 
      $('.editButton').click(function (e) { 
       var button = $(this); 

       var geturl = '/comments/' + button.data('id') + '/edit'; 

       var posturl = '/comments/' + button.data('id'); 

       $.get(geturl) 
        .done((response) => { 
         bootbox.dialog({ 
          title : "Add comment", 
          message : response, 
          buttons : { 
           addButton : { 
            label : 'Add comment', 
            className : 'btn btn-primary', 
            callback:() => { 
             var modalForm = $('#modalForm'); 

             if ($('#commentBody').val()) { 
              $.ajax({ 
               type : 'POST', 
               url : posturl, 
               data : modalForm.serialize(), 
               success : (response) => { 
                if (response === "ok") { 
                 bootbox.hideAll(); 
                 $('.comment-body').toggle(); 


                } 
               } 
              }) 
             } 
             return false; 
            } 
           }, 
           closeButton : { 
            label : 'Close', 
            className : 'btn btn-default' 
           } 
          } 
         }) 
        }) 
        .fail((errorResponse) => { 
         bootbox.alert('Error! Comment is not added'); 
        }); 

      }); 

     }); 
    </script> 

我的情态视图:

<div class="modal-body"> 
    <form action="#" id="modalForm" data-id="{{ $comment->id }}"> 
     <div class="form-group"> 
      {{ csrf_field() }} 
      {{ method_field('PUT') }} 
      <textarea name="body" id="commentBody" 
         placeholder="Add Your Comment Here." class="form-control" required>{{ $comment->body }}</textarea> 
     </div> 
    </form> 
</div> 

这是结果:

enter image description here

我试图使用$('.comment-body').toggle();,但它不起作用。编辑评论后我应该如何刷新该div?

+1

你可以让ase澄清我们可以在HTML中找到哪些'评论'?我只看到了评论'。 –

回答

2

,如果我得到你的意思。我认为它很简单

:你需要使用后var button = $(this);

var comment_section = button.closest('tr').find('.comment-body'); 

第二:上ajax成功回调函数

comment_section.text($('#commentBody').val()); 
+0

谢谢!!它工作正常! –

+0

@DmitryM覆盖整个div的文本alys很高兴听到这个消息。祝你有个美好的一天:-) –

0
$('.comment-body').(''); 

试试这个或

$('.comment-body').html(''); 
+0

它只是删除在该分区的所有意见,我想实现的是在旧代替输入更新评论中确切的该行 –

1

设置元素的innerHTML来填充它,或者使用空字符串来清除它:

$('.comment-body').html("New Comment") // New contents 
$('.comment-body').html("") // Clear contents 

如果您在多个有.comment-body您的表格只有一行,而您只想“刷新”其中一个,那么您需要指定一个ID,以便可以精确定位包含单元格的行。 E.g ...

<tr id="row1"><td class="comment-body">..comment..</td><tr> 

$("#row1").find(".comment-body").html("New Comment Text") 

注:代替.html你也可以使用.text,以防止用户的意见HTML代码被注入到您的网页。

+0

空字符串只是删除所有评论:( –

+0

那么什么叫“我的意思是完全相同想要刷新评论“内容是什么? – Bumpy

+0

我输入新的评论以模态形式提交后,我希望它出现在评论' –

2
var old_comment = $('.comment-body').text(); 
$('.comment-body').text(old_comment + '\n' + new_comment); 

我真的不明白你刷新。上面的代码是为旧的添加新的评论。

+0

谢谢你能解释一下这个工作吗?我粘贴这段代码但是没有工作... –

+0

我怎样才能定义'var new_comment'? –

+0

@DmitryMalys of coz u can not paste it这段代码只给你的想​​法如何做到这一点,因为你没有提供足够的代码/为我们解释一下就够了。 – Mark