jQuery DataTable won't work in ASP.NET MVC?

Question

I have an index.cshtml file with a simple table. I downloaded the css file and the min js file for the dataTable plugin. I put the following code in BundleConfig.cs:

bundles.Add(new ScriptBundle("~/bundles/table").Include(
                        "~/Scripts/jquery.dataTables.min.js"));

 bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css",
                        "~/Content/themes/base/jquery.dataTables.css"));
        }

In my _Layout.cshtml, I have this:

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/table")

Finally, in my index.cshtml, I put the following code above my table:

<script type="text/javascript">
    $(document).ready(function () {
        $('#patients').dataTable();
    });
    </script>

I noticed when I run the page with the table and view the source, I see the jquery file at the bottom and my script at the top, so I get the error:

Uncaught ReferenceError: $ is not defined

Is BundleConfig the correct place to add new js and css files? How do I do it if I don't want it to be there? Why is jquery script run at the bottom of the page?

I added the following to _Layout.cshtml:

@Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/table")

but now I get this error:

Uncaught TypeError: Object [object Object] has no method 'dataTable'

When I view the source, I see the dataTables.min.js is not there, but I have included it in bundles/table.

I thought modernizer includes it, that is called in my _Layout.cshtml. — Xaisoft, Apr 26 '13 at 20:04
I added it to my _layout.cshtml, but now I get another error. — Xaisoft, Apr 26 '13 at 20:05
@ArtyomNeustroev - It would appear not, I added it, but I get another error now. I updated my post. — Xaisoft, Apr 26 '13 at 20:08
Do you have any 404 errors in console? Did you provide a valid location for your datatable.js file? — Artyom Neustroev, Apr 26 '13 at 20:12
@ArtyomNeustroev - Jquery is loading, but the dataTables script is not. — Xaisoft, Apr 26 '13 at 20:17
Well, when I look at the source, my script is called before jquery, so I know why it is undefined, but I thought modernizer would run jquery before my script since it is included in the _layout.cshtml file. — Xaisoft, Apr 26 '13 at 20:02

score 7 · Accepted Answer · edited May 23 '17 at 12:19

7

By default if you have Debug="True" in your web.config, minimized javascript files are not included in bundles. Add this to your BundleConfig.cs (or use a non-minified javascript file, or run in non-debug mode):

#if DEBUG
            //by default all minimized files are ignored in DEBUG mode. This will stop that.
            bundles.IgnoreList.Clear();
#endif

Additional info: Bundler not including .min files

edited May 23 '17 at 12:19

Community

1
1

answered Apr 26 '13 at 21:20

Andrew Lewis

5,176
1
26
31

This was it. It was totally throwing me off. Thanks. – Xaisoft Apr 26 '13 at 22:33
10 months later: thanks!! Finally that headache is gone. – Stachu Feb 25 '14 at 20:05

score 1 · Answer 2 · answered Apr 26 '13 at 20:08

1

Modernizer, out of the box with an asp.net MVC project, has nothing to do with jQuery.

I would update your bundles so you have one for jQuery and one for jQuery plugins, or one that does both. e.g.

bundles.Add(new ScriptBundle("~/bundles/jQuery").Include(
                        "~/Scripts/jquery-{version}.min.js"));
bundles.Add(new ScriptBundle("~/bundles/jQueryPlugins").Include(
                        "~/Scripts/jquery.dataTables.min.js"));

If you add any additional jQuery plugins, then just register them with the jQueryPlugins bundle.

Then make sure that in your _Layout you Render the jQuery bundle first.

@Scripts.Render("~/bundles/jQuery")
@Scripts.Render("~/bundles/jQueryPlugins")

This way you know you always have jQuery included before the plugins.

Note

Also make sure that you have your scripts rendered before your jQuery code which is on your page. e.g.

@Scripts.Render("...")

Before

$(document).ready(function(){ .... }

answered Apr 26 '13 at 20:08

Tim B James

20,084
4
73
103

Tim, jQuery was already there. I added the dataTable one as ~/bundles/tables and added it to my _Layout.cshtml, but it says dataTable is not a method – Xaisoft Apr 26 '13 at 20:10
Tim, I put @Scripts.Render("~/bundles/table") at the top of my page, but when viewing source, I don't see the dataTables plugin script. Also, if it is already rendered with Layout.cshtml, why do I have to put it in my Index.cshtml page as well? – Xaisoft Apr 26 '13 at 20:15
No you don't need it in your Index.cshtml. Just make sure that the code in your Index.cshtml is after the Rendering of the scripts on the _Layout page. – Tim B James Apr 26 '13 at 20:18
I put it at the top, but I don't even see the plugin loaded. – Xaisoft Apr 26 '13 at 20:27
Its calling jquery and then my script. It is not loading the dataTable plugin that I put into ~/bundles/table. – Xaisoft Apr 26 '13 at 20:31
The path to the file correct and exist? /Scripts/jquery.dataTables.min.js is your project online that we can see and inspect the scripts? – Tim B James Apr 26 '13 at 21:13

jQuery DataTable won't work in ASP.NET MVC?

2 Answers2