How can I use the jQuery tablesorter plugin in ASP.NET MVC Partial View? When I embed PartialView in View, I use ajax

Question

I have a View with table and a jQuery tablesorter plugin. It works very well. But, when I try to insert the table and tablesorter into the PartialView and paste this PartialView into the View page with Ajax, tablesorter does not work.

In partial view jquery does not work. The plugin is not called.

My controller code:

public ActionResult MyTable() { //query type IQueryable return PartialView(query); } 

My base code view

 ... <% using (Ajax.BeginForm("MyOrgsTable", new AjaxOptions { UpdateTargetId="MyTable", InsertionMode = InsertionMode.Replace})) { %> <p> Name:&nbsp<%=Html.TextBox("search_org", ViewData["searchName"])%>&nbsp<input type="submit" value="" /> </p> <% } %> <div id="MyTable"> </div> ... 

My partial view code:

 <script type="text/javascript" id="js"> $(document).ready(function() { // call the tablesorter plugin $("table").tablesorter({ headers: { 5: { sorter: "MyDate" }, 6: { sorter: "MyDate" } }, widthFixed: true, widgets: ['zebra'] }); }); </script> <table cellspacing="1" class="tablesorter"> <thead> <tr> ... </tr> </thead> <tbody> <% foreach ( var item in Model ) { %> // some table rows <% } %> </tbody> </table> 

My main page title:

  <script type="text/javascript" src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>"></script> <script type="text/javascript" src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>"></script> <script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.3.2.js") %>"></script> <script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.tablesorter.js") %>"></script> <script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.tablesorter.pager.js") %>"></script> 

Answer 1

Have you looked at the actual source from the displayed page? On the actual web page, it should be obvious that the problem is.

Answer 2

You may find that the $ (document) .ready function is never called when you try to make a partial view with ajax, it would be wise to put a warning or something else to confirm this.