jQuery Datatable with Liferay 7 not working

[Mushadiq Shaik, geändert vor 7 Jahren.]

Hi,

I am new to liferay and liferay 7. I have downloaded liferay 7 ce ga1 and liferay 7 ide ga1. I am trying to integrate jQuery data table in a portlet(created using plugins-sdk ). And I am getting the below error and following is my code snippet.

view.jsp :

<%@ include file="/init.jsp"%>
<link
href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
<script type="text/javascript"
src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript"
src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>

<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
</tbody>
</table>


Error in console :

(index):338 Uncaught TypeError: $(...).DataTable is not a function
(anonymous function) @ (index):338
i @ jquery-1.12.0.min.js:2
j.fireWith @ jquery-1.12.0.min.js:2
n.extend.ready @ jquery-1.12.0.min.js:2
K @ jquery-1.12.0.min.js:2


Regards,
Mushadiq.

[David H Nebinger, geändert vor 7 Jahren.]

First we never try to pull in javascript sources within the content of a jsp file, there are better ways to do it.

Second we don't use $ in our javascript to avoid conflicts with other libraries, we use the full jQuery('#example') syntax.

Third we don't attach to jQuery(document).ready() {} because the portlet is not dependent upon the document, only the portlet content. https://dev.liferay.com/develop/tutorials/-/knowledge_base/6-1/javascript

Finally, the fact that the DataTable is failing with "not a function" indicates that the javascript itself is not loading.

Liferay 7 already includes a version of jQuery, could be you're running into some sort of conflict.

[Mushadiq Shaik, geändert vor 7 Jahren.]

Hi,

Still Iam getting the same error.

(index):338 Uncaught TypeError: $(...).DataTable is not a function.

Iam using jQuery(document).ready() {} instead of "$" symbol and removed the jquery.min.js from my jsp to avoid the conflict. Still it is giving the same error.

Note : Jquery.dataTable.min.js is also loading.


Modified Code:

<%@ include file="/init.jsp"%>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link
href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
<script>
jQuery(document).ready(function() {
jQuery('#example').DataTable();
} );
</script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
</tbody>
</table>

Error in browser Console :
(index):338 Uncaught TypeError: $(...).DataTable is not a function
(anonymous function) @ (index):338


Thanks & Regards,
Mushadiq.

[Ognian Samokovliyski, geändert vor 7 Jahren.]

Hi,

It is actually datatables to blame. In the code it checks for amd in the following way:

if ( typeof define === "function" && define.amd ) {
define( "jquery", [], function() {
return jQuery;
} );
}

and the plugin remains unregistered if the condition is met, which is the case with LR7. You can change this easily even in the minified version as it is in the beginning of the script.

HTH, Ogi

[Mushadiq Shaik, geändert vor 7 Jahren.]

Thank you sir,
It's Working fine on removing
function"===typeof define&&define.amd?define(["jquery"],function(E){return h(E,window,document)}):
in jquery.dataTables.min.js




Thanks & Regards,
Mushadiq.

[Qasim Mehboob, geändert vor 7 Jahren.]

Mushadiq Shaik:

Thank you sir,
It's Working fine on removing
function"===typeof define&&define.amd?define(["jquery"],function(E){return h(E,window,document)}):
in jquery.dataTables.min.js

Hey Mushadiq. i am getting the same error. can you please share your final code.


Thanks & Regards,
Mushadiq.

[Martin Lojek, geändert vor 7 Jahren.]

Mushadiq, could you please share your final code? I won't be the only one, who will appreciate it very much.

[Chema Balsas, geändert vor 7 Jahren.]

Hey guys,

This information was published in Liferay Developer Network in the Using External Libraries tutorial

Put special attention on the final note, which should make things much easier depending on the version you're running:

Note: With the release of Liferay Portal CE 7.0 GA4 and Liferay Digital Enterprise 7.0 SP2 (Fix Pack 8), it will be possible to hide the Liferay AMD Loader through Liferay Portal’s System Settings. Open the Control Panel, navigate to Configuration → System Settings, and click JavaScript Loader under the Foundation tab. Finally, uncheck the expose global option.

[Mickael DESPREZ, geändert vor 6 Jahren.]

Hi,

I have the problem too.
And I made the changes mentioned above, but that doesn't change anything.
Has anyone been successful and could give the next step?

Mushadiq Shaik, did you just delete this piece of code, in query.dataTables.min.js? I did the same, but it still does not work.

Thank you

[Mickael DESPREZ, geändert vor 6 Jahren.]

Nobody has any idea ?
I tested everything that was put in this post, without success !

[Ricardo Vieira, geändert vor 5 Jahren.]

Hi,

if you're still having this issue, I wasn't able to set the datatable include on the theme, but following this thread I was able to do it on my custom portlet, I included in the init.jsp this way:

<script type="text/javascript" src="/o/my_customportlet/js//jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/o/my_customportlet/js/jquery.dataTables.min.js"></script>

It's probably due to how Liferay is loading Jquery, so in my portlet I'm loading another jquery version, it's working now, but I had to uncheck the expose global option, like Chema said.

And this is how I create the datatable:

 jQuery(document).ready(function() {
	 jQuery('#my_table').DataTable();
            } );

[David H Nebinger, geändert vor 5 Jahren.]

Eek! Be sure to check this out...

I mean, Liferay has a jquery running in the browser and now you're loading another, plus I don't see you using the noconflict option.

[Ricardo Vieira, geändert vor 5 Jahren.]

I removed the jquery loading, I'm just loading the datatables in the portlet, I'm using Liferay's Jquery version, so far so good.

[Ricardo Vieira, geändert vor 5 Jahren.]

David H Nebinger:

Eek! Be sure to check this out...

I mean, Liferay has a jquery running in the browser and now you're loading another, plus I don't see you using the noconflict option.

Hi David, just for future reference if anyone needs it, I just got an answer from Liferay Staff, they said you don't need the non conflit option in your own version, since Liferay's version already has it when it's loaded, you just need to make sure you load your version after Liferay's

you can find more here

tnx David

[Luã Melo, geändert vor 5 Jahren.]

Chema Balsas:

Hey guys, This information was published in Liferay Developer Network in the [url=https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/using-external-libraries]Using External Libraries tutorial[/url] Put special attention on the final note, which should make things much easier depending on the version you're running: [quote]Note: With the release of Liferay Portal CE 7.0 GA4 and Liferay Digital Enterprise 7.0 SP2 (Fix Pack 8), it will be possible to hide the Liferay AMD Loader through Liferay Portal’s System Settings. Open the Control Panel, navigate to Configuration → System Settings, and click JavaScript Loader under the Foundation tab. Finally, uncheck the expose global option.[/quote]

 

This save my ass.

 

 

 

[Nirav Prajapati, geändert vor 5 Jahren.]

Dear Mushadiq Shaik,

You do not need to do anything.

In tab view, page-wise you have to create a new ID with Script.
 
<script type="text/javascript">
$(document).ready(function() {
    $('#datatable1').DataTable();
} );
</script>

<script type="text/javascript">
$(document).ready(function() {
    $('#datatable2').DataTable();
} );
</script>

I have same issue and it's resolved by above id name change.