JSF/a4j Mashups - View State ID Expired

Question

We have a group of web modules that are peer applications to one another. We mash them together using jQuery. These differing modules all use JSF. The different modules may be deployed on different Java EE application servers.

Imagine a JSF page for opening an account. That page might make use of a customer search feature to look up the customer the account is to be opened for. The JSF page with the account open form on it is served from one web module, and the client search page is served up from another.

...jsf page loaded from http://openaccount.com/openForm.xhtml

... code to load a search from from elsewhere...
<script type="text/javascript">
   jQuery(document).ready(function () {
      jQuery('#search_gadget').load('http://search.com/searchForm.xhtml');
                        });
</script>
<search_gadget/>
<br/> .. the rest of the open account form...

...both searchForm and openForm are JSF/a4j pages.

Now, the trouble is that when the searchForm 'gadget' does makes a4j calls to perform searches and new view state id's are returned by it, the view state id's of the openForm.xhtml are updated as well. When the openForm.xhtml is then used to post the form to the server the view state id's are out of synch (since they were last updated by a4j calls to a different web module, which has a differing server side view state).

Is there a way to isolate view state id's appropriate for the manner described above? where we want to be able to isolate jsf view state to mashed-in components from different web modules?

Answer 1

So, here is what we ended up doing...

All our discrete web modules have the same domain, but each has a unique context root www.bank.com/ waw/accounts /somepage.xhtml, or www.bank.com/ waw/transfers /somepage.xhtml. We use these context roots to scope which forms should have their view state updated.

like so (this solution wont work for all ppl that want to mash, but it works for us)...

var wlf_a4jAjaxProcessResponse = A4J.AJAX.processResponse;

function wlf_ajaxIsolate(req){

wlf_saveViewState(req.form);
wlf_a4jAjaxProcessResponse(req);
wlf_restoreViewState();
}

A4J.AJAX.processResponse = wlf_ajaxIsolate;     


function wlf_saveViewState(form) {

  var action = form.baseURI;

  if (typeof action !== 'undefined') {

        var i1 = action.indexOf("/waw/");
        var i2 = action.indexOf("/", i1+5);
        var currentPwa = action.substring(i1+5, i2);

        jQuery("#javax\\.faces\\.ViewState").each(function() {

              var form = jQuery(this).closest("form");
              var formAction = jQuery(form).attr('action');
              var i3 = formAction.indexOf("/waw/");
              var i4 = formAction.indexOf("/", i3+5);
              var pwa = formAction.substring(i3+5, i4);

              if (pwa !== currentPwa) {
                jQuery(this).attr('id',"_javax.faces.ViewState_");
                jQuery(this).attr('name',"_javax.faces.ViewState_");    
              }
        });
  }
};


function wlf_restoreViewState() {

  jQuery("#_javax\\.faces\\.ViewState_").each(function() {

        jQuery(this).attr('id',"javax.faces.ViewState");
        jQuery(this).attr('name',"javax.faces.ViewState");            
  });
};