2016-06-07 47 views
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時,排序工作。

回答