Ajax in liferay 6

[Srikanth Reddy, modificado 13 Anos atrás.]

Hi Friends
Has liferay provided any implementation for an ajax call in liferay 6 .
as we had AjaxUtil in liferay 5.X.?
Actually i tried to implement an ajax in liferay 6 but the thing is that
I am not able to make a call to the servlet as im in Ext -environment.
I confirgured my servlet which handles the ajax request in web.xml file.
But my container is not able to find the mapping route of the servlet which i
configured in web.xml.
So can any one have any idea of how to do it in ExT environment .

Thanks in advance
Srikanth

[Sheikh Sajid, modificado 13 Anos atrás.]

Hi Srikanth,

Liferay 6 provides new API for ajax.

var A = AUI(); 
A.use('aui-io-request', 
	function(aui) {
		A.io.request([b]<url>[/b], { 
			method : 'GET', 
			dataType : 'json', 
			on : { 
				success : function() { 
					alert(this.get('responseData').status); 
				} 
			} 
		});
	}
);
</url>

Replace the <url> with the url of your remote service. The response is available in the responseData as shown above. If you are expecting xml as response, then remove the dataType parameter. In this example, the response is json so we directly access the status field (assumed) from the response. If you want to know whether the service failed, then add failure parameter similar to success parameter above.

I have not tested with ext environment but this should wok there too.

[Srikanth Reddy, modificado 13 Anos atrás.]

Hi Sajid,
thanks for sharing this code snippet,i think it will do my work!
But my only concern was that ,the url here call a servlet ,but configuring that
in web.xml in ext environment is giving me a prob,some time is not calling
my servlet .it gives 404 status error .ie. its not able to take my web
deployment descriptor.
how are servlets configured in EXT are called?

Thanks and Regards
Srikanth

[simon tuffle, modificado 13 Anos atrás.]

Hey srikanth,


I am not much aware of ajax but below links may help you.
link1link2

[Rendi Januar, modificado 13 Anos atrás.]

Hi Srikanth,

Before this, I'm using AJAX in ext environment but has the problem when redirect back again to jsp from JAVA.I don't know it same or not, just want to share knowledge.

So i do some tricked, i'm not direct the url to java, but i direct it to another jsp that have same action like in java.

this is the sample that i used, i'm using jQuery

function <portlet:namespace />setBankCode(){
		var urlAction='/html/portlet/enterprise_admin/user/ajax_bank.jsp';
		jQuery.ajax({
			url: urlAction,
			type: "post",
			dataType: "json",
			data: {			
				param: paramValue
			},					
			success:function(msg){
			   var paramJSON= msg.paramJSON;		
                           //this is the action 
			}							
		});
	}

This is action that i wrote in jsp that mention in url

<%
	long paramValue= ParamUtil.getLong(request, "param");		
	JSONArray paramJSON= ParamLocalServiceUtil(paramValue);
	JSONObject obj = JSONFactoryUtil.createJSONObject();
	obj.put("paramJSON", paramJSON);
	out.println(obj.toString());
%>

Okay this is code that i used. Hope it will help you.

Regards,
Rendi

[David Thieffry, modificado 13 Anos atrás.]

Sheikh Sajid:

Hi Srikanth,

Liferay 6 provides new API for ajax.

var A = AUI(); 
A.use('aui-io-request', 
	function(aui) {
		A.io.request([b]<url>[/b], { 
			method : 'GET', 
			dataType : 'json', 
			on : { 
				success : function() { 
					alert(this.get('responseData').status); 
				} 
			} 
		});
	}
);
</url>

Replace the <url> with the url of your remote service. The response is available in the responseData as shown above. If you are expecting xml as response, then remove the dataType parameter. In this example, the response is json so we directly access the status field (assumed) from the response. If you want to know whether the service failed, then add failure parameter similar to success parameter above.

I have not tested with ext environment but this should wok there too.

HI,

I'm new to Liferay. I've got a lot of difficulty to perform a simple ajax call so I would like to try your code. First, I created a remote service but I don't know what is its URL. Where can I get it?

