How can I use JQuery tablesorter plugin into ASP.NET MVC Partial View? When I insert PartialView in View, I'm using ajax.

Question

I have View with table and JQuery tablesorter plugin. It works very well. But, when I try insert table and tablesorter into PartialView and insert this PartialView into View page with Ajax, tablesorter doesn't work.

Into Partial View dont't work jquery. Plugin doesn't get called.

My controller code:

public ActionResult MyTable()
        {
           //query type IQueryable

            return PartialView(query);
        }

My base View code

...
    <% 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 master page header:

    <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 reviewed the actual source from the rendered page yet? It should be apparent from the actual web page what the problem is.

Answer 2

You might find the $(document).ready function is never getting called when you try and render the partial view with ajax, it'd be worth putting an alert or something in there just to confirm this.