掲示板

jQuery usage examples?

thumbnail
16年前 に Joel Kozikowski によって更新されました。

jQuery usage examples?

Expert 投稿: 405 参加年月日: 06/06/28 最新の投稿
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?
thumbnail
16年前 に Michael Young によって更新されました。

RE: jQuery usage examples?

Liferay Master 投稿: 846 参加年月日: 04/08/05 最新の投稿
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
thumbnail
16年前 に Joel Kozikowski によって更新されました。

RE: jQuery usage examples?

Expert 投稿: 405 参加年月日: 06/06/28 最新の投稿
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
13年前 に Madhura Raut によって更新されました。

RE: jQuery usage examples?

Junior Member 投稿: 41 参加年月日: 10/11/11 最新の投稿
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
thumbnail
13年前 に Dave Weitzel によって更新されました。

RE: jQuery usage examples?

Regular Member 投稿: 208 参加年月日: 09/11/18 最新の投稿
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?
13年前 に Madhura Raut によって更新されました。

RE: jQuery usage examples?

Junior Member 投稿: 41 参加年月日: 10/11/11 最新の投稿
Hi,
I have tried by removing all the comments but still its not working on the portal.emoticon
thumbnail
1年前 に Tanweer Ahmed . によって更新されました。

RE: jQuery usage examples?

Expert 投稿: 322 参加年月日: 10/03/11 最新の投稿
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>
13年前 に Madhura Raut によって更新されました。

RE: jQuery usage examples?

Junior Member 投稿: 41 参加年月日: 10/11/11 最新の投稿
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
thumbnail
13年前 に Apoorva Prakash によって更新されました。

RE: jQuery usage examples?

Liferay Master 投稿: 658 参加年月日: 10/06/15 最新の投稿
<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...
13年前 に Madhura Raut によって更新されました。

RE: jQuery usage examples?

Junior Member 投稿: 41 参加年月日: 10/11/11 最新の投稿
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.
thumbnail
13年前 に Dave Weitzel によって更新されました。

RE: jQuery usage examples?

Regular Member 投稿: 208 参加年月日: 09/11/18 最新の投稿
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?
13年前 に Madhura Raut によって更新されました。

RE: jQuery usage examples?

Junior Member 投稿: 41 参加年月日: 10/11/11 最新の投稿
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
13年前 に john paolo sagenes によって更新されました。

RE: jQuery usage examples?

New Member 投稿: 1 参加年月日: 10/11/22 最新の投稿
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
thumbnail
13年前 に Apoorva Prakash によって更新されました。

RE: jQuery usage examples?

Liferay Master 投稿: 658 参加年月日: 10/06/15 最新の投稿
Hello Sagenes,
Useful infoarmation, thanks !!!