Bootstrap modal wont close on submit

Question

I added a Bootstrap modal to my page. Here is the code of modal div:

<div class="modal fade" id="myModal<?php echo $kategori['C_ID'];?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel<?php echo $kategori['C_ID'];?>">
  <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<?php echo $kategori['C_ID'];?>">Perditeso</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="id">ID</label>
          <input type="text" class="form-control" id="id<?php echo $kategori['C_ID'];?>" value="<?php echo $kategori['C_ID'];?>">
        </div>
        <div class="form-group">
          <label for="newname">Kategoria</label>
          <input type="text" class="form-control" id="newname<?php echo $kategori['C_ID'];?>" value="<?php echo $kategori['C_Name'];?>">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Mbyll</button>
        <button type="button" onclick="catupdate('<?php echo $kategori['C_ID'];?>')" class="btn btn-primary">Ruaj ndryshimet</button>
      </div>
    </div>
  </div>
</div>

and the catupdate function:

function catupdate(id){
  var dataString="fshij=" + id;
  $.ajax({
    type:"post",
    url:"../functions/query.php",
    data:dataString,
    cache:false,
    success: function(html){
      $('#del').html(html);
    }
  });
  return false;
}

The function runs correctly and completes the action but it doesn't close Modal automatically. In this case i'm tryint to edit datas there. PHP codes are okay.

Answer 1

You should close the modal programmatically after the click using :

$('[id^="myModal"]').modal('hide');
//OR
$('.modal').modal('hide');

Inside success function or in the beginning of your function catupdate to, eg :

success: function(html){
   $('.modal').modal('hide');
   $('#del').html(html);
}

Hope this helps.

Answer 2

Use the following syntax to hide a modal:

$('#modalID').modal('hide');

So, in your code:

function catupdate(id){
 var dataString="fshij=" + id;
  $.ajax({
    type:"post",
    url:"../functions/query.php",
    data:dataString,
    cache:false,
    success: function(html){
      $('#del').html(html);
      $('.modal:visible').modal('hide');
    }
  });
 return false;
}