title: Error in jquery Dialog when used with jquery tablesorter pager JavaScript runtime error: Object doesn't support property or method 'dialog'
body: <p>I have a Admin screen in Area = "PrivateCEQRApplication". I am using Jquery table sorter (<a href="http://tablesorter.com/docs/" rel="nofollow">http://tablesorter.com/docs/</a>) and jquery dialog (<a href="https://jqueryui.com/dialog/#default" rel="nofollow">https://jqueryui.com/dialog/#default</a>) in that page. I am using MVC4 and razor.</p>
  
  <p>My view is</p>
  
  <pre><code>@model CEQRApplication.Areas.PrivateCEQRApplication.Models.CEQRUser
  
  @{
      ViewBag.Title = "AdminPage";
      Layout = "~/Views/Shared/_LogoutLayout.cshtml";
  }
  
  &lt;link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/jquery-ui.css")" /&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"&gt;&lt;/script&gt;
  
  
  &lt;script src="@Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript"&gt;   &lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.tablesorter.mod.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function (event) {
  
      $(".tablesorter")
              .tablesorter({
                  widthFixed: true,
                  cssChildRow: "expand-child",
                  widgets: ["zebra"],
                  headers: { 0: { sorter: false } }
                  , onRenderHeader: function () {
                      this.wrapInner("&lt;span&gt;&lt;/span&gt;");
                  }
                  , debug: false
              })
              .tablesorterPager({
                  positionFixed: false,
                  container: $("#pager")
              })
              .bind('pagerChange', function () {
                  $('.expand-child td').hide();
              });      
  
  
      $('.buttonsAddUser').click(function (event) {
  
          $("#editResult").dialog({
              title: 'Add User',
              autoOpen: false,
              resizable: false,
              height: 500,
              width: 650,
              show: { effect: 'drop', direction: "up" },
              modal: true,
              draggable: true,
              open: function (event, ui) {
                  $(".ui-dialog-titlebar-close").hide();
                  $(this).load('@Url.Action("AddUser", "Admin")');
              },
              close: function (event, ui) {
                  $(this).dialog('close');
              }
          });
  
          $("#editResult").dialog('open');
  
          return false;
      });    
  
   });
  &lt;/script&gt;
  </code></pre>
  
  <p>my button and div for rendering dialog</p>
  
  <pre><code>&lt;td style="padding-left:30px;"&gt;
      &lt;div class="buttonsAddUser"&gt;
          &lt;img src="@Href("~/Content/themes/base/Images/add-users.png")" style="height: 2.0em; width: 3.0em; vertical-align:middle; display:inline-block; cursor:pointer;" id="AddRow" alt="Add User" title="Add User" /&gt;
           Add New User
       &lt;/div&gt;
  &lt;/td&gt;
  &lt;div id="editResult" title="Edit User"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now the issue is when i use these script only on the page and remove table sorter</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/jquery-ui.css")" /&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>dialog works </p>
  
  <p>and when i use these script only on the page and remove dialog </p>
  
  <pre><code>&lt;script src="@Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript"&gt;   &lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.tablesorter.mod.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>sorter works</p>
  
  <p>but if i put the j-query script for both sorter and dialog dialog throws the error</p>
  
  <p>**
  0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'dialog'**</p>
  
  <p>I am using tablesorter.js which is dependent on jquery.js file. Modal dialog is also dependent on jquery-1.9.1.js. Since 2 jqueries can't be on the same template how can I get both tablesorter.js and jquery dialog to work together? is there any way i can resolve this issue I will really appreciate the help.</p>
  
  <p>Also, I am not very clear on the concept of bundling. So if i want to bundle the scripts shown above how will i do it.</p>
  
  <p>Thanks</p>