Tuesday, March 09, 2010

AJAX decoration: using jQuery Metadata for portlet AJAX

I recently examined a JSR 168 portlet which tackled the thorny area of AJAX in a Portlet ( incidentally the portlet I was looking at is the Jasig Calendar Portlet ). The technique used makes all AJAX requests into POSTs which are then passed via the portal and a redirect to a servlet to acquire the desired response. I am not new to JSR 168 portlets and have personally produced several portlets over the past few years. I have also solved the AJAX in a Portlet problem but in a completely different way. The solution I developed I am calling AJAX decoration and relies on the jQuery Metadata plugin. I think both techniques have their merits and possibly could be applicable to different scenarios. I will attempt to illustrate my solution with a simple example app (note this example is not an actual portlet and will work in your servlet container of choice).

The structure of each of my "portlet" JSPs in my example is something like this:

header.jsp


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src=""jquery-1.3.2.min.js"><!--" --></script>
<script type="text/javascript" src=""jquery.metadata.js"><!--" --></script>
</head>
<body>
<div id="content-area">

footer.jsp


</div>
<script type="text/javascript">
var pageContext = "${pageContext.request.contextPath}";
var targetArea = "div#content-area";
</script>
<script type="text/javascript" src=""ajaxDecorated.js"><!--" --></script>
</body>
</html>

somepage.jsp


<%@ include file="header.jsp" %>
<h1>Some Page</h1>

<!-- Content goes here -->

<%@ include file="footer.jsp" %>

Notice that we will be using a consistent target area for our AJAX loaded content; in this case a div with the ID of "content-area". The jQuery Metadata plugin makes it possible to read data stored within CSS classes, doing this is a relatively clean way of storing data within our page. In this approach the content links are decorated with data and in turn this data is used to assign appropriate AJAX behaviour.

For a typical link using a GET we could use:


<a href=""page1.jsp"" class="ajaxRenderURL {link: '/page1.jsp'}">page 1</a>

For form submission we could use:


<form action="page2.jsp" class="ajaxActionURL {link: '/page2.jsp'}">
<input type="submit" />
</form>

The magic happens in the "ajaxDecorated.js" file. When the page initially loads initPage() is invoked which attaches AJAX loading behaviour to links and forms.


$(document).ready(function() {
initPage();
});

function setupLinks(){
var data = $(this).metadata();
var loadlink;
var tsSeparator = "&";
if(data.link.indexOf("?") == -1){
tsSeparator = "?"
}
if(!data.link.match("^" + pageContext)){
loadlink = pageContext + data.link + tsSeparator + new Date().getTime() + " " + targetArea;
} else {
loadlink = data.link + tsSeparator + new Date().getTime() + " " + targetArea;
}
$(targetArea).load(loadlink, null,
function () {
initPage();
});
return false;
}

function setupForms(){
var data = $(this).metadata();
var formdata = $(this).serializeArray();
var loadlink;
if(!data.link.match("^" + pageContext)){
loadlink = pageContext + data.link + " " + targetArea;
} else {
loadlink = data.link + " " + targetArea;
}
$(targetArea).load(loadlink, formdata,
function(){
initPage();
});
return false;
}

function initPage(){
$(targetArea).find('a.ajaxRenderURL').click(setupLinks);
$(targetArea).find('form.ajaxActionURL').submit(setupForms);
}

This technique adds AJAX to a web page in an unobtrusive way. In this simple example the URLs loaded by AJAX and those that would be loaded without are the same (page1.jsp, index.jsp etc). However, in an environment where the AJAX URLs and web page URLs are likely to be different or even change dynamically (such as in a portal) then this technique is equally applicable.

3 comments:

m vivi said...

Nevertheless, before you decide to attempt to purchase electronic breitling replica uk wrist watches, it is best that you should fix several focal points : simply to help to make buying simpler. Designer watches, particularly breitling replica watches tend to be traditionally used through males and females for a lot of decades. Luxurious wrist watches such as Panerai as well as IWC tend to be typically the most popular designer watches through effective rolex replica sale watchmakers through France as well as Swiss. However it may seem that if you will find additional manufacturers associated with watches after that the reason why purchase a rolex replica view? These days you're going to get Panerai sports activities wrist watches that have unchangeable style. Many people might even possess a query within their thoughts why purchase a good rolex replica sale view?

Coco Ada said...




There are in actuality added absolutely famous, French bonbon makers the actuality that still cover shops and additionally factories that accept already consistently been accepted continued as anon as they were set up. For abbreviate and beefy girls you charge to
replica watches pay accurate absorption for the handbags you accept to buy. Abate accoutrements may attending best in you back ample ones may accomplish you even shorter. Abbreviate purses will actualize acme and will accomplish you attending taller than you use to hermes replica be.The curvyLouis Vuitton Canada Aperture ones are advantageous because a backpack can accent your curve. You can accept a backpack that hits just aloft the waist. These will attending abundant in breitling replica your posture. Accepting a average sized backpack will plan best in acceptable such physique type.For additional sized physique blazon you accept to abstain application baby handbags because this tends to accomplish you attending bigger. Aswell abstain handbags that has abbreviate straps. Try handbags Cheap Louis Vuitton Handbags that are hardly added and beyond than accustomed sizes back they will accomplish you arise smaller.So now you already accept an louis vuitton replica abstraction how to accept a backpack that apparel your physique type. Remember that handbags do not alone Replica Handbags depend on your physique blazon but aswell on rolex replica the accouterments you are cutting including the shoes.Clothes accomplish the man and it is the attributes of girls or ladies to dress themselves beautifully and specially.





Zhou Haoyang said...

Charms series is suitable for various occasions, replica rolex color harmony, echoing Huang Kjin and Malachite diamonds and replica watches other jewelry works by rendering. A family of exquisite jewelry rolex replica series with personal preferences match, especially the new works of Alhambra and Perl watch collocation e series to wear, the effect of perfection. Whether want bold or subtle low-key style, a combination of changes can be accompanied by thousands of times and sparkling.