How do I do a reset of the Bootstrap modal window without reloading the page ? Using PHP , jQuery, AJAX

Question

I have a comment system. The user can report a bad comment (jquery and AJAX). When there are several comments for the same post the Bootstrap modal window retains the message from the previous report. How do I do a reset of the modal window without reloading the page?

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

I think what you are looking for is to have a modal with it's initial state? If that is so, you can do it by tweaking your modal when it is opened and resetting the elements that you want. So in your javascript, you should have something like:

$(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();
                }
    });
  });
});

Hope this helps! Leo.