Bootstrap 3 - When modal hides it hides content

Question

When my modal form, which succesfully returns Ajax content, closes. The content dissappears.

<h4>Ajax Results</h4>
<div id="ajaxResults">
</div>

The underlying javascript is:

 $('#modalTBMSubmit').on('click', function (e){
    $.ajax({
        type:"POST",
        url:"./services/addTypeBrandModel.php",
        data:$('#addTypeBrandModel').serialize(),
        success: function(msg){
            $('#ajaxResults').append('<strong>Success!</strong>');
        },
        error:function(){
            $('#ajaxResults').append('<strong>Failure!</strong>');
        }       
    });

My modal form is something this:

<div id="modalBrandModel" class="modal fade" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">

and I have not applied additional classes to modal dialog. Any idea why "Success!" dissappears when I close the modal dialog?

Answer 1

I realized that the page was doing a full reload because I had forgot to include in my javascript:

$('#modalTBMSubmit').on('click', function (e){
    e.preventDefault();

Thank you.