How do I plug in jQuery and CSS in a DNN Module? - dotnetnuke

Question

I have looked at this article by Ventrian and another here in our community. I cannot seem to get this to work, so here is what my module looks like in a nutshell.
View.aspx
<%# Control language="C#" Inherits="KDMC.Modules.kdmc_userTraderListView.View" AutoEventWireup="false" CodeBehind="View.ascx.cs" %>
<%# Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>
<asp:Panel ID="Panel1" runat="server">
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" OnItemDataBound="traderWorks">
<HeaderTemplate>
<table id="datatable">
<thead>
<tr>
<th>Some heading</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("SomeData")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:SiteSqlServer2 %>" SelectCommand="SELECT Whatever from WHerever"></asp:SqlDataSource>
<script type="text/javascript">
$('#datatable').dataTable();
</script>
<dnn:DnnCssInclude runat="server" FilePath="~/DesktopModules/<modulename>/media/css/jquery.dataTables.css" />
<dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/<modulename>/media/js/jquery.js" />
<dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/<modulename>/media/js/jquery.dataTables.min.js" />
</asp:Panel>
According to the articles and anytime I have ever plugged css and jquery into a skin file this should work! What is causing DNN not to see it in my module?
Edited
I think I see the issue. I think DNN is seeing the files that are plugged in using the <dnn:DnnCssInclude runat="server> or <dnn:DnnJsInclude runat="server> tags. The module does not see
<script type="text/javascript">
$('#datatable').dataTable();
</script>
How do I fix this? According to this article in our community that it needs to be instantiated. How do I do this?

Answer 1

My guess is the problem is likely due to the relative placement of the various scripts and content. If your using FireFox, you can hit Ctrl-Shift-J to bring up the error console and it will display Javascript errors when you refresh the page.
Anytime you're dealing with Javascript in DNN (or ASP.NET), it's important to look at the rendered code (by doing a view source (Ctrl-U) on the page) so you can see what is actually being generated by the code. Assuming you're using a recent version of DNN (6.x or greater) you shouldn't need to instantiate jQuery but you can verify that by looking at the source and verifying jQuery is being included.
You should verify that your JsIncludes are being rendered before your "$('#datatable').dataTable();" script and that the datatable object is being rendered above the that script as well. If not, you can specify the placement of the JsInclude bits by specifying the provider within the call (i.e. ForceProvider="DnnPageHeaderProvider")