Tablesorter not working on MVC3 web app on Visual Studio 2010?
To reproduce the problem:
- open Visual Studio 2010
- create a new ASP.NET MVC 3 Web Application
-
Replace Views/Shared/_Layout.cshtml with:
<!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> @* This doesn't work and I don't know why *@ <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.tablesorter.min.js")" type="text/javascript"></script> @*This works*@ @*<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> *@ </head> <body> <div class="page"> <div id="main"> @RenderBody() </div> </div> </body> </html> -
Replace Views/Home/Index.html with:
<h2>debug jquery Kano</h2> <p> testing </p> <table id="theTable" class="tablesorter"> <thead> <tr><th>Tic</th><th>Tac</th><th>Toe</th></tr> </thead> <tbody> <tr><td>o</td><td>o</td><td>x</td></tr> <tr><td>x</td><td>o</td><td>o</td></tr> <tr><td>o</td><td>x</td><td>x</td></tr> </tbody> </table> <script type="text/javascript"> // $(function () { // alert("$: jQuery found!"); // }); $(document).ready(function () { $("#theTable").tablesorter(); }); </script> -
Download jquery.tablesorter.min.js from http://tablesorter.com and put into /Scripts directory.
- Build and run the app.
As you will hopefully see, the tablesorter call in Index.cshtml doesn’t seem to successfully execute.
Thank you for your help!
Cheers,
Kevin
The problem seems to be in the way that Javascript is cached. The workaround is to close all instances of the browser between runs and to minimize the use of the back buttons on the browser.