MVC open partial view on Modal Popup Submit button

Question

I've a parent view which contains a table of data. This View contains two modal dialog as shown in below code:-

<div id='myModal' class='modal fade in' data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 400px; height:250px;">
            <div id='firstModelContent'></div>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" id="callBackModal" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content" style="width: auto;">
            <div id='secondModalContent'></div>
        </div>
    </div>
</div>

On each row click of table, firstModal dialog will popup with row data as parameter. Now the requirement is to initiate the second modal popup from the "submit button" of first modal.

I'm able to load a partial view as the firstmodal dialog with row parameters using AJAX. But I'm unable to load a partial view as secondmodal dialog on a button click of firstmodal partial view. Instead while debugging the secondmodal doesn't gets checked. It will simply redirect to partial view on a full screen page. The html link that gets auto-generated from the firstmodal dialog partial view looks like below:-

<a class="btn btn-primary" data-modal="" href="/SampleController/Update?ID=867448&amp;status=Yes" title="Update Details">Yes</a>

And the AJAX code for second modal is like below **in the parent page JavaScript **:-

$(function () {
                $("a[data-modal]").on("click", function (e) {
                    debugger;
                    var $buttonClicked = $(this);
                    //var id = $buttonClicked.attr('data-id');
                    var options = { "backdrop": "static", keyboard: true };
                    $.ajax({
                        type: "GET",
                        url: '@Url.Action("Update", "SampleController")',
                        contentType: "application/json; charset=utf-8",
                        data: { "Id": id },
                        datatype: "json",
                        success: function (data) {
                            debugger;
                            $('#myModalContent').html(data);
                            $('#callBackModal').modal(options);
                            $('#callBackModal').modal('show');

                        },
                        error: function () {
                            alert("Dynamic content load failed.");
                        }
                    });
                //$("#closbtn").click(function () {
                //    $('#callBackModal').modal('hide');
                //});
            });
        });

But the first modal popup on "button" click doesn't open the second modal pop. Can anyone please suggest how to perform this operation? Looking forward to hearing from you.

Answer 1

When you click the link :

<a class="btn btn-primary" data-modal="" href="/SampleController/Update?ID=867448&amp;status=Yes" title="Update Details">Yes</a>

it will not execute your ajax call.

You must change it to "button" :

<button type="button" class="btn btn-primary btn-yes">Yes</a>

jQuery:

$(".btn-yes").on("click", function (e) {
    var $buttonClicked = $(this);
    //var id = $buttonClicked.attr('data-id');
    var options = { "backdrop": "static", keyboard: true };
    $.ajax({
        type: "GET",
        url: '@Url.Action("Update", "SampleController")',
        contentType: "application/json; charset=utf-8",
        data: { "Id": id },
        datatype: "json",
        success: function (data) {
            debugger;
            $('#myModalContent').html(data);
            $('#callBackModal').modal(options);
            $('#callBackModal').modal('show');
        },
        error: function () {
            alert("Dynamic content load failed.");
        }
    });