JQuery dataTables in mvc 5 application

Question

I have an mvc 5 application. And its bein a poblem to add js files to my project.

I wanted to use a webgrid (who only needs jquery-1.10.2.js to work) That js file is already in mvc5 projects by default and its already rendered but not working.

I have this in my layout page (default mvc5 code)

@Scripts.Render("~/bundles/jquery")

and this in BundleConfig.cs (default mvc5 code)

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

I modified BundleConfig.cs with this

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(                       "~/Scripts/jquery-1.10.2.js"));

I had to forget about rendering or adding in bundleConfig wich i figure is the proper way to do. Nothing worked until I used this in the of my layout page:

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

Thats the first thing that made me think that something was going wrong but I had to continue with the project. The question is that now I want to use dataTables instead of webgrid. For this purpose I need to add a new js (jquery.dataTables.js)

Its not working neither adding in the head of layout page or rendering and adding in BunddleConfig...

This is my code on layout page

<head>
<script src="~/Scripts/DataTables-1.10.2/media/js/jquery.dataTables.js" type="text/javascript" charset="utf8"></script>
</head>

This is the code on my view

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

<table id="myTable">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

Of course I added the js file to my project.

The error I get is

0x800a01b6 - JavaScript runtime error: the object doesnt accept the property or method 'dataTable'

Are there other errors in console ? Can you see in source if scripts are rendered. Here is example which shows your code works fine if correct scripts are loaded. jsfiddle.net/4bk0jzm0 — SSA
– SSA, Commented Aug 14, 2014 at 12:58
There is not any other error in console. Yah the code is fine, the problem is that I cant make the application to load scripts properly. — Txentxo Txentxako
– Txentxo Txentxako, Commented Aug 14, 2014 at 13:39

Txentxo Txentxako · Accepted Answer · 2014-08-14 14:37:02Z

1

I found the problem

There are 2 render sections in the layout page.

One in the head and the other one at the end of the file before end body tag

I was rendering at the end and I just moved to the head and everything is working fine

Thank you !!

edited Aug 14, 2014 at 14:37

answered Aug 14, 2014 at 14:30

Txentxo Txentxako

1351 gold badge1 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery dataTables in mvc 5 application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related