Login/Register
Using Jquery code inside Liferay 6
Asked Answered
jqueryliferayliferay-6
T

1

5

I am using Liferay 6 for the Application . I wanted to use , Jquery for the User Interface Part instead of default Alloy . For this i have integrated JQuery with Liferay by editing liferay-portlet.xml this way 

<portlet>
        <portlet-name>First</portlet-name>
        <icon>/icon.png</icon>
        <instanceable>true</instanceable>
        <header-portlet-css>/css/main.css</header-portlet-css>
        <header-portlet-javascript>https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js</header-portlet-javascript>
                                   <header-portlet-javascript>https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js</header-portlet-javascript>
        <footer-portlet-javascript>/js/main.js</footer-portlet-javascript>
        <css-class-wrapper>First-portlet</css-class-wrapper>
    </portlet>

This is my view.jsp 

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<portlet:defineObjects />

This is the <b>Sai Nath</b> portlet.

Now please tell me how can i put the below Jquery Hello World Alert inside the view.jsp

This is my Jquery Hello World alert program 

<html>
<head>
<title>jQuery Hello World Alert box</title>

<script type="text/javascript" src="jquery-1.4.2.js"></script>

</head>
 <script type="text/javascript">
$(document).ready(function(){
$("#cl").click(function(){
alert("HELLO WORLD!");
});
});
</script>
<body>
<font color="red">CLICK BELOW BUTTON TO SEE ALERT BOX</font>
<br>
<br>
<button id="cl">Click Me</button>
</body>
</html>

Please let me know , thanks for reading .

Taratarabar answered 4/7, 2012 at 12:18 Comment(0)
K
12

First of all: Your portlet's jsp should never contain <html>, <head> or <body>. These sections are the portal's business.

Also, you're including jquery again in your page, even though you've asked Liferay to include it in the head section (as you declare).

If you omit this, it works just like you wrote above - I've tested it. This is my jsp:

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<portlet:defineObjects />

<script type="text/javascript">
  $(document).ready(function(){
    $("#cl").click(function(){
      alert("HELLO WORLD!");
    });
  });
</script>

<font color="red">CLICK BELOW BUTTON TO SEE ALERT BOX</font>
<br>
<br>
<button id="cl">Click Me</button>

A completely different option uses AlloyUI's (or YUI's) ability to dynamically load jQuery as an AlloyUI module. No declaration in liferay-portal.xml required. You can even load different version of jquery in one page. The jsp looks like this:

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<portlet:defineObjects />

AUI/jQuery
<script>
AUI().use('gallery-yquery', function(A) {
  var jq = A.YQuery();
  jq.version = '1.6.2';
  jq.use( function() {
    alert( 'jquery ' + $.fn.jquery + ' loaded' ); // Will show that 1.6.2 loaded successfully
    $(document).ready(function(){
      $("#cl").click(function(){
        alert("HELLO WORLD!");
      });
    }); 
  });
});
</script>
Krispin answered 4/7, 2012 at 17:13 Comment(2)
Thanks. This is a really cool feature of Alloy UI. Any links you can provide which explains this feature in detail and how we can know what all versions we can include of different javascript libraries? – Junto
yes, the link is already in there, linking to the YQuery module for YUI/AlloyUI: yuilibrary.com/gallery/show/yquery – Krispin

© 2022 - 2024 — McMap. All rights reserved.