Thanks.

[Sheikh Sajid, modificado 13 Anos atrás.]

David Thieffry:

HI,

I'm new to Liferay. I've got a lot of difficulty to perform a simple ajax call so I would like to try your code. First, I created a remote service but I don't know what is its URL. Where can I get it?

Thanks.

Hi David,

If you are calling a service hosted on your server, use ajax like this:

var A = AUI();
A.use('aui-io-request', function(aui) {
	Liferay.Service.[u]gis.GMap.getWeather[/u](
		{
		location : location
		},function(message) {
			//place your code here
		});
});

Replace the underlined code and the function parameters from the service.js file that is created in the js folder of your portlet docroot folder. Sample content of my docroot/js/service.js file

Liferay.Service.register("Liferay.Service.gis", "com.test.service");

Liferay.Service.registerClass(
	[u]Liferay.Service.gis[/u], "[u]GMap[/u]",
	{
		getDirections: true,
		[u]getWeather[/u]: true
	}
);

My remote service getWeather takes a single parameter 'location'. See the underlined code in my remote service. Match the same with your service.

Hope this helps.

[X Man, modificado 12 Anos atrás.]

Hello Sheikh Sajid:
I tried your code, and it helps me greatly, but AJAX returns the current page.


var A = AUI();
A.use('aui-io-request',
function(aui) {
A.io.request('/html/portlet/journal/test1.jspf', {
method : 'GET',
dataType : 'json',
on : {
success : function() {
alert(this.get('responseData').status);
}
}
});
}
);



If you say something, it will be great, because any thing could help.
Thank you in advance.

[Sujay Kumar Paul, modificado 10 Anos atrás.]

Hi,

Can any one please tell me how to get the value of data from struts 2 action class.

Thanks in advance.

[Sujay Kumar Paul, modificado 10 Anos atrás.]

Hi,

Can any one please tell me how to get the value of data from struts 2 action class.

Thanks in advance.

[Ravi Kumar Gupta, modificado 13 Anos atrás.]

Alternatively you can use jquery.. but of course recommended is AUI.

include jquery and use like this

$.post("myurl.jsp", { firstName: "Ravi", lastName: "Gupta" },
function(data){
alert("Data Loaded: " + data);
});

where function will be called once the request is completed..

Cheers!!!

[Ravi Kumar Gupta, modificado 13 Anos atrás.]

Adding more..

I have created a simple ajax portlet using JQuery and added to sourceforge.

Can be found here

Thanks
Ravi Gupta

[Ricardo Viegas, modificado 13 Anos atrás.]

Im trying to just implement two combobox with country and region (the regions being updated acording to country).
Im interest in using the alloy librarys, can you guys give a hint please.
Thanks a lot

[Raja Seth, modificado 12 Anos atrás.]

Thanks Ravi for your help...

[Sagar A Vyas, modificado 12 Anos atrás.]

Hi Guys,

Please check out this url.

It shows good example for ajax in Liferay.

http://www.excession.org.uk/blog/liferay-and-ajax.html

Thanks,
Sagar Vyas

[yaragad from Spain, modificado 12 Anos atrás.]

What's wrong here?
Im using a simple Servlet (http://myurl.com/servlet.do) and LF6 portlet (http://someLiferayURL.com/home).

My JSP

<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %> 
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %> 

<liferay-theme:defineobjects />
<portlet:renderurl var="renderURL" />

<script language="JavaScript">
var A = AUI(); 
A.use('aui-io-request', 
	function(aui) {
                alert("Im here");
		A.io.request('http://myurl.com/servlet.do', { 
			method : 'GET', 
			on : { 
				success : function() { 
					alert(this.get('responseData').status); 
				} 
			} 
		});
	}
);
</script>

If I enter http://myurl.com/servlet.do as URL on IE, Firefox or Chrome I get my Servlet response data ("Hello"). But there is no response on the portlet...
Also, alert("Im here") is displayed and there are no errors on Firebug console.
Any idea?

[Mika Koivisto, modificado 12 Anos atrás.]

Here's how I've done Ajax with Alloy:

<form>
	<input type="button" id="<portlet:namespace />incrementBtn" value="Increment">
</form>

<aui:script use="io">
	A.one("#<portlet:namespace />incrementBtn").on("click", function(e) {
		e.preventDefault();

		<portlet:namespace />incrementCounter();
	});

	var <portlet:namespace />incrementCounter = function() {
		A.io(
			'&lt;%= jsonURL %&gt;',
			{
				on: {
					success: <portlet:namespace />processResponse
				}
			}
		);
	};

	var <portlet:namespace />processResponse = function(id, obj) {
			var response = A.JSON.parse(obj.responseText);
			var countSpan = A.one("#<portlet:namespace />count");
			countSpan.text(response.count);
	};
</aui:script>

See the full code and working plugin here: https://github.com/mikakoivisto/liferay-random-plugins/blob/master/portlets/sample-ajax-portlet/docroot/view.jsp

[krunal b soni, modificado 13 Anos atrás.]

Hi Srikanth,

If you are not getting familiar with YUI or Jquery Ajax call. Try DWR for Ajax with Liferay. I have used it and its very easy to implement (regardless of your Liferay version). For basic understanding of DWR (Direct web remoting) you can go through its website.

click on below link

http://directwebremoting.org/dwr/index.html

To get basic idea how you can implement DWR with Liferay see below WIKI page.

http://www.liferay.com/community/wiki/-/wiki/Main/Using+DWR+for+AJAX

Thanks,
Krunal Soni

[Pranay R Patadiya, modificado 13 Anos atrás.]

Hi,

Yes, I have used DWR thoroughly in my current project and gives a number of functionality against AJAX or JSON.

Thanks,
Pranay Patadiya

[Aston Chan, modificado 13 Anos atrás.]

Hi,

In your example, you have:


var A = AUI();
A.use('aui-io-request', function(aui) {
Liferay.Service.gis.GMap.getWeather(
{
location : location
},function(message) {
//place your code here
});
});

The question is, how do I invoke his getWeather() function from outside this scope?

Say, I have a button or a link, when user click on it, I need to make a service call getWeather(). How do I do that since Liferay.Service.gis.GMap.getWeather() is inside the scope of A.use(){} ?

Thanks.

[Aston Chan, modificado 13 Anos atrás.]

I was so confused. It is as simple as:

this.myFunc = function() {
var A = AUI();
A.use('aui-io-request', function(aui) {
Liferay.Service.gis.GMap.getWeather(
{
location : location
},function(message) {
//place your code here
});
});
};


And then later on, do this.myFunc().

Sorry about the noise...

[Aston Chan, modificado 13 Anos atrás.]

I think I'm very close. The only thing missing is how do I pass parameters to my ajax call?

E.g.

this.myFunc = function() {
var A = AUI();
A.use('aui-io-request', function(aui) {
Liferay.Service.gis.GMap.getWeather(
{
location : location
},function(message) {
//place your code here
});
});
};

Where is that location value come from? In the above case, I want to call myFunc with a location value. How do I do it?

Thanks again.

[Hitoshi Ozawa, modificado 13 Anos atrás.]

This thread my help you.

http://www.liferay.com/ja/community/forums/-/message_boards/message/7146031

[Sheikh Sajid, modificado 12 Anos atrás.]

Aston Chan:

I think I'm very close. The only thing missing is how do I pass parameters to my ajax call?

E.g.

this.myFunc = function() {
var A = AUI();
A.use('aui-io-request', function(aui) {
Liferay.Service.gis.GMap.getWeather(
{
location : location
},function(message) {
//place your code here
});
});
};

Where is that location value come from? In the above case, I want to call myFunc with a location value. How do I do it?

Thanks again.

Sorry for the delayed reply. Haven't been checking the forum of late.

The 'location' on the right hand side is a javaScript variable. It can be any javascript variable.