Bloggers recientes

James Falkner

Staff
97 Mensajes
2 de octubre de 2014

Pradeep Sharma

1 Mensajes
1 de octubre de 2014

Koen van Dillen

Staff
1 Mensajes
1 de octubre de 2014

Eduardo P. Garcia

Staff
5 Mensajes
29 de septiembre de 2014

Neil Griffin

Staff
43 Mensajes
26 de septiembre de 2014

Angela Wu

Staff
4 Mensajes
25 de septiembre de 2014

Ken Dong

Staff
5 Mensajes
25 de septiembre de 2014

Martin Yan

Staff
7 Mensajes
24 de septiembre de 2014

Muhammed Shafeek V

2 Mensajes
23 de septiembre de 2014

Nate Cavanaugh

Staff
37 Mensajes
17 de septiembre de 2014
« Atrás

AlloyUI - Working with Ajax

Company Blogs 17 de marzo de 2010 Por Nate Cavanaugh Staff

Ajax is one of those patterns that are a must have with a UI framework, so let's go ahead and jump right into doing some Ajax requests, and then we'll dive into the more complex cases.
 
Let's prep our sandbox, but this time, the module we're going to use is called "aui-io-request".
 
AUI().use('aui-io-request', function(A){
 // Our code will run here
});
 
The simple of the simple, let's assume we're just going to be making a simple ajax request to a plain html file, called "test.html".
 
A.io.request('test.html');
 
That's all there is to it. However, that's not very interesting because it doesn't do anything.
 
Let's say want to send a POST request to the server:
 
A.io.request('test.html', {
   method: 'POST',
   data: {
     key1: 'value'
   }
});
 
How about responding to the server? There are 5 possible callbacks: start, complete, success (or) failure, and end.
 
If I wanted to alert the response from the server, here's what I would do: 
A.io.request('test.html', {
  on: {
   success: function() {
     alert(this.get('responseData'));
   }
  }
});

What is this.get('responseData')? It's basically a normalized property of what is returned from the server. It's useful because A.io.request supports having different types of data returned by the server and automatically handled.
For instance, if your server returns JSON like {"myProperty": 2}, you could do something like:
 
A.io.request('test.html', {
  dataType: 'json',
  on: {
   success: function() {
     alert(this.get('responseData').myProperty); //alerts 2
   }
  }
});
 
You can also work with XML that way. Assuming your server returns something like: <name>AlloyUI</name> you could do:
A.io.request('test.html', {
  dataType: 'xml',
  on: {
    success: function() {
     alert(A.all(this.get('responseData')).all('name').text()); // alerts AlloyUI
    }
  }
});

You can also submit all of the data in a form via ajax as well. Here's the simplest version: 
A.io.request('test.html', {
  form: {

      id: 'myFormId'

  }
});
 
That will serialize all of the data in the form, and send it to "test.html".
 
One other handy feature of this is that you can define an ajax connection once, and reuse it multiple times, and start and stop it later on.
Here's an example: 
var myAjaxRequest = A.io.request('test.html', {
    method: 'POST',
    data: {
      key1: 'value1'

    }

});

Now later on, if I want to make that same ajax call again, all I have to do is call:
 
myAjaxRequest.start();
 
