Question

我有一个评论系统。用户可以报告不良评论（jquery和AJAX）。当同一帖子有多个注释时，“引导程序”模态窗口将保留先前报告中的消息。如何在不重新加载页面的情况下重置模式窗口？

post.php

<button type="button" id="showModal" class="btn btn-primary btn-sm reporting" data-comment-id = "<?= $comment->getId() ?>" data-toggle="modal" data-target="#reportModal"></button>

<div class="modal fade" id="reportModal" tabindex="-1" role="dialog" aria-labelledby="title-report" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="title-report">Confirm reporting</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary submit-reporting">Validate</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        </div>
        <input type="hidden" name="id" id="commentId"  value="">
    </div>
</div>

report.js

 $(document).ready(function(){
  $('.reporting').click(function(e) {
    e.preventDefault();
    $('#commentId').val($(this).data('comment-id'));
  });
  $('.submit-reporting').click(function(e) {
    e.preventDefault();
    var commentId = $('#commentId').val();
    $.ajax({
      url: 'post/moderateComment/' + commentId,
      success: function(){
                  $(".modal-body").html("<p>The report has been forwarded!</p>");
                  $('.submit-reporting').attr("disabled", "disabled");
                  $('[data-comment-id = "'+commentId+'"]').hide();
                }
    });
  });
});

Answer 1

我认为您正在寻找的是具有初始状态的模态？如果是这样，您可以通过在打开模态时对其进行调整并重置所需的元素来实现。因此，在您的JavaScript中，您应该输入以下内容：

$(document).ready(function(){
  $('.reporting').click(function(e) {
    e.preventDefault();

    //Clean your message here*** with something like 
    //$('.elementWHereMessageIs').empty(); //Is faster than text('') or html('')
    $(".modal-body").empty(); // I don't know if this is the message you want to empty?

    $('#commentId').val($(this).data('comment-id'));
  });
  $('.submit-reporting').click(function(e) {
    e.preventDefault();
    var commentId = $('#commentId').val();
    $.ajax({
      url: 'post/moderateComment/' + commentId,
      success: function(){
                  $(".modal-body").html("<p>The report has been forwarded!</p>");
                  $('.submit-reporting').attr("disabled", "disabled");
                  $('[data-comment-id = "'+commentId+'"]').hide();
                }
    });
  });
});

希望这会有所帮助！狮子座。

如何在不重新加载页面的情况下重置Bootstrap模式窗口？使用PHP，jQuery，AJAX

1 个答案: