Blogs

News

AlloyUI - Working with Ajax

Nate Cavanaugh

Modified

3/18/10 6:11 AM

2 Minute Read

Liferay.com

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. has been featured at


           
             
           
           
            Let's prep our sandbox, but this time, the module we're going to use is called "aui-io-request".
           
           
             
           
 HTML5 Gallery for our recent move to HTML5. Visit their entry for Liferay @ http://html5gallery.com/2010/03/liferay/.
 
AUI().use('aui-io-request', function(A){
 What is HTML5 Gallery? HTML5 Gallery showcases sites using HTML5 markup, and right now we're one of only five commercial sites listed, and within that category one of only two in English. We're also the only featured portal company running HTML5. Take the time to check out the site, other sites running HTML5, and rate some of your favorite HTML5 websites.
 What is HTML5 and what is all the fuss about? HTML5 is a new version of HTML which addresses new challenges we face in modern web development; everything from writing web applications and maintaining sanity, creating // 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: {

21 Comments

Please sign in to comment.

Thank You

. Looking forward for Plugins Post emoticon

Please sign in to reply.

Cool! Thank you, Nate.

Please sign in to reply.

Really nice Nate! I do like these posts, I find them very useful. Can't wait for the next one! emoticon

Please sign in to reply.

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

Please sign in to reply.

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'); var 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.

Please sign in to reply.

Hi to Learn More on Liferay Check out this blog ,

http://liferaydemystified.blogspot.com/

Please sign in to reply.

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.

Please sign in to reply.

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.

Please sign in to reply.

how should I use AJAX call in EXT, for example I am modifieng community portlet, whare I need to put serveResource method

Please sign in to reply.

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

Please sign in to reply.

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

Please sign in to reply.

Hi Nate, thank you very much this is a good post to start with aui-ajax!! very good work!!

Please sign in to reply.

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..

Please sign in to reply.

But this calls is it working for Guest users?

Please sign in to reply.

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

Please sign in to reply.

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
}
}
});

Please sign in to reply.

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!

Please sign in to reply.

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.

Please sign in to reply.

Any Idea?

I really need to solve this problem emoticon

Please sign in to reply.

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 . ?

Please sign in to reply.