I have a select drop down menu where an onChange event will trigger an Ajax call to repopulate the form, followed by calling the javascript function init() which will reorder the sortable divs in the form based on the new data. Using a debugger I discovered that after init() is done the divs would be ordered as expected but then it will execute:
responder = function(event) {
Event.extend(event, element);
handler.call(element, event);
};
in the function function _createResponder(element, eventName, handler) in prototype.js followed by executing
return !scope ? method : function() {
return method.apply(scope, arguments || []);
}; // Function
in the function hitch : function(/Object/scope, /Function|String/method /,.../) in jsf.js that resets the divs back to their original order.
Here is a stripped down snippet of code from my facelet:
<body onload="init()">
<form id="MaintainPreferencesBean">
<t:selectOneMenu id="selectLayout" value="#{maintainPreferencesBean.layoutIndex}">
<f:selectItems value="#{maintainPreferencesBean.layoutNames}" />
<f:ajax listener="#{maintainPreferencesBean.setLayout}" render="@form" onevent="init()" />
</t:selectOneMenu>
<div id="sortable">
<div id="demoGroup" class="dataGroup"></div>
<div id="offenseGroup" class="dataGroup"></div>
</div>
</form>
</body>
Here is the javascript:
function init() {
changeOrder("sortable", "dataGroup", document.getElementById("MaintainPreferencesBean:selectLayout").selectedIndex);
Sortable.create("sortable", {
tag : 'div'
});
}
function changeOrder(container, className, layoutIndex) {
var divs = document.getElementById(container).getElementsByClassName(
className);
for ( var i = 0; i < groupNamesArray.length; i++) {
var div = document
.getElementById(groupNamesArray[desiredOrder[layoutIndex][i]]);
var insPt = divs[i];
if (insPt != null && insPt != div)
insPt.parentNode.insertBefore(div, insPt);
}
}
Note that the divs do get ordered properly on a non-Ajax page refresh. Also the ordering works when I used a valueChangeListener (with the usual phase workaround) instead of Ajax.
