DataTables not working in ASP.NET Web Application VS 2013

Question

I am migrating a web application project I built in Visual Studio 2012 into the new ASP.NET Web Application (Web Forms) (4.5) in Visual Studio 2013. It was my understanding from reading that the new structure included jQuery 1.10.2 within the default Site.Master and, thus, any inheriting content page. I have a datatable, built and working fine in the 2012 version. However, when moving the code to 2013, I get a bunch of problems. The first was: 0x800a1391 - JavaScript runtime error: '$' is undefined So, I thought maybe it doesn't include jQuery I as I expected. So I added"

 <script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>

using the jquery file that was in the default project. That gave me the error:

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'dataTable'

That was expected since I didn't have a reference yet. So I added the same file I used for 2012:

<script src="/Scripts/jquery.dataTables.min.js"></script>

No effect. Same error. So I replaced it with:

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js" type="text/javascript"></script>

Again, no effect. So, frustrated, I added a new web form (not from a Master page). I put in a simple DataTable, and ran it with my original files:

<script src="/js/jquery-1.9.1.js" type="text/javascript"></script>

And! It didn't work... Last ditch, I put in:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>  
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>  
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js" type="text/javascript"></script>

And it WORKED! I didn't know why, but it worked! So I took these lines and put them into my original content page and it failed. Again, not knowing what DataTables are. Does anyone have any idea what is going wrong?

Thanks in advance!

Answer 1

A friend found me the answer. Apparently, all jQuery must go inside the BODY tag when using the ScriptManager & packages as is the case with the out-of-the-box Web Application. I had created another content tag and put it in the master page's HEAD section so I could put all my jQuery and javascript routines. Once I moved it to the BODY, it was happy with jQuery. There are also NuGet packages for jQuery, jQuery.UI, and jQuery.Datatables that integrate the latest versions into your web app.

Answer 2

The problem could be the path of the file. If you put you files in the sub-folders then you need to use resolve url while adding the java-script or jQuery files.

<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/jquery-1.10.2.min.js")%>'>
</script>

Here are some good links

1. Using scripts in a master page with ASP.NET MVC