CODEWITHSUNDEEP
jquerytwitter-bootstrappopup
xitas
xitas

Reputation: 1164

Ajax with bootstrap model?

So I have a form and in which I am updating my row through ajax. I have a update button when I click on that button bootstrap model is shown. I made some changes in the row and then I submit. My record is updated.

Problem:

when I submit my bootstrap did not close after submitting I have to close bootstrap model manually.

This Is how it looks like:

model image

This is my jquery code:

$(document).ready(function() {
$("#FormSubmit").click(function (e) {
        e.preventDefault();

        var  email = $("#email").val(); 
        var update_id = $("#update_id").val();
        jQuery.ajax({
        type: "POST",
        url: "../user_controller/update_data", 
        dataType:"text",
        data:"update_id="+ update_id +"&email="+ email,
        success:function(data){
            $("#mycont").modal('hide'); /*problem I have tried many thing but it wont work */   
        },
        });
        return false;
});
});

This is my bootstrap model code

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Update Data</h4>
      </div>
       <form method="post" name="groupform" id="contact" >
      <div class="modal-body" id="mycont">

    <!-- /* ajax load code here */ -->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button id="FormSubmit" class="btn btn-primary">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div>

Upvotes: 1

Views: 228

Answers (2)

bharat savani
bharat savani

Reputation: 339

Your model id is myModal and you are try to close with mycont id try it with the following success function

success:function(data){
  $("#myModal ").modal('hide');   
}

Upvotes: 0

Omsai Jadhav
Omsai Jadhav

Reputation: 134

May be there is a problem in bootstrap newer version. I am using 2.3 and its working fine.
If you don't want to wait for data sent by server, you can always add data-dismiss="modal" in submit button.
<button id="FormSubmit" class="btn btn-primary" data-dismiss="modal">Save changes</button>

Upvotes: 1

Related Questions