title: Displaying bootstrap Modal on WebGrid Edit using JSON not working MVC
body: <p>I have a WebGrid with an Edit button. When clicking the Edit button I want the modal to popup with the data in it. I have created the partialView and the bootstrap Modal. The Modal DOES work, I have tested it, but when I add in the success function, then the modal doesnt work :</p>
  
  <pre><code> $.ajax({
       url: '/Pipeline/Edit_GetPipelineInfo/',
       data: JSON.stringify(PipelineDetails),
       type: 'POST',
       contentType: 'application/json; charset=utf-8',
       success: function (data) {
           var m = $('#EditModal');
           m.find('.modal-body').html(data);
           m.modal('show');
  }
  });
  </code></pre>
  
  <p>Below is my Bootstrap Modal:</p>
  
  <pre><code>&lt;div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
  &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
              &lt;h4 class="modal-title" id="myModalLabel"&gt;Add New Pipeline Details&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Below is the whole JSON query :</p>
  
  <pre><code>$(function () {
              $('.edit-mode').hide();
              $('.edit-user').on('click', function () {
                  var tr = $(this).parents('tr:first');
                  var PLID = tr.find("#pkiPipeline").html();
                  var PLAccumulated_Length = tr.find("#lblAccumulated_Length").val();
                  var PLElevation = tr.find("#lblElevation").val();
                  var PLPipe_Outside_Diameter = tr.find("#lblPipe_Outside_Diameter").val();
                  var PLWall_Thickness = tr.find("#lblWall_Thickness").val();
                  var PLControl_Point_Description = tr.find("#lblControl_Point_Description").val();
                  var PLControl_Point_Size = tr.find("#lblControl_Point_Size").val();
                  var PLProjectID = tr.find(".fkiProjectID").val();
  
                  var PipelineDetails =
                  {
                      "pkiPipeline": PLID,
                      "Accumulated_Length": PLAccumulated_Length,
                      "Elevation": PLElevation,
                      "Pipe_Outside_Diameter": PLPipe_Outside_Diameter,
                      "Wall_Thickness": PLWall_Thickness,
                      "Control_Point_Description": PLControl_Point_Description,
                      "Control_Point_Size": PLControl_Point_Size,
                      "fkiProjectID": PLProjectID
                  };
                  $.ajax({
                      url: '/Pipeline/Edit_GetPipelineInfo/',
                      data: JSON.stringify(PipelineDetails),
                      type: 'POST',
                      contentType: 'application/json; charset=utf-8',
                      success: function (data) {
                          var m = $('#EditModal');
                          m.find('.modal-body').html(data);
                          m.modal('show');
                     }
                  });
              });
          });
  </code></pre>
  
  <p>Just in case this is needed as well, below is my WebGrid:</p>
  
  <pre><code>&lt;div id="gridContent" style="font-family: Arial; padding: 20px; overflow:auto;height:380px" class="col-md-12"&gt;
  @grid.GetHtml(tableStyle: "webgrid-table",
      headerStyle: "webgrid-header",
      footerStyle: "webgrid-footer",
      alternatingRowStyle: "webgrid-alternating-row",
      selectedRowStyle: "webgrid-selected-row",
      rowStyle: "webgrid-row-style",
      mode: WebGridPagerModes.All,
      columns:
          grid.Columns(
           grid.Column("pkiPipeline", "Node Nr.", format: @&lt;text&gt;  &lt;span class="display-mode"&gt;@item.pkiPipeline &lt;/span&gt; &lt;label id="pkiPipeline" class="edit-mode"&gt;@item.pkiPipeline&lt;/label&gt; &lt;/text&gt;, style: "col1Width"),
           grid.Column("Accumulated_Length", "Accumulated Length", format: @&lt;text&gt;  &lt;span class="display-mode"&gt; &lt;label id="lblAccumulated_Length"&gt;@item.Accumulated_Length&lt;/label&gt; &lt;/span&gt; &lt;input type="text" id="Accumulated_Length" value="@item.Accumulated_Length" class="edit-mode" /&gt;&lt;/text&gt;, style: "col2Width"),
           grid.Column("Elevation", "Elevation", format: @&lt;text&gt; &lt;span class="display-mode"&gt; &lt;label id="lblElevation"&gt;@item.Elevation&lt;/label&gt; &lt;/span&gt;  &lt;input type="text" id="Elevation" value="@item.Elevation" class="edit-mode" /&gt; &lt;/text&gt;, style: "col2Width"),
           grid.Column("Pipe_Outside_Diameter", "Pipe Outside Diameter", format: @&lt;text&gt; &lt;span class="display-mode"&gt; &lt;label id="lblPipe_Outside_Diameter"&gt;@item.Pipe_Outside_Diameter&lt;/label&gt; &lt;/span&gt;  &lt;input type="text" id="Pipe_Outside_Diameter" value="@item.Pipe_Outside_Diameter" class="edit-mode" /&gt; &lt;/text&gt;, style: "col2Width"),
           grid.Column("Wall_Thickness", "Wall Thickness", format: @&lt;text&gt; &lt;span class="display-mode"&gt; &lt;label id="lblWall_Thickness"&gt;@item.Wall_Thickness&lt;/label&gt; &lt;/span&gt;  &lt;input type="text" id="Wall_Thickness" value="@item.Wall_Thickness" class="edit-mode" /&gt; &lt;/text&gt;, style: "col2Width"),
           grid.Column("Control_Point_Description", "Control Point Description", format: @&lt;text&gt; &lt;span class="display-mode"&gt; &lt;label id="lblControl_Point_Description"&gt;@item.Control_Point_Description&lt;/label&gt; &lt;/span&gt;  &lt;input type="text" id="Control_Point_Description" value="@item.Control_Point_Description" class="edit-mode" /&gt; &lt;/text&gt;, style: "col2Width"),
           grid.Column("Control_Point_Size", "Control Point Size", format: @&lt;text&gt; &lt;span class="display-mode"&gt; &lt;label id="lblControl_Point_Size"&gt;@item.Control_Point_Size&lt;/label&gt; &lt;/span&gt;  &lt;input type="text" id="Control_Point_Size" value="@item.Control_Point_Size" class="edit-mode" /&gt; &lt;/text&gt;, style: "col2Width"),
           grid.Column("Action", format: @&lt;text&gt;
                  &lt;input type="hidden" class="fkiProjectID" value="@item.fkiProjectID" /&gt;
                  &lt;button class="edit-user display-mode"&gt;Edit&lt;/button&gt;
                  &lt;button class="save-user edit-mode"&gt;Save&lt;/button&gt;
                  &lt;button class="cancel-user edit-mode"&gt;Cancel&lt;/button&gt;
          &lt;/text&gt;, style: "col3Width", canSort: false)
         ))
  &lt;/div&gt;
  </code></pre>
  
  <p>So again, the modal does popup when I remove the "success" in the $ajax section, but I need that to pass through the Model to my Controller(Or as far as I have seen/understand). Is there something to do with the "success" that it does not work ?</p>