Adapt script to handle closing 1 modal and opening another

Question

Could use some help in adapting script to be able to close the currently displayed Modal and load a new Modal on button click. All while using a reusable modal framework loading PartialViews.

I know I'm missing something, just can't put my finger on what needs to be added.

To trigger the modal, I'm using an ActionLink (@Html.ActionLink("Select", "Details", new { id = item.id }, new { @class = "btn btn-primary", @data_modal = "" }))

 $(function () {
        $.ajaxSetup({ cache: false });
        $("a[data-modal]").on("click", function (e) {
            $('#myModalContent').load(this.href, function () {
                $('#myModal').modal({
                    keyboard: true
                }, 'show');
                bindForm(this);
            });
            return false;
        });
    });

    function bindForm(dialog) {
        $('form', dialog).submit(function () {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    if (result.success) {
                        $('#myModal').modal('hide');
                        window.location.href = "/home/Index";
                    } else {
                        $('#myModalContent').html(result);
                        bindForm();
                    }
                }
            });
            return false;
        });
    }

No problem displaying the initial modal, but the Edit button that should trigger a new modal, loads it as a new view and not as a modal.

looked at "Reload content in modal (twitter bootstrap)", similar to the script I'm using.

$("a[data-target=#myModal]").click(function(ev) {
    ev.preventDefault();
    var target = $(this).attr("href");
    
    // load the url and show modal on success
    $("#myModal .modal-body").load(target, function() { 
         $("#myModal").modal("show"); 
    });
});

looked at "Jquery simplemodal close existing modal and open a new one?" Came across "Best way to handle mutliple modals using Jquery and Bootstrap"

Concept Example of what I'm trying to do, but with a single modal frame and partialviews.

<style>
.modal:nth-of-type(even) {
    z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}
</style>
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Detail View</a>

<div class="modal" id="myModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Modal title</h4>    
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        </div><div class="container"></div>
        <div class="modal-body">
          Content for the modal #1 goes here.
          <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Edit</a>
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
        </div>
      </div>
    </div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">2nd Modal title</h4>
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        </div><div class="container"></div>
        <div class="modal-body">
          Content for the modal #2 goes here.
        </div>
        <div class="modal-footer">
          <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Cancel</a>
          <input type="submit" value="Save Changes" class="btn btn-danger" />
        </div>
      </div>
    </div>
</div>

<script>
$("#myModal2").on("shown.bs.modal", function () {
    $("#myModal").modal("hide")
})

$("#myModal2").on("hidden.bs.modal", function () {
    $("#myModal").modal("show")
})

</script>

Answer 1

I do not develop with C# and I notice that you haven't posted the form part of your process.

Anyway, analyzing the JS code, I can suppose that you have a script that contains the form to show into the modal and perhaps the logic to handle it (validation, etc...) or otherwise the form has an action to redirect to the next script on submit.

If the form-script contains also the logic, you must specify an action attribute for the form that will be valued with a referral to his own script (something like HttpContext.Current.Request.Url.AbsolutePath but as said I don't develop in C# and I can't confirm that it is the correct 'variable'): if this is missing, the action of the form is the address of the current page of the browser and this is why the page is reloaded.

Another potentially problem is that AJAX call in the bindForm() function expects either JSON data (when it's all right) either HTML data (in case there are errors or a successive phase to display, i suppose): to correctly manage the sent data, make sure you also send an header specifying the data type (I think it's enough to send a Content-type: application/json header when you send JSON) to allow the JQuery.ajax call to correctly manage the returned data. Otherwise you can specify the dataType: 'json' property in the AJAX call and send back always a JSON like: {success: false, content: "<form>form-content</form>"} or {success: true, content: ""} and change $('#myModalContent').html(result); with $('#myModalContent').html(result.content); in your code.

Other things to note

• In your code you close the modal ($('#myModal').modal('hide');) and right after you do a redirect: you can omit the closing of the modal
• After $('#myModalContent').html(result); there is a call to bindForm() itself, but it does nothing and can be removed