We help IT Professionals succeed at work.
Get Started

jQuery Datatable working but yadcf is not in MVC

jwebster77
jwebster77 asked
on
150 Views
Last Modified: 2019-11-27
In my MVC project I created a tab called "Knowledge". I was finally able to make some things work. I implemented a YADCF datatable on it but it is not working. The datatable features appear to be there but not the yadcf. I included the code below and the images of the three errors I get in the console. Please help, thank you!

Here is my code:

       
@model IEnumerable<HelpDeskSupport.Models.KnowledgeBaseModel>

    @{
    Layout = null;
    }

<!DOCTYPE html>

<head>
    
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/yadcf-master/jquery.dataTables.yadcf.css"></script>
    <script src="~/yadcf-master/jquery.dataTables.yadcf.js"></script>
    <script src="~/DataTables/datatables.css"></script>
    <script src="~/DataTables/datatables.js"></script>

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

    </head>
    <table class="display table table-striped table-bordered" id="knowledgeTable">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.KBSubject)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.KBFrom)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.KBAssignedTo)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.KBAssignedDt)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.KBRequestType)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.KBBody)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.KBDateSubmitted)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.KBLocation)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.KBCategory)
            </th>
        </tr>
    </thead>

    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.KBSubject)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.KBFrom)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.KBAssignedTo)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.KBAssignedDt)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.KBRequestType)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.KBBody)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.KBDateSubmitted)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.KBLocation)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.KBCategory)
                </td>
                @*<td>
                    @Html.ActionLink("Edit", "Edit", new { id=item.KBNumber }) |
                    @Html.ActionLink("Details", "Details", new { id=item.KBNumber }) |
                    @Html.ActionLink("Delete", "Delete", new { id=item.KBNumber })
                    </td>*@
            </tr>
        }
    </tbody>
    </table>

    <script>
    $(document).ready(function () {
        'use strict';

        var oTable;
        oTable = $('#knowledgeTable').DataTable({
            stateSave: true
        });

        yadcf.init(oTable, [
            {
            column_number: 0
            //*filter_type: "auto_complete",
            //*text_data_delimiter: ","
        }, {
            column_number: 1
            //*filter_type: "auto_complete",
            //*text_data_delimiter: ","
            //filter_type: "range_number_slider"
        }, {
            column_number: 2
            //filter_type: "date"
        }, {
            column_number: 3
        }, {
            column_number: 4
            //*filter_type: "date"
            //column_data_type: "html",
            //html_data_type: "text",
            //filter_default_label: "Select tag"
        }, {
            column_number: 5
        }, {
            column_number: 6
            //*filter_type: "text",
            //*exclude: true,
            //*exclude_label: '!(not)'
        }, {
            column_number: 7
            //*filter_type: "date"
        }, {
            column_number: 8
        }
        ]);
    });
                                                                        
    </script>

Open in new window



Uncaught SyntaxError: Unexpected token '.'                                                                 datatables.css:16

Uncaught SyntaxError: Unexpected token '{'                                                             jquery-3.4.1.min.js:2

jQuery.Deferred exception: Cannot read property 'sAjaxSource' of undefined TypeError: Cannot read property 'sAjaxSource' of undefined
    at isDOMSource (http://localhost:41073/yadcf-master/jquery.dataTables.yadcf.js:3684:20)
    at initAndBindTable (http://localhost:41073/yadcf-master/jquery.dataTables.yadcf.js:3725:8)
    at Object.init (http://localhost:41073/yadcf-master/jquery.dataTables.yadcf.js:3936:5)
    at HTMLDocument.<anonymous> (http://localhost:41073/Tickets/Index:1056:15)
    at e (http://localhost:41073/Scripts/jquery-3.4.1.min.js:2:29453)
    at t (http://localhost:41073/Scripts/jquery-3.4.1.min.js:2:29755) undefined

Uncaught TypeError: Cannot read property 'sAjaxSource' of undefined
    at isDOMSource (jquery.dataTables.yadcf.js:3684)
    at initAndBindTable (jquery.dataTables.yadcf.js:3725)
    at Object.init (jquery.dataTables.yadcf.js:3936)
    at HTMLDocument.<anonymous> (Index:1056)
    at e (jquery-3.4.1.min.js:2)
    at t (jquery-3.4.1.min.js:2)
isDOMSource      @ jquery.dataTables.yadcf.js:3684
initAndBindTable @ jquery.dataTables.yadcf.js:3725
init             @ jquery.dataTables.yadcf.js:3936
(anonymous)      @ Index:1056
e                @ jquery-3.4.1.min.js:2
t                @ jquery-3.4.1.min.js:2
setTimeout (async)
k.readyException @ jquery-3.4.1.min.js:2
(anonymous)      @ jquery-3.4.1.min.js:2
e                @ jquery-3.4.1.min.js:2
t                @ jquery-3.4.1.min.js:2
setTimeout (async)
(anonymous)      @ jquery-3.4.1.min.js:2
c                @ jquery-3.4.1.min.js:2
fireWith         @ jquery-3.4.1.min.js:2
fire             @ jquery-3.4.1.min.js:2
c                @ jquery-3.4.1.min.js:2
fireWith         @ jquery-3.4.1.min.js:2
t                @ jquery-3.4.1.min.js:2
setTimeout (async)
(anonymous)      @ jquery-3.4.1.min.js:2
c                @ jquery-3.4.1.min.js:2
fireWith         @ jquery-3.4.1.min.js:2
fire             @ jquery-3.4.1.min.js:2
c                @ jquery-3.4.1.min.js:2
fireWith         @ jquery-3.4.1.min.js:2
ready            @ jquery-3.4.1.min.js:2
B                @ jquery-3.4.1.min.js:2

Errors-in-the-console.docx
First-Error.JPGSecond-and-Third-Error.JPG
Comment
Watch Question
This problem has been solved!
Unlock 1 Answer and 5 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant

An Experts Exchange subscription includes unlimited access to online courses.

Get Started
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE