1. Home
  2. Development
  3. JQuery version and dependencies

JQuery version and dependencies

Kevin Neibarger, modified 6 Years ago.
JQuery version and dependencies
Regular Member Posts: 105 Join Date: 2/2/18 Recent Posts
Hello, I am currently converting a 6.2 Liferay application into a 7.1 Liferay application. I see that Liferay 7.1 has jQuery already included and it's version 3.3.1. Is this correct? Within my portal_normal.ftl of my custom theme I'm including the following javascript and css files. I am using a couple of widgets that aren't loading for some reason, namely a multiselect widget. And for some reason the dialog function in the jquery-ui isn't loading either. I'm getting the errors:

Uncaught TypeError: $(...).dialog is not a function
Uncaught TypeError: $(...).multiselect is not a function

These javascript errors cause the page load to hang. Since I don't have to include jQuery for this version of Liferay, what do I have to do to at least get the jquery-ui.js to work? I think that $(..).dialog is in the jquery-ui.min-1.12.1.js, so I'm not sure what's happening. 

portal_normal.ftl

    <title>${the_title} - ${company_name}</title>

    <meta content="initial-scale=1.0, width=device-width" name="viewport">

    &lt;@liferay_util["include"] page=top_head_include /&gt;

    <script src="${javascript_folder}/jquery-ui.min-1.12.1.js"></script>

    <script src="${javascript_folder}/jquery.multiselect.js"></script>
    
    <!-- CSS Files -->
    <link rel="stylesheet" href="${css_folder}/jquery.dynatable.css">
    <link rel="stylesheet" href="${css_folder}/jquery-ui-1.12.1.css">
    <link rel="stylesheet" href="${css_folder}/jquery.multiselect.css">
thumbnail
Fernando Fernandez, modified 6 Years ago.
RE: JQuery version and dependencies
Expert Posts: 401 Join Date: 8/22/07 Recent Posts
Hi Kevin,

Try this: https://dev.liferay.com/pt/develop/tutorials/-/knowledge_base/7-1/using-external-javascript-libraries

HTH

Fernando
Kevin Neibarger, modified 6 Years ago.
RE: JQuery version and dependencies
Regular Member Posts: 105 Join Date: 2/2/18 Recent Posts
Fernando FernandezHi Kevin,

Try this: https://dev.liferay.com/pt/develop/tutorials/-/knowledge_base/7-1/using-external-javascript-libraries

HTH

Fernando
Yep, already did that. I was able to get it to avoid those javascript errors by specifying an old version of query. I know that Liferay comes with jquery 3.3.1 but there are incompatibilities with that version and jquery-ui 1.12.1, which I believe is the newest version. 

When I use the combination jquery-2.2.4.min.js and jquery-ui-1.12.1.min.js, the javascript errors don't occur but when the modal pops up there are no mouse actions. I can only use the tabs and arrows to select content within the popup. 
thumbnail
Fernando Fernandez, modified 6 Years ago.
RE: JQuery version and dependencies
Expert Posts: 401 Join Date: 8/22/07 Recent Posts
I know it's not what you want but I think jquery-ui is not adequate for modern, responsive UIs so you could consider moving to a bootstrap-based lib.

HTH

Fernando
Kevin Neibarger, modified 6 Years ago.
RE: JQuery version and dependencies
Regular Member Posts: 105 Join Date: 2/2/18 Recent Posts
Fernando FernandezI know it's not what you want but I think jquery-ui is not adequate for modern, responsive UIs so you could consider moving to a bootstrap-based lib.

HTH

Fernando

Thanks Fernando, I may explore bootstrap and see if it works with Legacy code. I was able to create a JSFiddle that uses jquery-ui version 1.12.1 and jQuery 3.3.1. And it works fine. The dialog pops up and I can click things within it. I'm not sure why it's not working within Liferay 7.1. When I used the same combo in Liferay 7.1 I got some javascript errors pointing to incompatibility between the two. 


https://jsfiddle.net/8xw291hs/2/