But what if I want to just define the call, but not execute it the first time (for instance, you know you want to run it later, but you don't want to update the server), you can do:
 
var myAjaxRequest = A.io.request('test.html', {
 autoLoad: false,
 ...
});
 
What's cool about this is that if later on, you want to change one of the properties before you send the request, you can do that as well. For instance, let's say you want to disable caching before you start the connection again:
 
myAjaxRequest.set('cache', false);
 
Or if you wanted to change from POST to GET
 
myAjaxRequest.set('method', 'GET');
 
Or change the dataType to JSON:
 
myAjaxRequest.set('dataType', 'json');
 
Or even change the URI at the last moment:
 
myAjaxRequest.set('uri', 'new_test.html');
 
Then when you're ready you would call:
 
myAjaxRequest.start();
 
And if at any time after you have started the request, you want to stop the whole request, you can call:
 
myAjaxRequest.stop();
 
And that's most of it right there. There are some cool plugins that we have that make working with ajax easier, but since the next topic is on plugins, I'll cover those in the next blog post, and they'll be a nice segue between topics.
 
One of those plugins is called A.Plugin.IO, and it's incredibly awesome, because it simplifies the extremely common task of not only loading content into a node or a widget, but adding a loading indicator to that node and automatically parsing the javascript for you.
 
I'll go into more details in the Plugins post, but it's really handy.
 
See you then!
Respuestas anidadas Autor Fecha
Thank You :) . Looking forward for Plugins Post :) Bavithra Rajendran 18 de marzo de 2010 2:47
Cool! Thank you, Nate. Jonas Yuan 18 de marzo de 2010 8:59
Really nice Nate! I do like these posts, I find... Julio Camarero 22 de marzo de 2010 1:56
Hi Nate, Was wondering if its possible to wait... Sandeep Nair 8 de diciembre de 2010 7:35
Hi Nate and thanks for the post. Got a... Andrey Filippov 25 de marzo de 2011 8:36
Hi to Learn More on Liferay Check out this... Rohit Salecha 28 de abril de 2011 23:42
This is good that we have got the client side... Muhammad Asif 5 de junio de 2011 8:01
Ok I have got it. You need to use serveResource... Muhammad Asif 5 de junio de 2011 9:22
how should I use AJAX call in EXT, for example... Aamir Khan 22 de junio de 2011 3:26
I'm not even sure I'm in the right place here: ... Brent Jensen 17 de agosto de 2011 21:39
Hi Brent, that certainly is odd. I'd try the... Nate Cavanaugh 18 de agosto de 2011 9:17
Hi Nate, thank you very much this is a good... Rubén García Tamayo 7 de febrero de 2012 4:10
Thanku for providing cool approach to start... kiran kumar 9 de abril de 2012 23:50
But this calls is it working for Guest users? k venkatesh 7 de mayo de 2012 21:43
Hi everybody I have a data for example <data>... Mahdi Lashkari 10 de octubre de 2012 4:33
Hi Mahdi, this one is pretty simple. You can... Nate Cavanaugh 11 de octubre de 2012 9:23
Thanks nate! but as I said, I want to fetch... Mahdi Lashkari 12 de octubre de 2012 22:52
Hi nate, another thing is that " var x =... Mahdi Lashkari 13 de octubre de 2012 23:27
Any Idea?:( I really need to solve this problem:( Mahdi Lashkari 16 de octubre de 2012 4:32
[...] What we have done so far , Eclipse... Anónimo 29 de abril de 2014 1:23
Hi sir, I want to store 'json data' from '... Shantaram Tupe 18 de septiembre de 2014 1:49

Thank You emoticon . Looking forward for Plugins Post emoticon
Publicado el día 18/03/10 2:47.
Cool! Thank you, Nate.
Publicado el día 18/03/10 8:59.
Really nice Nate! I do like these posts, I find them very useful. Can't wait for the next one! emoticon
Publicado el día 22/03/10 1:56.
Hi Nate,

Was wondering if its possible to wait till the request comes from the server and then process the next block of code. For example i have something like following

var msg="some mesg";
if(true){
msg = msg+someother_msg;
}else{
var test= doAjaxcallhere;
if(test = true){
msg = msg+new message;
}else{
msg = msg + else message
}
}
if(someother condition){
msg= msg+some other condition;
}

Is it possible that i can wait for ajax call response and then move on to further blocks
Publicado el día 8/12/10 7:35.
Hi Nate and thanks for the post. Got a question.. Not long ago I ran into the problem with ajax call. I have a popup dialog with a form that is being submitted in ajax manner. After it I have something like this:

complete: function(id, resp, args) { console.log('complete'); ­ va­r templatePanel = A.one('#portlet:namespace/>prefsPanel'); ­ templatePanel.plug(A.Plugin.IO, { uri: '<%= refreshURL%>', method: 'GET' }­); ­ dialog.close();
},

And my div block is being refreshed only once - after it silence. It is cached somewhere. Although I added cache:false property it would not help... Do you happen to know the way to improve it?

Thanks in advance.
Publicado el día 25/03/11 8:36.
Hi to Learn More on Liferay Check out this blog ,

http://liferaydemystified.blogspot.com/
Publicado el día 28/04/11 23:42 en respuesta a Andrey Filippov.
This is good that we have got the client side of ajax calls. If it is easy still its not clear to me how to handle the ajax request on the server side. I am using MVCPortlet with plain jsp. I would like to know how can I handle ajax request in this architecture on the server side. Thanks.
Publicado el día 5/06/11 8:01.
Ok I have got it. You need to use serveResource method of MVCPortlet. You need to put your business logic in it and then you can return any data type and write out any data in your response. Perhaps there are more things to add. Exploring.
Publicado el día 5/06/11 9:22.
how should I use AJAX call in EXT, for example I am modifieng community portlet, whare I need to put serveResource method
Publicado el día 22/06/11 3:26 en respuesta a Muhammad Asif.
I'm not even sure I'm in the right place here:
My superior is having me learn Liferay for web development. I'm only just now sort getting the hang of themes & designing them. However we have run into a "mystery @ symbol" located above the wrench in the tool icons, where the @ actually takes on the attributes of portet body text but I for the life of me cannot seem to get rid of it or find it within the code. I have a screen shot of the mystery symbol, not sure where/how I can attach it for all to see - at the very least I need some assistance as my superior is breathing down my neck. And if I'm in the wrong place could someone direct me to where I should be. Thanks, Brent
Publicado el día 17/08/11 21:39.
Hi Brent, that certainly is odd. I'd try the forums with perhaps your version info and browser that you're seeing it in (you can link to the forum thread on my wall if you like). For the screenshot, I'd recommend something like Skitch (if you're on a mac) or Dropbox or even one of the the veritable array of options with free image hosts.

I hope that helps emoticon
Publicado el día 18/08/11 9:17 en respuesta a Brent Jensen.
Hi Nate, thank you very much this is a good post to start with aui-ajax!! very good work!!
Publicado el día 7/02/12 4:10 en respuesta a Nate Cavanaugh.
Thanku for providing cool approach to start with ajax. I am working with struts2 portlet in liferay 6 .My portlet class in portlet.xml is Jsr168Dispatcher. i tried using ajax ,request was going fine to my action class but iam unable to retrive proper responseData . I am getting some redundant javascript as my response data . Can u plz guide me where iam going wrong..
Publicado el día 9/04/12 23:50 en respuesta a Rubén García Tamayo.
But this calls is it working for Guest users?
Publicado el día 7/05/12 21:43.
Hi everybody
I have a data for example
<data>
<x> .. </x>
<y> <z> .... </z> </y>
</data>
and I want to fetch <x> data. what should I do?
and I want to fetch <y> data with its inner tag (I want to fetch <z>..</z>). what should I do?
Thanks a lot
Publicado el día 10/10/12 4:33 en respuesta a k venkatesh.
Hi Mahdi, this one is pretty simple. You can pass in a config option called "selector" that will give you a NodeList of the items you want to work with.
So you could do:
A.io.request('path/to/file.xml', {
selector: 'data',
dataType: 'xml',
on: {
success: function(){
var data = this.get('responseData');
var x = data.one('x');
var z = data.one('y z');

console.log(x.text(), z.text()); // prints out values of x and z
}
}
});
Publicado el día 11/10/12 9:23 en respuesta a Mahdi Lashkari.
Thanks nate!
but as I said, I want to fetch all things in <y> tag. I mean I want to fetch "<z>..</z>".
My problem is that I pass html data in xml tags and I want to fetch html data with all of their tags. for example
<data>
<y>
<body> <div="align=center"> Liferay Is the Best </p> </body>
</y> </data>
I want to fetch <body> "<div="align=center"> Liferay Is the Best </p> </body>". what should I do?
Thanks a lot!
Publicado el día 12/10/12 22:52 en respuesta a Nate Cavanaugh.
Hi nate,
another thing is that " var x = data.one('x');" return null and doesn't fetch data emoticon
My code :
AUI().use('aui-io-request','datatype-xml',function(A) {
A.io.request("<%=ajaxActionUrl%>", {
data : {'rId' : A.one('#<portlet:namespace />rd').get('value')
},
selector: 'data',
dataType : 'xml',
on : {
success : function() {
if(this.get('responseData')==null) {
goToStartUrl()
}
else
{
var data = this.get('responseData');
alert(data.one('z));
}
}
}
­ });

});
it alerts null.
Publicado el día 13/10/12 23:27 en respuesta a Mahdi Lashkari.
Any Idea?emoticon I really need to solve this problememoticon
Publicado el día 16/10/12 4:32 en respuesta a Mahdi Lashkari.
[...] What we have done so far , Eclipse Installation Directory Structure Service Builder – I Service Builder – II and continuing to the last part . The MVC Framework and Alloy UI Every Portlet on a... [...] Read More
Publicado el día 29/04/14 1:23.
Hi sir,
I want to store 'json data' from ' this.get('responseData') ' for later use in my aui datatable. How can I store it to a variable .and use it to Datatable . ?
Publicado el día 18/09/14 1:49.