jQuery Datatable working but yadcf is not in MVC

jwebster77
jwebster77 used Ask the Experts™
on
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

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
replace :
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
by :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

replace :
<script src="~/DataTables/datatables.js"></script>
by :
<script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.3/jquery.dataTables.yadcf.min.js" integrity="sha256-nX2mPo5tTUWsDUalF2TgsIn8mKkjzrkc/XMHbfpRfF0=" crossorigin="anonymous"></script>

replace :
<script src="~/yadcf-master/jquery.dataTables.yadcf.css"></script>
by :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.3/jquery.dataTables.yadcf.min.css" integrity="sha256-KSWWswI2Ear5jEGh5gGOqdBxo0shanVqa1AV/PHQBLI=" crossorigin="anonymous" />

Author

Commented:
Hi, it is still not working.  I commented out the css scripts(since I do not need them) and added the lines you suggested, but get the error I attached.  I just added a simple yadcf code to see if it works and again the datatable is working but not the yadcf.  Thank you.

@model IEnumerable<HelpDeskSupport.Models.KnowledgeBaseModel>

@{
    Layout = null;
}

<!DOCTYPE html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script src="~/Yadcf/jquery.dataTables.yadcf.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.3/jquery.dataTables.yadcf.min.js" integrity="sha256-nX2mPo5tTUWsDUalF2TgsIn8mKkjzrkc/XMHbfpRfF0=" crossorigin="anonymous"></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>
            </tr>
        }
    </tbody>
</table>


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

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

        yadcf.init(oTable, [
            { column_number: 0 }]);

    });
</script>

Open in new window

Error.JPG
leakim971Multitechnician
Top Expert 2014

Commented:
this line 12 should be replaced by the 14, currently you added twice the same plugin
I believe you also need to add the jquery.datatble plugin else the yadcf fail to find it and it's probably your current issue

Author

Commented:
Hi, thank you very much for your time and help.  I found the solution was something else.  That is to move the code to the index page, as I guess the tabs(including the one that contains the yadcf) are rendered on the index page.  I added the code below.  Thank you very much again.

@{
    ViewBag.Title = "Index";
}

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#firstTab">View All</a></li>
    <li><a data-toggle="tab" href="#secondTab">Add New</a></li>
    <li><a data-toggle="tab" href="#thirdTab">Knowledge</a></li>
    <li><a data-toggle="tab" href="#fourthTab">IT Tasks</a></li>
</ul>

<div class="tab-content">
    <div id="firstTab" class="tab-pane fade in active">@Html.Action("ViewAll")</div>
    <div id="secondTab" class="tab-pane fade in">@Html.Action("AddOrEdit")</div>
    @*<div id="secondTab" class="tab-pane fade in">@Html.Action("EditOneRecord")</div>*@
    <div id="thirdTab" class="tab-pane fade in">@Html.Action("ViewAllKnowledge")</div>
    <div id="fourthTab" class="tab-pane fade in">@Html.Action("ViewAllTasks")</div>
</div>

@section scriptsKnowledge
        {
    <script src="~/DataTables/datatables.js"></script>
    @*<script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.3/jquery.dataTables.yadcf.min.js" integrity="sha256-nX2mPo5tTUWsDUalF2TgsIn8mKkjzrkc/XMHbfpRfF0=" crossorigin="anonymous"></script>*@
    <script src="~/Yadcf/jquery.dataTables.yadcf.js"></script>

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

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

            yadcf.init(oTable, [
                { column_number: 0 }]);
        }

        $(function () {
            yadcfTable();
        });
    </script>
}

Open in new window

Move the code to the index page, as I guess the tabs(including the one that contains the yadcf) are rendered on the index page.  I added the code below.  Thank you very much again.

@{
    ViewBag.Title = "Index";
}

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#firstTab">View All</a></li>
    <li><a data-toggle="tab" href="#secondTab">Add New</a></li>
    <li><a data-toggle="tab" href="#thirdTab">Knowledge</a></li>
    <li><a data-toggle="tab" href="#fourthTab">IT Tasks</a></li>
</ul>

<div class="tab-content">
    <div id="firstTab" class="tab-pane fade in active">@Html.Action("ViewAll")</div>
    <div id="secondTab" class="tab-pane fade in">@Html.Action("AddOrEdit")</div>
    @*<div id="secondTab" class="tab-pane fade in">@Html.Action("EditOneRecord")</div>*@
    <div id="thirdTab" class="tab-pane fade in">@Html.Action("ViewAllKnowledge")</div>
    <div id="fourthTab" class="tab-pane fade in">@Html.Action("ViewAllTasks")</div>
</div>

@section scriptsKnowledge
        {
    <script src="~/DataTables/datatables.js"></script>
    @*<script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.3/jquery.dataTables.yadcf.min.js" integrity="sha256-nX2mPo5tTUWsDUalF2TgsIn8mKkjzrkc/XMHbfpRfF0=" crossorigin="anonymous"></script>*@
    <script src="~/Yadcf/jquery.dataTables.yadcf.js"></script>

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

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

            yadcf.init(oTable, [
                { column_number: 0 }]);
        }

        $(function () {
            yadcfTable();
        });
    </script>
}

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial