1. Inici
  2. Development
  3. RE: Referencing JQuery in Portal

RE: Referencing JQuery in Portal

Kevin Matthews, modificat fa 12 anys.
Referencing JQuery in Portal
Junior Member Apunts: 38 Data d'incorporació: 23/05/12 Publicacions recents
Hi,
I have two servers a test server and production server. Both servers runs liferay 6.1 CE solution, however, I am seing something strange when using jquery CSS/UI/core libraries in my portal application. When I added the following links below directly in my portal page on the test server I see my jquery UI tabs and everything operates fine but when I install/deploy the same application on the production server the jquery does not load and I am not able to see the tabs formed correctly. So I had to reference the jquery libraries inside my liferay-portlet.xml to get it to work on the live server.

Can you tell me why this happens that it does not work?




<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Thanks,
Kevin
thumbnail
David H Nebinger, modificat fa 12 anys.
RE: Referencing JQuery in Portal
Liferay Legend Apunts: 14933 Data d'incorporació: 02/09/06 Publicacions recents
I don't know how you 'placed them on the portal page', but the standard way to do this is to create a custom theme and include them there. Also, it is always best to host js from your own server rather than a remote one (browsers can sometimes balk at pulling files from separate sites.
Kevin Matthews, modificat fa 12 anys.
RE: Referencing JQuery in Portal
Junior Member Apunts: 38 Data d'incorporació: 23/05/12 Publicacions recents
Hi David, I did place the jquery below directly into the portal jsp page and it worked on our test server which is on our network but did not on the production server which hosted outside. Also, I did reference inside a custom theme in the portal.vm template and it worked on test but nor the production server. It only work when I added it to portal_normal.vm as define below

Worked:
<header-portlet-css>/css/jquery-ui.css</header-portlet-css>
<header-portlet-javascript>/js/jquery-1.9.1.js</header-portlet-javascript>
<footer-portlet-javascript>/js/jquery-ui.js</footer-portlet-javascript>


DID NOT WORKED IN JSP AND CUSTOM THEME (portal_normal.vm)
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Thanks
Kevin
thumbnail
David H Nebinger, modificat fa 12 anys.
RE: Referencing JQuery in Portal
Liferay Legend Apunts: 14933 Data d'incorporació: 02/09/06 Publicacions recents
portal_normal.vm requires a different syntax.

#js ("http://code.jquery.com/jquery-1.9.1.js")
Kevin Matthews, modificat fa 12 anys.
RE: Referencing JQuery in Portal
Junior Member Apunts: 38 Data d'incorporació: 23/05/12 Publicacions recents
Hi David, would the syntax be the same when referencing the jquery css (see below) in the custom theme portal_normal.vm.?

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

#js("http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css")

Thanks,
Kevin
thumbnail
David H Nebinger, modificat fa 12 anys.
RE: Referencing JQuery in Portal
Liferay Legend Apunts: 14933 Data d'incorporació: 02/09/06 Publicacions recents
For css in themes, you make the change in main.css. You can add a line:

@import url(http...);
Kevin Matthews, modificat fa 12 anys.
RE: Referencing JQuery in Portal
Junior Member Apunts: 38 Data d'incorporació: 23/05/12 Publicacions recents
Hi David, I added the jquery URL's in my custom theme as you suggested but it seems it does not work or not recognizing. Also, I imported the jquery css URL but it seems to display the url in the portal when I look at the website. Can you please advise.

@import url(http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css);
<head>
<title>$the_title - $company_name</title>

$theme.include($top_head_include)
#js ("http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js")
#js ("http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js")
</head>

Thanks
Kevin
thumbnail
M J, modificat fa 12 anys.
RE: Referencing JQuery in Portal
Regular Member Apunts: 184 Data d'incorporació: 01/03/13 Publicacions recents
Copy "portal_normal.vm" from docroot\templates folder to docroot\_diffs\templates folder of your custom theme project. Then edit the "portal_normal.vm" in docroot\_diffs\templates folder to something similar below and then create "js" folder under "docroot" folder and add "jquery.js" into "js" folder:

$javascript_folder = docroot\js of your custom theme project.



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

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

  $theme.include($top_head_include)

  <script src="$javascript_folder/jquery.js"></script>
Kevin Matthews, modificat fa 12 anys.
RE: Referencing JQuery in Portal
Junior Member Apunts: 38 Data d'incorporació: 23/05/12 Publicacions recents
Thanks MJ. It works in my test environment.
thumbnail
Megesh Damre, modificat fa 9 anys.
RE: Referencing JQuery in Portal
New Member Apunts: 24 Data d'incorporació: 27/04/17 Publicacions recents
David H Nebinger:
For css in themes, you make the change in main.css. You can add a line:

@import url(http...);





Hi David,
i'm working on Liferay 7.. I'm facing one prob , i have imported jquery library in portal_normal.ftl like following... 

<link rel="stylesheet" type="text/css" href="${javascript_folder}/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="${javascript_folder}/jquery-1.11.3.min.js">
</script>

<script type="text/javascript" src="${javascript_folder}/jquery.mobile-1.4.5.min.js"></script>

my jquery functionality is working but imported script is reflecting on portal and problem are like web content article is not showing and
and previous Jquery Functions also not working...if i removed that library then portal working fine..what should i do ?
i have attached my file you can see..