0

Trying to close/dismiss bootstrap modal dialog after user saves data. I've gotten the dialog to close, but it renders the main page useless. As in, any of the button don't do anything. 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <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">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>Do you want to save?</p>
                <br />
                <p><label class="Modallabel">Title:</label>
                    <input class="Modalinput" type="text" maxlength="100" title="Name" id="txtTemplateName" value=@ViewBag.Name />
                </p>
                <p><label class="Modallabel">Description:</label>
                    <input class="Modalinput" type="text" maxlength="150" title="Name" id="txtDescription" value=@ViewBag.Description />
                </p>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveChangesBtn">Save changes</button>
                <button type="button" class="btn btn-primary" id="saveNewBtn">Save as New</button>
            </div>
        </div>
    </div>
</div>

$("#saveNewBtn").click(function () {     
         var obj = { startDate: $("#startDate").val(), endDate: $("#endDate").val(), templateName: $("#txtName").val(), description: $("#txtDescription").val() };
          $.ajax({                     
             url: "/Report/SaveNew/",
             data: (obj),
             type: "POST",
             success: function (result) {                 
                 $('#myModal').modal('toggle');
                 $('#ReportModalDialog').modal('toggle');
                 $('#modal').modal('toggle');    
             },
             error: OnError
         });         

         function OnError(request, status, error) {
             $("#lblResult").html(request.statusText);   
         }                  
 }); // End of on submit button click
splitfire
  • 11
  • 2
  • What does the console output? try adding some console.log('') to check what's happening – Julo0sS Oct 27 '17 at 11:57
  • The 4 parameters are in the console and they appear fine. In addition, the http status is 200. I am not sure what is going on. – splitfire Oct 27 '17 at 13:04
  • share an example of your code on jsfiddle or something, so we can help easily... – Julo0sS Oct 27 '17 at 13:33
  • My code is .net mvc with the code above. I'm posting data from my view to controller that adds the parameters into the database, which works. Now I just want to close the modal dialog once the user clicks the "saveNewBtn" from above. When the button is clicked, the modal dialog is still in the foreground – splitfire Oct 27 '17 at 14:19
  • check this https://stackoverflow.com/questions/16493280/close-bootstrap-modal – Julo0sS Oct 27 '17 at 15:44
  • I've looked at several of those, but hide and toggle do not work. It seems success or complete is not firing, which I have also looked into, but not success yet. – splitfire Oct 27 '17 at 15:54
  • If I add data-dismiss="modal" to the button, it works. However, I would like to close the modal within the success callback – splitfire Oct 27 '17 at 17:31

0 Answers0