Fire change-event manuell

Question

Hey, ich habe ein Problem damit, ein Change-Event manuell auszulösen.

Also habe ich ein selectOneMenu (das ist wie ein Dropdown in JSF) mit verschiedenen Werten.

Wenn ich einen Wert dieser Dropdown-Liste wähle, sollte eine Datentabelle aktualisiert werden. Dies funktioniert korrekt, wenn ich diesen Wert manuell auswähle.

Jetzt gibt es einen Fall, wo ich einen neuen Wert in das selectOneMenu einfügen muss. Dieser neue Wert wird automatisch ausgewählt, aber das Änderungsereignis zur Aktualisierung der Datentabelle wird nicht ausgelöst ...

Also im Grunde habe ich diese Schaltfläche, um einen neuen Wert in das selectOneMenu zu speichern, der dann korrekt ausgewählt wird, aber der Datentabelle nicht aktualisiert werden, weshalb ich versuchte, die Funktion fireChange() und gab zu schreiben, dass auf die onComplete der Taste:

<p:commandButton ajax="true" id="seatingPlanSave" actionListener="#{EventAssistentController.createSeatingPlan}" value="#{msg.save}" update=":createEvent:EventSeatingPlan, :createEvent:ticketTypePrices" oncomplete="fireChange()"/> 

Für die fireChange() - Funktion, habe ich versucht, ein paar anderen Dinge :

function fireChange() { 
    var element = document.getElementById("createEvent:EventSeatingPlan_input"); 
    element.change(); 
} 


function fireChange() { 
    var element = document.getElementById("createEvent:EventSeatingPlan_input"); 
    $(element).trigger("change"); 
} 


function fireChange() { 
    if ("fireEvent" in element) 
     element.fireEvent("onchange"); 
    else { 
     var evt = document.createEvent("HTMLEvents"); 
     evt.initEvent("change", false, true); 
     element.dispatchEvent(evt); 
    } 
} 

Aber keiner von diesen funktioniert :(

Können Sie mir bitte sagen, wie ich das erreichen kann?

Danke, Xera

Answer 1

Sie sagen nichts über die HTML-Darstellung von createEvent:EventSeatingPlan_input während die für uns obligatorisch ist (und Sie!), Um zu wissen, wie JS Schnittpunkt auf, dass zu lassen. Sie haben auch nicht gesagt, ob Sie <h:selectOneMenu> oder <p:selectOneMenu> verwenden, also können wir uns in der generierten HTML-Darstellung nicht selbst ansehen. Ersteres erzeugt einen <select><option>, während letzteres einen <div><ul><li> generiert, der mit einem versteckten <select><option> interagiert. Beide Darstellungen von Dropdown-Menüs erfordern einen anderen Ansatz in JS. Außerdem sind Informationen darüber erforderlich, wie Sie die Ereignishandlerfunktion change registrieren. Ist es das onchange Attribut oder durch Einbetten eines <f:ajax> oder <p:ajax>?

Auf jeden Fall auf der Grundlage der bisher zur Verfügung gestellten Informationen, ich werde erraten, dass Sie ein

<h:selectOneMenu ...> 
    <f:ajax render="dataTableId" /> 
</h:selectOneMenu> 

haben, die eine <select onchange="..."><option> generieren.

Wie pro Ihrem ersten Versuch:

function fireChange() { 
    var element = document.getElementById("createEvent:EventSeatingPlan_input"); 
    element.change(); 
} 

Dies wird nicht auf <h:selectOneMenu> weil HTMLSelectElement Schnittstelle keine change Eigenschaft noch Verfahren haben. Stattdessen ist es die onchange Eigenschaft, die einen Ereignishandler zurückgibt, der direkt durch Anfügen von () aufgerufen werden kann.

Im Folgenden wird auf <h:selectOneMenu> arbeiten:

function fireChange() { 
    var element = document.getElementById("createEvent:EventSeatingPlan_input"); 
    element.onchange(); 
} 

Doch dies wiederum in <p:selectOneMenu> scheitern, weil es ein HTMLDivElement statt HtmlSelectElement zurückgibt.Die HTMLDivElement verfügt nicht über eine onchange-Eigenschaft, die einen Ereignishandler zurückgibt. Wie gesagt, das <p:selectOneMenu> erzeugt ein <div><ul><li> Widget, das mit einem versteckten <select><option> interagiert. Sie sollten dieses Widget im JS-Kontext registrieren und dann seine spezielle Methode triggerChange() verwenden.

So ein

<p:selectOneMenu widgetVar="w_menu" ...> 
    <p:ajax update="dateTableId" /> 
</p:selectOneMenu> 

gegeben

diese

tun sollten

function fireChange() { 
    w_menu.triggerChange(); 
}