使用jQuery按类刷新div

Question

我使用foreach循环使用PHP进行表格渲染。

@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>

结果如下：

我尝试使用$('.comment-body').toggle();，但它无效。编辑评论后我该如何刷新该div？

Answer 1

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

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

Answer 2

如果我明白你的观点 ..我认为它非常简单

第一：您需要在DisplayMemberPath

之后使用

var button = $(this);

第二次：var comment_section = button.closest('tr').find('.comment-body'); 成功回拨函数

ajax

Answer 3

设置元素的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代码被注入您的网页。

Answer 4

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

试试这个或

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