title: MVC open partial view on Modal Popup Submit button
body: <p>I've a parent view which contains a table of data. This View contains two modal dialog as shown in below code:-</p>
  
  <pre><code>&lt;div id='myModal' class='modal fade in' data-keyboard="false" data-backdrop="static"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content" style="width: 400px; height:250px;"&gt;
              &lt;div id='firstModelContent'&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="modal fade" tabindex="-1" id="callBackModal" data-keyboard="false" data-backdrop="static"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content" style="width: auto;"&gt;
              &lt;div id='secondModalContent'&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>I'm able to load a partial view as the firstmodal dialog with row parameters using AJAX. But <strong>I'm unable to load a partial view as secondmodal dialog on a button click of firstmodal partial view</strong>. 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:-</p>
  
  <pre><code>&lt;a class="btn btn-primary" data-modal="" href="/SampleController/Update?ID=867448&amp;amp;status=Yes" title="Update Details"&gt;Yes&lt;/a&gt;
  </code></pre>
  
  <p>And the AJAX code for second modal is like below **in the parent page JavaScript **:-</p>
  
  <pre><code>$(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');
                  //});
              });
          });
  </code></pre>
  
  <p>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.</p>