0
我有一個選擇下拉菜單,onChange事件將觸發Ajax調用重新填充表單,接着調用javascript函數init(),它將重新排序基於新數據的形式。使用調試器,我發現的init()完成後如預期的div將被責令但隨後將執行:Scriptaculous可排序無法正常使用Ajax和JSF
responder = function(event) {
Event.extend(event, element);
handler.call(element, event);
};
在功能
功能_createResponder(元素,eventName的,處理程序)在prototype.js中
接着在上述功能執行
return !scope ? method : function() {
return method.apply(scope, arguments || []);
}; // Function
障礙:功能(/ 對象 /範圍,/ 函數|字符串 /方法/ ,... /)在jsf.js重置divs回到他們的原始順序。
這裏是一個精簡的代碼片斷從我的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>
這裏是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);
}
}
注意的div確實會在非Ajax頁面刷新正常有序。此外,當我使用valueChangeListener(使用通常的階段替代方法)而不是Ajax時,排序工作。