JQuery version and dependencies

RE: JQuery version and dependencies

2019-03-07T13:18:20Z

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/

RE: JQuery version and dependencies

2019-03-06T21:13:28Z

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

RE: JQuery version and dependencies

2019-03-06T20:59:02Z

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.

RE: JQuery version and dependencies

2019-03-06T20:51:45Z

Hi Kevin,

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

HTH

Fernando

JQuery version and dependencies

2019-03-06T19:24:50Z

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">