2016-06-07 14 views
0

Ich habe eine Auswahl Dropdown-Menü, in dem ein OnChange-Ereignis einen Ajax-Aufruf zum erneuten Auffüllen des Formulars ausgelöst wird, gefolgt von Aufruf der JavaScript-Funktion init(), die Sortierung der sortierbaren divs in der basierend auf den neuen Daten. Mit einem Debugger ich entdeckt, dass nach der init() wie erwartet bestellt würden die divs getan wird, aber dann wird es ausführen:Scriptaculous Sortierbar funktioniert nicht richtig mit Ajax und JSF

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

in der Funktion Funktion _createResponder (Element, eventname, handler) in prototype.js gefolgt von

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

in der Funktion Kupplung Ausführung: function (/ Objekt/Umfang/Funktion | String/Verfahren/... /) in jsf.js, die die divs in ihre ursprüngliche Reihenfolge zurücksetzt.

ist hier ein Code-Schnipsel aus meinem Facelet nach unten ausgezogen:

<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> 

Hier ist die 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); 
    } 
} 

Beachten Sie, dass die div-Tags korrekt auf einer Aktualisierung der Seite nicht-Ajax bestellt bekommen . Die Reihenfolge funktioniert auch, wenn ich einen ValueChangeListener (mit der üblichen Phasenumgehung) anstelle von Ajax verwendet habe.

Antwort

Verwandte Themen