Error : Object doesn't support property or method 'dataTable'

Veera

Hi All

I am facing the issue on : Object doesn't support property or method 'dataTable'
Error i am getting on : "$('#TableID').dataTable( { " in this line
Below is my Code in my custom js file:

function runDataTable(tableID)
{
$('#TableID').dataTable( {
code goes here ...
}
Then I tried to using code : $.noConflict(true); to prevent
conflict from master page.

But i am Unable to get property 'noConflict' of undefined or null reference error.
Below is my .js references in my CEWP webpart in sharepoint:

$.noConflict(true);

       <script type="text/javascript" src="/../sites/site123456/_layouts/15/sp.workflowservices.js"></script>

       <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.js"></script>

       <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>

       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.js"></script>

       <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

       <script type="text/javascript" src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>

       <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.js"></script>

       <script type="text/javascript" src="https://eu001-sp.shell.com/sites/site123456/GDAUAT/jQuery/Code/jquery.placeholder.min.js"></script>

       <script type="text/javascript" src="https://eu001-sp.shell.com/sites/site123456/jQuery/ExportToExcelLinks/jquery.shorten.1.0.js"></script>

        <script type="text/javascript" src="https://eu001-sp.shell.com/sites/site123456/jQuery/Code/GeneralFunctions.js"></script>

Please help me to fix this . If possible please share your ideas to understand to resole it.

Regards,
Veeru

Veera

just to correct : and also $.noConflict(true); code there

before : this line.

allan

Also check you aren't loading jQuery again.

Beyond that, we'd need a link to a test case.

Allan

bindrid

when are you calling runDataTable? Is your page fully loaded when it is called?

Veera

@allan :

Thanks for quick response.

In master page the jQuery reference has been added by Admin team BY using require.config.js file.In this file they refered as :

requirejs.config({
baseUrl: window["shellFramework"].installationFolder,
paths: {
jquery: ['//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min', 'libs/jquery-2.1.3.min'],
jqueryui: ['//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min'],
..etc
}

Because of above require.config.js file I tried to use $.noConflict(true) in my main .js file. Please see in attached screenshot.

What do mean by "need a link to a test case" ? do I need to share our SharePoint site link ? if yes , can we connect offline on this?

-Veera

Veera

@bindrid

Yes the main page will be loaded.After that I will click on a link from the main page at that time runDataTable would be called.

FYI : But all .js references (along with html , css ) will in main js file only.

Regards,
Veera

Veera

@ binrid , Thanks for helping me on this.

allan

What do mean by "need a link to a test case" ? do I need to share our SharePoint site link ?

Ideally yes, although using JSFiddle, CodePen, http://live.datatables.net or similar to create a test case would be fine.

can we connect offline on this?

Realtime support is available with the support packages.

Allan

Veera

Hi Allan ,

Since we have mixed up code in(with CSS , HTML code, JS references,JavaScript , Jquery) .js files I am unable to test in http://live.datatables.net. I am sharing code flow with .js file names. Please give some kind of clue from the below flow from your understanding, so that I can try debugging from browser.

Let me explain my file structure in my application :

1.We have main.js file , in this file we have CSS references , Style tags , .js references(Jquery.js,SpServices.js,jQuery.DataTAbles.js ..etc) , HTML code and JavaScript code with functions.
2.We have common.js file : In this file we will have common function all together with JavaScript and Jquery code with functions.
3.We have Files.js file : In this file we will have specific to files area related functionality using JavaScript and Jquery code.

Flow:
Initially main.js file will load once the home page loaded we will clicking on link '" Files " , then common.js will be called and then in common.js file we will be including Files.js file path using includeJavascript function.

Home page loading fine. In File.js I am calling getDataTable("#htmltableid"); function , which is defined(written the functionality) in common.js file. In this function we have written as:

function getDataTable(tableID)
{

$(''+tableID+'').dataTable( { // Erro happening here

"language": {
"info": "of TOTAL entries","lengthMenu": 'Display <select>'+
'<option value="50">50</option>'+
'<option value="100">100</option>'+
'<option value="200">200</option>'+
'<option value="-1">All</option>'+
'</select>'

  },
  //Change the dom to lfrtip to activate search textbox

dom: 'T<"clear">ilrtp',
tableTools: {
"aButtons": [{"sExtends": "xls", "oSelectorOpts": { "filter": "applied" }},{"sExtends": "pdf", "oSelectorOpts": { "filter": "applied" }},{"sExtends": "copy", "oSelectorOpts": { "filter": "applied" }},{"sExtends": "print", "oSelectorOpts": { "filter": "applied" }}],
"sSwfPath": "https://Webapplication123456/sites/site123456/jQuery/ExportToExcelLinks/copy_csv_xls_pdf.swf"
},
"lengthMenu": [[50, 100, 200,-1], [50, 100, 200, "All"]]

} );

}

Actually we are getting error in this line in above function : "$(''+tableID+'').dataTable( { ".

Appreciate your help.

-Veera

Veera

Hi Allan ,

Since we have mixed up the code (with CSS , HTML code, JS references,JavaScript , Jquery) in .js files I am unable to test in http://live.datatables.net. I am sharing code flow with .js file names. Please give some kind of clue from the below flow from your understanding, so that I can try debugging from browser.

Let me explain my file structure in my application :

1.We have main.js file , in this file we have CSS references , Style tags , .js references(Jquery.js,SpServices.js,jQuery.DataTAbles.js ..etc) , HTML code and JavaScript code with functions.
2.We have common.js file : In this file we will have common function all together with JavaScript and Jquery code with functions.
3.We have Files.js file : In this file we will have specific to files area related functionality using JavaScript and Jquery code.

Flow:
Initially main.js file will load once the home page loaded we will clicking on link '" Files " , then common.js will be called and then in common.js file we will be including Files.js file path using includeJavascript function.

Home page loading fine. In File.js I am calling getDataTable("#htmltableid"); function , which is defined(written the functionality) in common.js file. In this function we have written as:

function getDataTable(tableID)
{

$(''+tableID+'').dataTable( { // Erro happening here

"language": {
"info": "of TOTAL entries","lengthMenu": 'Display <select>'+
'<option value="50">50</option>'+
'<option value="100">100</option>'+
'<option value="200">200</option>'+
'<option value="-1">All</option>'+
'</select>'

  },
  //Change the dom to lfrtip to activate search textbox

dom: 'T<"clear">ilrtp',
tableTools: {
"aButtons": [{"sExtends": "xls", "oSelectorOpts": { "filter": "applied" }},{"sExtends": "pdf", "oSelectorOpts": { "filter": "applied" }},{"sExtends": "copy", "oSelectorOpts": { "filter": "applied" }},{"sExtends": "print", "oSelectorOpts": { "filter": "applied" }}],
"sSwfPath": "https://webapplication1234/sites/site123456/jQuery/ExportToExcelLinks/copy_csv_xls_pdf.swf"
},
"lengthMenu": [[50, 100, 200,-1], [50, 100, 200, "All"]]

} );

}

Actually we are getting error in this line in above function : "$(''+tableID+'').dataTable( { ".

Appreciate your help

Regards,
Veera

allan

Try running the debugger on your page and seeing what that says.

I really don't know what it going wrong with the page without being able to see it. My guess, based on experience, is that jQuery is being loaded twice or more.

Allan

Veera

It says : Object doesn't support property or method 'dataTable'.

Yes it is another Jquery file loading from Master page , that is why I asked / posted initially regarding $.noConflict(true) statement how to use and where to use ( in our case either in in main.js or common.js or Files.js).

FYI
I am using no conflict in my main.js as :

  <script type="text/javascript">
            $.noConflict(true);
           </script>
        
           <script type="text/javascript" src="/../sites/AAAAB1148/_layouts/15/sp.workflowservices.js"></script>
                      
           <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
           
           <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>

           <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

           <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

           <script type="text/javascript" src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>

Is it correct approcach?

-Veera

allan

Why load jQuery twice? Just load it once and improve the performance of your web page .

Without being able to see the full page I can't really say where exactly $.noConflict would go - but I'd strongly recommend only loading jQuery once.

Allan

Veera

,But we do not have control on Master page and central configuration js file (I mean config.js file ..etc).We have control to only in SharePoint interface like adding CEWP and writing Js or Jquery..etc. That is why I am trying to overwrite / preventing to load Jquery once.

-Veera

allan

If the master page is loading jQuery, why load it again? Or is the master page loading jQuery twice?

Sorry for the daft questions, but without a working test case it is really hard to understand fully what is going on.

Allan