title: Trigger modal popup in mvc form with a button click
body: <p>I have this view in mvc in which I display details for a model. The modal popup was working fine until I didn't put it in form block. Now its only posting back instead of displaying the popup.</p>
  
  <p>This is the view I have:</p>
  
  <pre><code>@using App.Portal.WebUI.Controllers
  @using MvcPaging
  @model IPagedList&lt;App.Models.Device&gt;
  
      @{
          ViewBag.Title = "Manage Devices";
      }
  
  &lt;h2&gt;Manage Devices&lt;/h2&gt;
  @Html.ActionLink("Add New Device", "Manage", "Handhelds", new { @class = "editUser btn btn-info" })
  &lt;button id="showInactive" class="btn btn-primary"&gt;Show Inactive Devices&lt;/button&gt;
  &lt;br /&gt;&lt;br /&gt;
  @using (Ajax.BeginForm("Home", "Handhelds",
      new AjaxOptions {UpdateTargetId = "grid-list", HttpMethod = "get", LoadingElementId = "loading", OnBegin = "beginPaging", OnSuccess = "successPaging", OnFailure = "failurePaging"},
      new {id = "frm-search"}))
  {
      &lt;div class="input-append"&gt;
          &lt;input class="span2" id="appendedInputButton" type="text" name="handheld" placeholder="Enter Text" /&gt;
          &lt;button class="btn" type="submit"&gt;
              &lt;i class="icon-search"&gt;&lt;/i&gt;&amp;nbsp;Search&lt;/button&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div id="grid-list"&gt;
          &lt;div class="table-responsive"&gt;
              &lt;table id="dataTable" class="table table-striped"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;No&lt;/td&gt;
                      &lt;td&gt;Device ID&lt;/td&gt;
                      &lt;td&gt;Serial Number&lt;/td&gt;
                      &lt;td&gt;Options&lt;/td&gt;
                  &lt;/tr&gt;
                  @foreach (var device in Model)
                  {
                      &lt;tr&gt;
                          &lt;td&gt;@device.DeviceID&lt;/td&gt;
                          &lt;td&gt;@device.DeviceIDView&lt;/td&gt;
                          &lt;td&gt;@device.DeviceSerialNumber&lt;/td&gt;
                          &lt;td&gt;
                              @Html.ActionLink("Edit", "Manage", new {id = @device.DeviceID}, new {@class = "editUser btn btn-info"})
                              &lt;button id="btnDeleteHandheld" class="deleteHandheld btn btn-danger" data-id="@device.DeviceID"&gt;Delete&lt;/button&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  }
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('button.btnAddDevice').click(function () {
              $('#addNewDevice').modal('show');
          });
  
          $('button.deleteHandheld').click(function () {
              $("#hfDeviceId").val($(this).data('id'));
              $('#deleteConfirm').modal('show');
          });
  
          $('button.deleteDeviceConfirm').click(function () {
              $.ajax({
                  url: '@Url.Action("Delete", "Handhelds")',
                  data: { deviceid: $("#hfDeviceId").val() },
                  dataType: "json",
                  type: 'POST',
                  success: function (data) {
                      if (data === "OK") {
                          $('#deleteConfirm').modal('hide');
                          $('#deleteConfirmation').modal('show');
                          setTimeout(function () {
                              location.reload();
                          }, 3000);
                      }
                  },
                  error: function (textStatus, errorThrown) {
                      Success = false;//doesn't goes here
                  }
              });
          });
      });
  
  &lt;/script&gt;
  
  &lt;div id="deleteConfirm" class="modal fade" data-backdrop="static" tabindex="-1" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-body"&gt;
                  &lt;h4&gt;Are you sure you want to remove the device?&lt;/h4&gt;
                  &lt;button class="btn btn-success deleteDeviceConfirm"&gt;Yes&lt;/button&gt;
                  &lt;button class="btn btn-danger" data-dismiss="modal"&gt;No&lt;/button&gt;
                  &lt;input type="hidden" id="hfDeviceId" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="deleteConfirmation" class="modal fade" data-backdrop="static" tabindex="-1" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-body"&gt;
                  &lt;h4&gt;Device removed&lt;/h4&gt;
                  &lt;button class="btn btn-danger btn-block" data-dismiss="modal"&gt;OK&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need the button with id of btnDeleteHandheld to trigger the associated modal popup. What do I need to change? </p>