jQuery usage examples?

Foros de discusión

Joel Kozikowski, modificado hace 16 años.

jQuery usage examples?

Expert Mensajes: 405 Fecha de incorporación: 28/06/06 Mensajes recientes

Are there any current portlets and/or other code samples that use jQuery? I'm just now starting to use it (its pretty cool), but a lot of it is new to me.

Specifically, I'm looking for implementations that use the

Liferay.Portlet.ready(

	/*
	This function gets loaded after each and every portlet on the page.

	portletId: the current portlet's id
	jQueryObj: the jQuery wrapped object of the current portlet
	*/

	function(portletId, jQueryObj) {
	}
);

but am also looking any/all usage examples as it pertains to Liferay.

Ideas?

Michael Young, modificado hace 16 años.

RE: jQuery usage examples?

Liferay Master Mensajes: 846 Fecha de incorporación: 5/08/04 Mensajes recientes

Not exactly what you're looking for, but here's an AOP example using jQuery:

http://www.liferay.com/web/ncavanaugh/home/blogs/hooking_into_liferay_s_javascript_functions

Joel Kozikowski, modificado hace 16 años.

RE: jQuery usage examples?

Expert Mensajes: 405 Fecha de incorporación: 28/06/06 Mensajes recientes

Michael Young:

Not exactly what you're looking for, but here's an AOP example using jQuery:

http://www.liferay.com/web/ncavanaugh/home/blogs/hooking_into_liferay_s_javascript_functions

Great stuff! I'm going to start reading Nate's blogs on a regular basis. Very interesting stuff.

I must say once again I'm really impressed with the design of the new theme system that came along in 4.3. It makes dealing with browser quirks SO much easier, and it gives a LOT of flexibility. Kudos to Nate and anyone else involved in its architecture.

BTW - I found some good jQuery usage examples in the javascript.js file of the official liferay-jedi theme I downloaded from the official plug-ins page. It was close enough to what I was looking for to give me an example of typical jQuery usage.

If anyone else has any other examples, however, I'm still looking for tips! emoticon

Madhura Raut, modificado hace 13 años.

RE: jQuery usage examples?

Junior Member Mensajes: 41 Fecha de incorporación: 11/11/10 Mensajes recientes

Hi,
I am new to portal and currently using Liferay 6.
I wanted to implement pop-up using jQuery. My code is working fine in JSF2. But its not working on liferay.Following is my code. Can you tell me why its not working. I am not getting any exceptions or errors. Please please help me.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:pcc="http://java.sun.com/jsf/composite/pcc"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:portlet="http://java.sun.com/portlet_2_0">

<h:head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js "></script>

<script type='text/javascript' >

jQuery('#btnResult').click(function(){

var $element = $('#result'); // hidden div's ID
$element.dialog({
modal: true,
resizable:true,
draggable:true,
title:"Result",
close: function() {
},
buttons: {
ok : function() {
$element.dialog("close");
}
}
}).show();

});

});

</script>
</h:head>
<h:form>
<div id="result" style="display:none">
<h:outputLabel id="lblResult" value="#{adminToolSearchBean.result}"></h:outputLabel>
</div>
<h:commandButton id="btnResult" value="Open the dialog" />
</h:form>
</ui:composition>

I have tried writing the script in the form. But its not working

Dave Weitzel, modificado hace 13 años.

RE: jQuery usage examples?

Regular Member Mensajes: 208 Fecha de incorporación: 18/11/09 Mensajes recientes

One thing that may be causing the problem is if you have that comment in there.
I believe (I am reasonably new to Liferay as well) that they minify javascript during the jsp processing, single line comments with " //comment " will extend to the end. you need to use block comments " /* comment */ ".

Have you looked at the finished code on the page to check?

Madhura Raut, modificado hace 13 años.

RE: jQuery usage examples?

Junior Member Mensajes: 41 Fecha de incorporación: 11/11/10 Mensajes recientes

Hi,
I have tried by removing all the comments but still its not working on the portal. emoticon

Tanweer Ahmed ., modificado hace 1 año.

RE: jQuery usage examples?

