Deferred loading of dynamic elements

[mcmagi]

Hello,

I am using the struts2-jquery plugin in my project and have run into a
performance-related snag. I have several pages with ajax components
tied to one another via reload topics - for example, similar to the
ajax double select, but we're actually using a triple-select. What
we're seeing in firebug is that after the page loads there are six
ajax requests: three (one each) for the initial loading of each select
box, one to reload the 2nd select box once the success topic of the
1st is published, and two to reload the 3rd select box once the
success topic of the 2nd is published (since the second essentially
loads twice).

The number of requests could be brought down to only three if there
were a way to "defer" loading of the 2nd and 3rd select boxes since we
know that their values are always dependent on the proceeding one and
should not load until one of their reloadTopics is published. To
handle this, I'm imagining a "deferredLoading" attribute on the select
tag (and others like it) which takes a boolean value and would be
false by default. Looking at the source code, it seems fairly easy to
add such behavior by making small modifications to AbstractRemoteBean
and jquery.struts2.js.

Before I go ahead and hack away for my own project's purposes, I was
wondering if you would be interested in incorporating the solution
into the plugin. If so, do you have any other thoughts or
recommendations related to the above?

Thanks,
- Michael C. Maggio

[jogep]

Hello Michael,

patches and contributes are always welcome!

currently i don't understand the problem,
maybe a code sample and your patch will be
create to understand your Issue.

Best Regards

Johannes Geppert

---
web: http://www.jgeppert.com
twitter: http://twitter.com/jogep

[mcmagi]

Here is an example of something we are trying to do:

<s:url id="regionList" action="json/workUnitType"
method="regions" />
<sj:select href="%{regionList}" name="regionId" list="regions"
headerKey="-1" headerValue="Please Select" listKey="value"
listValue="label"
onSuccessTopics="regionChanged"
onChangeTopics="regionChanged" />

<s:url id="workUnitTypeList" action="json/workUnitType"
method="workUnitTypesByRegion" />
<sj:select href="%{workUnitTypeList}" name="workUnitTypeId"
list="workUnitTypes"
headerKey="-1" headerValue="Please Select" listKey="value"
listValue="label"
reloadTopics="regionChanged"
onSuccessTopics="workUnitTypeChanged"
onChangeTopics="workUnitTypeChanged" />

<s:url id="targetDateField" action="loadFields"
method="targetDate" />
<sj:div href="%{targetDateField}" formIds="loadOneForm"
reloadTopics="workUnitTypeChanged" />

Firebug then shows the following requests when the page loads:

/json/workUnitType!regions.action
/json/workUnitType!workUnitTypesByRegion.action
/loadFields!targetDate.action
/json/workUnitType!workUnitTypesByRegion.action
/loadFields!targetDate.action
/loadFields!targetDate.action

There are one request for the first select, two requests for the
second select, and three requests for the div. However, if they all
were aware of their inter-dependencies and loaded in the correct
order, only one request for each should really be necessary. Now the
real page actually has several divs driven by the second select box,
so there are actually several more requests - but they each load three
times. This is what I imagine "deferredLoading" would resolve.