title: Modal Popup will not show if i do ajax-based paging inside my WebGrid
body: <p>I am working on an asp.net mvc5 web application, and i am facing a problem as jquery is not loading if i do ajax paging inside my webgrid. 
  I got the following.The main view which have the grid:-</p>
  
  <pre><code>    @model SkillManagement.Models.PagedList&lt;SkillManagement.Models.Phone&gt;
      @{
          ViewBag.Title = "Phone List";
      }
  
      &lt;h1&gt;Phone List&lt;/h1&gt;
      &lt;div class="well"&gt;
         @using (Html.BeginForm("index", null, FormMethod.Get))
          {
  
              &lt;div style="margin-top:17px;"&gt;
                  @{
                  var grid = new WebGrid(
                              canPage: true,
                              rowsPerPage: Model.PageSize,
                              canSort: true,
                              ajaxUpdateContainerId: "grid");
  
                  grid.Bind(Model.Content, rowCount: Model.TotalRecords, autoSortAndPage: false);
                  grid.Pager(WebGridPagerModes.All);
  
                  @grid.GetHtml(htmlAttributes: new { id = "grid" },   // id for ajaxUpdateContainerId parameter
                  fillEmptyRows: false,
                  tableStyle: "table table-bordered table-hover",
                  mode: WebGridPagerModes.All,
                  columns: grid.Columns(
                    grid.Column("PhoneId", "ID"),
                   //code goes here
                    grid.Column(header: "Action", canSort: false, style: "action",
                      format: @&lt;text&gt;
                         @Html.Raw("&lt;a data-modal='' href='/phone/details/" + item.PhoneId + "' id='" + item.PhoneId + "' title='Detail'&gt; &lt;span class='glyphicon glyphicon-search'&gt; &lt;/span&gt; &lt;/a&gt;")
                         @Html.Raw("&lt;a data-modal='' href='/phone/edit/" + item.PhoneId + "' id='" + item.PhoneId + "' title='Edit'&gt; &lt;span class='glyphicon glyphicon-edit'&gt; &lt;/span&gt; &lt;/a&gt;")
                         @Html.Raw("&lt;a data-modal='' href='/phone/delete/" + item.PhoneId + "' id='" + item.PhoneId + "' title='Delete'&gt; &lt;span class='glyphicon glyphicon-trash'&gt; &lt;/span&gt; &lt;/a&gt;")
                      &lt;/text&gt;)
  
                  ));
                  }
  
  
              &lt;/div&gt;
          }
      &lt;/div&gt;
  
  
      &lt;!-- modal placeholder--&gt;
      &lt;div id='myModal' class='modal fade in'&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div id='myModalContent'&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  @section scripts{
      @Scripts.Render("~/scripts/appjs/phones.js")
  }
  </code></pre>
  
  <p>and the _partial view which will be rendered as a modal popup:-</p>
  
  <pre><code>@model SkillManagementTDMGroup.Models.Phone
  
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
          &lt;h3 class="modal-title"&gt;Edit Phone&lt;/h3&gt;
      &lt;/div&gt;
  
  
      @using (Html.BeginForm())
      {
          @Html.AntiForgeryToken()
          @Html.HiddenFor(m=&gt;m.PhoneId)
  
          &lt;div class="modal-body"&gt;
  
             //code goes here...
              &lt;input class="btn btn-primary" type="submit" value="Save" /&gt;
              &lt;button class="btn btn-warning" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
      }
      &lt;script&gt;
          $("form").removeData("validator");
          $("form").removeData("unobtrusiveValidation");
          $.validator.unobtrusive.parse("form");
      &lt;/script&gt;
  </code></pre>
  
  <p>and here is the phones.js:-</p>
  
  <pre><code>$(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 () {
              var isValid = true; // assume all OK
              $('form').validate(); // perform validation on the form
              $('input[type="text"]').each(function (index, item) { // could change selector to suit e.g $('input, textarea').each(..            
                  if (!$(this).valid()) {
                      isValid = false; // signal errors
                      return false; // break out of loop   
                  }
              })
              if (!isValid) {
                  return false; // exit
              }
              $('#progress').show();
              $.ajax({
                  url: this.action,
                  type: this.method,
                  data: $(this).serialize(),
                  success: function (result) {
                      if (result.success) {
                          $('#myModal').modal('hide');
                          $('#progress').hide();
                          //location.reload();
                          alert(result.message);
                      } else {
  
                          $('#progress').hide();
                          $('#myModalContent').html(result);
                          bindForm();
                      }
                  }
              });
              return false;
          });
      }
  </code></pre>
  
  <p>now when i visit the main view the modal popup will work well, but if i do some paging inside the webgrid and i click to render the partial view as modal popup i will get the following exception :-</p>
  
  <pre><code>Unhandled exception at line 51, column 9 in http://localhost:58652/phone/edit/3
  
  0x800a1391 - JavaScript runtime error: '$' is undefined
  </code></pre>
  
  <p>on the following Script section inside the partial view:-</p>
  
  <pre><code>&lt;script&gt;
              $("form").removeData("validator");
              $("form").removeData("unobtrusiveValidation");
              $.validator.unobtrusive.parse("form");
          &lt;/script&gt;
  </code></pre>