Using Jquery code inside Liferay 6
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 .
Answer
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>