Including jQuery and other JS files in Liferay Theme

Asked 17/10, 2012 at 13:59 Answered 2/2, 2017 at 4:37

I use Liferay 6.1 and I created my theme (sample-theme) and I want add jQuery. How can I do that?

Why I have folders: sample-theme and liferay-work and both have folders: css, js, templates?

I created folder _diffs and subfolder js and there copy jQuery and add in portal_normal.vm:

<script src="/html/js/jquery/jquery-1.8.2.min.js"></script>

And I don't see any changes, Why? How can I add jQuery? Not only to a single portlet but for all.

I don't have folder docroot I am use Maven and in src/main/webapp I created folder _diffs and inside folder js, there I add jquery.js and in _diffs created templates folder an d paste:

<script src="$javascript_folder/jquery-1.8.2.min.js"></script>

And still it is wrong. Maybe folder _diffs should be in another places? What should be a structure of maven project?

Unbelief answered 17/10, 2012 at 13:59 Comment(1)

For building using maven this might help you: liferaysolution.com/2012/09/maven-build-with-liferay.html – Constantino 14/1, 2013 at 15:43

You can add all your javascript files to the js folder in your theme like:

sample-theme/docroot/_diffs/js/jquery-1.8.2.min.js

And then to make it available for everybody you can write any of the following lines in the <head> section of the template files portal_normal.vm and portal_pop_up.vm present in the directory sample-theme/docroot/_diffs/templates/:

#js ("$javascript_folder/jquery-1.8.2.min.js")

<script src="$javascript_folder/jquery-1.8.2.min.js"></script>

_{Note: portal_pop_up.vm is for applying your javascript changes to AUI dialog pop-ups, if you are using them}

Some more explanation as to how things work:

$javascript_folder is a velocity variable present in the theme's template files which points to the javascript storage path (default is: ${root-path}/js) which can be defined in the liferay-look-and-feel.xml like this:

<theme id="sample" name="Sample">
    <root-path>/html</root-path> <!-- optional -->
    <javascript-path>${root-path}/js/jQuery</javascript-path> <!-- So path becomes: sample-theme/html/js/jQuery -->
</theme>

You can also customize ${root-path} just like <javascript-path> by specifying it in liferay-look-and-feel.xml as <root-path> as shown. The default value of ${root-path} is / i.e. it refers to the directory sample-theme/.

Basically the folders css, js, templates & images are the ones which gets updated with the changes you make in the corresponding _diffs folder (_diffs/css, _diffs/js etc) when you build the theme. So that is the reason the velocity variables like $javascript_folder & $css_folder point to sample-theme/js & sample-theme/css respectively instead of sample-theme/_diffs/js or sample-theme/_diffs/css.

Hope this helps.

Cinemascope answered 18/10, 2012 at 9:58 Comment(0)

Add
<script src="$themeDisplay.getPathThemeRoot()js/jquery-1.8.2.min.js" type="text/javascript"> in portal_normal.vm

after adding the file to sample-theme/docroot/_diff/js folder
You can also use a CDN directly
<script src="<jquery url in CDN>" type="text/javascript">

Moo answered 14/1, 2013 at 23:1 Comment(0)

You should add jquery-1.8.2.min.js to the folder docroot/_diffs/js in your theme. Then in docroot/_diffs/templates/portal_normal.vm you should add the following line to the <head /> section:

<script src="$javascript_folder/jquery-1.8.2.min.js"></script>

I think, it should work.

Hedgepeth answered 17/10, 2012 at 16:7 Comment(0)

This should be helpful for you

 <script src="<%=request.getContextPath()%>/js/jquery-1.8.2.min.js" ></script>

Binette answered 1/2, 2017 at 14:5 Comment(0)

diffs is only required when there is ant project, for MAVEN you do not need diffs
request.getContextPath is useful when u want to do it in portlets & Not themes.
you can use "$javascript_folder to access anything inside js folder

Phenformin answered 2/2, 2017 at 4:37 Comment(0)

Some more explanation as to how things work:

Recommended topics

Hot tags