Error messages not clearing from Bootstrap modal even after closing

Question

I am attempting to set up modal for a project in which a client would be able to update their favorite team, city of birth and their size. Upon not entering some of the information I would like an error message to be returned to them but when the modal is closed I would like to have this message disappear. I am using bootstrap for the modal, is it possible that the error message is not clearing due to the page not refreshing or is it an error in my code?

Modal markup:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-   labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="city">You were born in:</label>
                        <input type="text" class="form-control" id="city"  placeholder="city">

                    </div>
                    <div class="form-group">
                        <label for="favorite_team">Favorite team:</label>
                        <input type="text" class="form-control" id="favoriteTeam"  placeholder="favorite team">

                    </div>
                    <div class="form-group">
                        <label for="size">size:</label>
                        <input type="text" class="form-control" id="size"  placeholder="size">

                    </div>

                    <div class="alert alert-success" id="successAlert" role="alert"  style="display: none"></div>
                    <div class="alert alert-danger" id="updateFail" style="display:none" >                  </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" onClick="closed()"  >Close</button>
                <button type="button" class="btn btn-primary" id="saveBtn"  onClick="Changes()">Save changes</button>
            </div>
        </div>
    </div>
</div>

Script:

function Changes() {
    $.ajax({
        url: "../php_parsers/update_parse.php",
        type: "POST",
        data: {
            city: $("#city").val(),
            favoriteTeam: $("#favoriteTeam").val(),
            size: $("#size").val()
        }
    }).done(function (result) {
        if (result == "success") {
            $("#successAlert").html(result).show();
        } else {
            $("#updateFail").html(result).show();
        }
    })
}

function closed() {
    $("#updateFail").style.display = "none";
    $("#successAlert").style.display = "none";
}

Answer 1

You should be using Bootstrap's callbacks on the modal, not click handlers on the close button. What if someone hits escape or clicks outside to close?

$('#myModal').on('hide.bs.modal', function (e) {
    $('#updateFail, #successAlert').hide();
});

Your function may not work because the modal is already hidden by the time it runs. jQuery sometimes can't act on hidden elements. Bootstrap's on.hide() method runs before the modal is actually hidden.

Notice that I've combined your selectors (maybe use a common class instead) and converted to the cleaner hide() method.

Answer 2

You can try something like this for your Changes() function:

function Changes(){
   $.ajax({
   url: "../php_parsers/update_parse.php",
   type: "POST",
   data: { 
      city:         $("#city").val(), 
      favoriteTeam: $("#favoriteTeam").val(), 
      size:         $("#size").val()
   }
   }).done(function(result) {
      //Hide Previous messages
      $("#successAlert, #updateFail").hide();
      if (result == "success") {
         $("#successAlert").html(result).show();
      } else {
         $("#updateFail").html(result).show();
      }
   })
}

Answer 3

Нou can try close function like below:

 function closed(){
     $("#updateFail").html('').hide();
     $("#successAlert").style.display="none";
 }