Painted myself into a corner with AJAX...

[Andrew Robinson <an...@gmail.com>]

Looking for some tips here. I have a site that uses, heavily, facelets
and AjaxAnywhere.

I have pages that can have a "child" window that we use for displaying
wizards. So the main page stays the same, and the wizard rotates.

The way I implemented this is with facelets and a dynmic ui:include.
When the user does something to trigger a change in the wizard, I use
AjaxAnywhere to update just the DIV tag that contains my wizard.

This is working great for the most part. The problem is that 20% is
killing me. The problem I am having is with dynamic IDs and duplicate
IDs on the client as a result.

So, lets say I have the following HTML result (2 dynamic IDs in this
wizard page):
<div id="myform:_id1">
<!-- wizard/ajax zone: -->
<div id="myform:_id2"/>
<div id="myform:_id3"/>
<!-- end wizard/ajax zone -->
<div id="myform:_id4"/>

Now, the user hits a page with 3 dynamic IDs in the wizard page:
<div id="myform:_id1">
<!-- wizard/ajax zone: -->
<div id="myform:_id2"/>
<div id="myform:_id3"/>
<div id="myform:_id4"/>
<!-- end wizard/ajax zone -->
<div id="myform:_id4"/>

The last control is _id5 on the server, and _id4 on the client because
I didn't update the entire page on the client.

Once that happens, things start getting messy. JavaScript fails
(getElementById isn't too happy), the component state is messed up if
I try to post all controls back and the current client controls have
different IDs than the server controls.

Obviously a disaster. I think I made a bad choice by using ui:include
as a means to swap out the wizard. One idea would have been to use a
panel stack to have all wizards created, then just change which page
is shown by using the good ole rendered flag, but I wonder if that
will be messy as well as we have a lot of wizards for some of the
pages (would produce a huge component tree).

I'm basically stuck on the component IDs. The only thing that would
allow it to work is if parent UIComponent's always got their ID
assigned before their children. That way I would know that the parent
ID's would never change, and therefore I could safely update an inner
portion of the page without ID problems. I'm not sure how I would
implement this though (my own view handler?)

Before I went down that route, I was wondering if anyone could come up
with a better solution?

Thanks,
Andrew