2016-06-07 44 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时,排序工作。

回答