Question

我有一个选择下拉菜单，其中onChange事件将触发Ajax调用以重新填充表单，然后调用javascript函数init（），它将根据新数据重新排序表单中的可排序div。使用调试器我发现在init（）完成后，div将按预期排序，但随后会执行：

responder = function(event) {
      Event.extend(event, element);
      handler.call(element, event);
    };

在prototype.js函数中的函数_createResponder（element，eventName，handler），然后执行

return !scope ? method : function() {
        return method.apply(scope, arguments || []);
    }; // Function

函数 hitch：function（/ Object / scope，/ Function | String / method / ，... /）在jsf.js中将div重置为原始顺序。

以下是我脸谱中的一段精简代码：

<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);
    }
}

请注意，在非Ajax页面刷新时，div会正确排序。当我使用valueChangeListener（使用通常的阶段解决方法）而不是Ajax时，排序也有效。

Answer 1

事实证明我需要决定何时应该执行javascript。

可以在此处找到更多信息：How to re-execute javascript function after form reRender?

Scriptaculous Sortable无法正常使用Ajax和JSF

1 个答案: