Uncaught Type Error: $(...)DataTable is not a function

Uncaught Type Error: $(...)DataTable is not a function

user123455user123455 Posts: 4Questions: 1Answers: 0

Using DataTables and YADCF in SharePoint 2010 (no access to master page). Works fine in IE. Works intermittently in Chrome Version 50.0.2661.102 m. When it doesn't work I get the above error. I've tried changing the [tag: $] to [tag:jQuery]. I've made sure that the [tag: AJAX] is the very last call after everything else has been loaded and (think) I addressed the async error Chrome sometimes produced.

Another issue that happens in both Chrome and IE that could be related: when the YADCF [tag: select2] filter is cleared, the entire SharePoint page gets stuck at the top. The scrollbar won't work. The page becomes unusable until reloading.

Any thoughts or ideas would be appreciated. Thanks All and Thanks Allan.

<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/jquery-1.11.3.min.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/jquery.dataTables.yadcf.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/moment-with-locales.min.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/select2.full.min.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/chosen.jquery.min.js"></script>


<link rel="stylesheet" type="text/css" href="https:/mysite/SiteAssets/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https:/mysite/SiteAssets/jquery.dataTables.yadcf.css">
<link rel="stylesheet" type="text/css" href="https:/mysite/SiteAssets/select2.css">
<link rel="stylesheet" type="text/css" href="https:/mysite/SiteAssets/chosen.min.css">

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead><th>Name</th><th>No.</th><th>Date</th><th>Memo</th><th>Classification</th><th>Class2</th><th>Class3</th> </thead>
</table>

<script type="text/javascript">

ExecuteOrDelayUntilScriptLoaded(AMDB, 'sp.ui.pub.ribbon.js');


function AMDB(){ 

var call = $.ajax({
                url: "https:/mysite/_vti_bin/listdata.svc/AM?$select=Title,Number,Date,Name,Classification/Classification,Class2/Class2,Class3/Class3&$expand=Classification,Class2,Class3",
                async: "true",
                type: "GET",
                dataType: "json",
                headers: {Accept: "application/json;odata=verbose"}
            });//close ajax call

call.done(function (data,textStatus, jqXHR){

        myData = data.d.results;
        var dtTable = $('#example').DataTable({
        responsive: true,
        data: myData,
        columns:[
            {data:"Title"},
            {data:"Number"},
            {data:"Date","render": function (data, type, full, meta) {return moment.utc(data, "x").format('l');}},
            {data:"Name","render":function(data, type, full, meta){return'<a href="https:/mysite/AM/'+data+'">Click here</a>';}},
            {data: "Classification.results[, ].Classification"},
            {data: "Class2.results[, ].Class2"},
            {data: "Class3.results[, ].Class2"}
            ],
        stateSave: true

        }); //close DataTable

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 57,233Questions: 1Answers: 9,112 Site admin
    Answer ✓

    My guess is that jQuery is being loaded twice or more on the page. Is that correct? The reason why it might work intermittently will be because of the async nature of the Ajax call and its variable timing. Sometimes it might complete (particularly if from cache) before the second jQuery has loaded and therefore will work, otherwise it might take longer and the second jQuery loads, and thus it doesn't work.

    Otherwise, I don't see anything else wrong with the above!

    Allan

  • user123455user123455 Posts: 4Questions: 1Answers: 0

    Hi Allan,

    I took a look at the network activity and found the page calling:

    1. jquery-1.7.2.min.js, called from the Master site jQuery library
    2. jquery-1.11-3.min.js, called from my script above
    3. jquery.min.js, called from the Master DTAccessibility scripts

    So I removed my call to v1.11 and everything still seems to work!

    Thanks!

  • user123455user123455 Posts: 4Questions: 1Answers: 0

    Actually I spoke too soon. Still getting the intermittent Chrome error. Seems to work when a file called jquery-ui.js loads before jquery-1.7.2.min.js. I don't know how to force that

    AM6.aspx:798 Uncaught TypeError: $(...).DataTable is not a function

  • allanallan Posts: 57,233Questions: 1Answers: 9,112 Site admin
    Answer ✓

    Its really difficult to say without being able to see the page or even the code. All I can really say is that the load order should be:

    1. jQuery
    2. jQuery UI
    3. DataTables

    2 and 3 can be swapped and you shouldn't load more than one of each.

    Allan

  • user123455user123455 Posts: 4Questions: 1Answers: 0

    Hi Allan. I think there is a problem with the master site files, which I can't control. If I get to the bottom of it I'll let you know. But your suggestion definitely improved the success rate with Chrome. Thanks for your help.

This discussion has been closed.