Referencing JQuery in Portal

Forums de discussion

Kevin Matthews, modifié il y a 10 années.

Referencing JQuery in Portal

Junior Member Publications: 38 Date d'inscription: 23/05/12 Publications récentes

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

David H Nebinger, modifié il y a 10 années.

RE: Referencing JQuery in Portal

Liferay Legend Publications: 14919 Date d'inscription: 02/09/06 Publications récentes

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, modifié il y a 10 années.

RE: Referencing JQuery in Portal

Junior Member Publications: 38 Date d'inscription: 23/05/12 Publications récentes

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

David H Nebinger, modifié il y a 10 années.

RE: Referencing JQuery in Portal

Liferay Legend Publications: 14919 Date d'inscription: 02/09/06 Publications récentes

portal_normal.vm requires a different syntax.

#js ("http://code.jquery.com/jquery-1.9.1.js")

Kevin Matthews, modifié il y a 10 années.

RE: Referencing JQuery in Portal

Junior Member Publications: 38 Date d'inscription: 23/05/12 Publications récentes

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

David H Nebinger, modifié il y a 10 années.

RE: Referencing JQuery in Portal

Liferay Legend Publications: 14919 Date d'inscription: 02/09/06 Publications récentes

For css in themes, you make the change in main.css. You can add a line:

@import url(http...);

Kevin Matthews, modifié il y a 10 années.

RE: Referencing JQuery in Portal

Junior Member Publications: 38 Date d'inscription: 23/05/12 Publications récentes

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

M J, modifié il y a 10 années.

RE: Referencing JQuery in Portal

Regular Member Publications: 184 Date d'inscription: 01/03/13 Publications récentes

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, modifié il y a 10 années.

RE: Referencing JQuery in Portal

Junior Member Publications: 38 Date d'inscription: 23/05/12 Publications récentes

Thanks MJ. It works in my test environment.

Megesh Damre, modifié il y a 6 années.

RE: Referencing JQuery in Portal

New Member Publications: 24 Date d'inscription: 27/04/17 Publications récentes

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