Question

Say I submit the form, it either gives me an error or a success message. I close the modal and if I click to open it again, the message is still there. How do I clear it?

$("#JqAjaxForm").submit(function(e){                
        e.preventDefault();

        dataString = $("#JqAjaxForm").serialize();

        $.ajax({
            type: "POST",
            url: "update.php",
            data: dataString,
            dataType: "json",
            success: function(data) {
            //clearForm("#JqAjaxForm");

                if(data.email_check == "invalid"){ 
                    $("#message_ajax").html("<p class='alert alert-error'>Sorry " + data.name + ", " + data.email + " is NOT a valid e-mail address. Try again.</p>");
                } else {                        
                    $("#message_ajax").html("<p class='alert alert-success'>" + data.newpasswd + " is a valid e-mail address. Thank you, " + data.name + ".</p>"); 
                }     
            }                
        });                 
});


$('#chg_settings').modal({
  backdrop: 'static',
  keyboard: true,
  show: false
});

And I call the modal via

<a data-toggle="modal" href="#chg_settings">Settings</a>

Here’s the message div

<div id="message_ajax"></div>

Answer 1

You can register a hidden event like this

$('#chg_settings').on('hidden', function () {
  $("#message_ajax").html('');
})

This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).