0

I am making a jquery ajax request as follow

Edit

On click of edit btn

$('.mymodalbtn').click(function($this){
            var id = $this.data('id'); 
            $('[name="id"]').val(id);
        });
    });

Modal window get open with editable fields, On form submit I am making a ajax call as below

$('#mymodalForm').on('submit',function(e){
            e.preventDefault();
            var successFlag=false;

            $.ajax({
                url: "/student/"+selectedId ,
                data : {'id':selectedId},
                type: 'PUT',
                datatype: "json",
                success: function(data){
                    $.gritter.add({
                        title: "Student",
                        text: data,
                        time: '1000'
                    }),
                }
            });
        });

<!-- Nifty Modal HTML -->
    <div class="md-modal colored-header md-effect-9" id="mymodalWin">
        <div class="md-content">
            <div class="modal-header">
                <h3>Student</h3>
            </div>
            <form id="mymodalForm" method="post" action="">
            <div class="modal-body form">   
                <input type="text" value="2" name="id"/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-flat md-close" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary btn-flat" id="edit-selected-transaction" data-dismiss="modal">Submit</button>
            </div>
            </form>
        </div>
    </div>
    <div class="md-overlay"></div>

I am trying to auto-close modal window if it's successful else show error and stay on modal window.

I tried with .complete but no luck seems something wrong!.

I have tried .hide() also but then on click of edit button modal window doesn't appear. Can someone tell me how can I auto close bootstrap modal window.

user269867
  • 3,266
  • 9
  • 45
  • 65
  • You're getting there, it's important not to stress. Take a nice deep breath and realize you're further today than you were yesterday! Your JS needs cleaned up a bit in your functions, as does what I posted below so I'm going to fix that now and run your code in a JSFiddle to finalize your fix. – Mike Horstmann Dec 30 '15 at 10:43
  • Quick Fix : is ('#mymodal').removeClass("md-show") and add style="perspective:1300px". This work for me. but I wonder why .modal('hide') doesn't work as expected. – user269867 Dec 30 '15 at 20:20

2 Answers2

0

If you want to autoclose the modal window in the success callback then just do

$.ajax({
 success:function(data){
   $('#mymodal').modal('hide');
   // Rest of your code.
  }
});
void
  • 36,090
  • 8
  • 62
  • 107
0

Within your ajax call, use it like this....

$.ajax({
 success:function(data){
   $.gritter.add({
         title: "Student",
         text: responseHTML,
         time: '1000'
    },
 complete: function(){
            $('#mymodal').hide();
            //Here, you are executing your event loop, or in this example the api "hide" for the "#mymodal" id element.
    }
}); // I forgot a bracket here, my apologies.
Mike Horstmann
  • 580
  • 2
  • 9
  • It is also possible, if you don't pass "gritter" into your function for your ajax call, that within the ajax call it cannot be referenced. But I'd need to see more of your code to offer further advice on that. Also, the age old adage of "If it ain't broke....." – Mike Horstmann Dec 29 '15 at 23:39
  • I have edited my question, please let me know if need more details. – user269867 Dec 30 '15 at 05:29
  • .hide() hide the modal window leaves the background color and when I click again the modal window is not opening. – user269867 Dec 30 '15 at 18:05