Expert Mensajes: 322 Fecha de incorporación: 11/03/10 Mensajes recientes

Hi Madhura,

I think you can use the AUI pop , provided in LR6.

  <aui:script>
	Liferay.provide(window,'<portlet:namespace />callPopup',
	function(url1) {
	var A = AUI();
	var data = {};
	var dialog = new A.Dialog(
	{
	centered: true,
	destroyOnClose: true,
	modal: true,
	title: Liferay.Language.get('Display-Content'),
	width: 600
	}
	).render();
	dialog.plug(
	A.Plugin.IO,
	{
	data: data,
	uri: url1
	}
	);
	},
	['aui-dialog', 'aui-io']
	);
 
</aui:script>

Madhura Raut, modificado hace 13 años.

RE: jQuery usage examples?

Junior Member Mensajes: 41 Fecha de incorporación: 11/11/10 Mensajes recientes

Hi Tanweer,

Can u tell me how to bind dynamic data. Coz I have to display the the information searched by the user in a tabular format.

Thank u emoticon

Apoorva Prakash, modificado hace 13 años.

RE: jQuery usage examples?

Liferay Master Mensajes: 658 Fecha de incorporación: 15/06/10 Mensajes recientes

<script type="text/javascript">

	jQuery(document).ready(function() {
		jQuery("#addform").validate({
			rules:{
				empCode:{required: true,number:true},
				firstName:"required",
				mobile:{required: true,number:true},
				technology:"required",
				email: {// compound rule 
					required: false, 
					email: true 

	        }, 
			}
		});
	});
</script>

Hope this will help...

Thanks and Regards...

Madhura Raut, modificado hace 13 años.

RE: jQuery usage examples?

Junior Member Mensajes: 41 Fecha de incorporación: 11/11/10 Mensajes recientes

Hi Apoorv,

Thanks for the help. But for some reason I need to know whts wrong with my code. Why its not working. Is it the logical mistake or something else. Please help me.

Dave Weitzel, modificado hace 13 años.

RE: jQuery usage examples?

Regular Member Mensajes: 208 Fecha de incorporación: 18/11/09 Mensajes recientes

Have you debugged it using alert() statements to ascertain how far the code gets?
What is displayed in your browsers debugging tools (firebug or chrome "inspect element")?
I suspect you just may need to wrap everything with a
$(document).ready(function(){
....
)}

block to initiate your jQuery objects?

Madhura Raut, modificado hace 13 años.

RE: jQuery usage examples?

Junior Member Mensajes: 41 Fecha de incorporación: 11/11/10 Mensajes recientes

Hey thank you so much. I have tried using alert boxes too. but its not entring the function which i have written. I will try using the block you have suggested and will let you know. thank u once again

john paolo sagenes, modificado hace 13 años.

RE: jQuery usage examples?

New Member Mensaje: 1 Fecha de incorporación: 22/11/10 Mensajes recientes

Hi guys!! Are you a Jquery user? I just want to share something. I found a website that might help you on using jquery and here are some of the website's links:

http://www.jquery4u.com/basic-syntax/5-basic-jquery-syntax/
The link is about 5 Useful Basic jQuery Syntax like:
• Hide/Show
• Fade in/Fade out
• Stop
• Animate
• Slide Toggle

http://www.jquery4u.com/animation-and-effects/10-amazing-jquery-image-slider/
The link is about the 10 Amazing jQuery Image Slider

http://www.jquery4u.com/articles/benefits-jquery/
The link is about the benefits of using jquery

http://www.jquery4u.com/news/load-jquery-google-libraries-api/
The link is about Load jQuery with Google Libraries API

http://www.jquery4u.com/forms/5-awesome-jquery-drop-boxes/
The link is about the 5 Awesome JQuery Drop Down Boxes

So try visit it now and I hope this site helped you! emoticon

Apoorva Prakash, modificado hace 13 años.

RE: jQuery usage examples?

Liferay Master Mensajes: 658 Fecha de incorporación: 15/06/10 Mensajes recientes

Hello Sagenes,
Useful infoarmation, thanks !!!