[RESOLVED]jQuery datatable with cshtml

I am trying to use jQuery DataTable in my MVC 5 project, but getting and error – 0x800a1391 – JavaScript runtime error: ‘$’ is undefined

Can anybody help?

@model IEnumerable<V1.Models.RPT_GrpSum>

@{
    ViewBag.Title = "Group Summary";
}


<html>
<head>
    <title>DataTables example - Feature enable / disable</title>

    <link rel="stylesheet" type="text/css" href="jquery.dataTables.css">

    <script type="text/javascript" charset="utf8" src="JSLib/jquery.js"></script>
    <script type="text/javascript" charset="utf8" src="JSLib/jquery.dataTables.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {
            var table = $("#example").DataTable({
                "order": [[1, "asc"]]
            });
        });


    </script>
</head>

<body>
    <h2>Breakdown</h2>
    <p></p>
    <p></p>



    <table id="example" class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Group)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Amount)
            </th>
            <th></th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Group)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Amount)
                </td>
            </tr>
        }

    </table>
</body>
</html>

 

Hi,

bhfb

<script type="text/javascript" charset="utf8" src="JSLib/jquery.js"></script>
    <script type="text/javascript" charset="utf8" src="JSLib/jquery.dataTables.js"></script>

make sure ur jquery js file is loading successfully into browser.

Try by giving absolute path to js file instead of relative path.

Hi,

Thanks for the reply. but I have tried this an gives the same error. same line of code works fine with sample html page

Use browsers network trace feature, and you will probably see the js files are not found.

Hi bhfb,

The issue is that you didn’t set the right path of your javascript.

I suggest that you can try the code below:

 <script type="text/javascript" charset="utf8" src="../JSLib/jquery.js"></script>
    <script type="text/javascript" charset="utf8" src="../JSLib/jquery.dataTables.js"></script>

Or you can use the Microsoft CDN javascript library like below:

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
 
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
 
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

Best Regards,

Kevin Shen.

Thanks.

I have tried both above but no luck.

as I mentioned above, the same code works with normal html page. issue is with cshtml only.

regards

Assuming your JSLib folder is in the root, you can do this

<script type="text/javascript" charset="utf8" src="<%=ResolveClientUrl("~/JSLib/jquery.js")%>"></script>
<script type="text/javascript" charset="utf8" src="<%=ResolveClientUrl("~/JSLib/jquery.dataTables.js")%>"></script>

Leave a Reply