Ręczna wymiana ognia

Question

Hej, mam problem z ręcznym wywołaniem zdarzenia zmiany.

Tak więc mam selectOneMenu (nie jest jak dropdown w jsf) z różnymi wartościami.

Jeśli wybiorę wartość z tej rozwijanej listy, należy zaktualizować datatable. Działa to poprawnie, jeśli wybiorę tę wartość ręcznie.

Teraz jest przypadek, w którym muszę wstawić nową wartość do selectOneMenu. Ta nowa wartość zostanie wybrana automatycznie, ale zdarzenie change, aby zaktualizować datatable, nie zostanie uruchomione ...

Tak więc mam ten przycisk, aby zapisać nową wartość w selectOneMenu, która następnie zostanie wybrana poprawnie, ale DataTable nie zostanie zaktualizowane, dlatego starałem się napisać fireChange function() i dał to do onComplete przycisku:

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

dla fireChange() - funkcja, próbowałem kilka różnych rzeczy :

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

Ale żadna z tych czynności nie działa :(

Czy możesz mi powiedzieć, jak mogę to osiągnąć?

Dzięki Xera

Answer 1

Nie powiedziałeś nic o reprezentacji HTML createEvent:EventSeatingPlan_input natomiast to obowiązkowe dla nas (i dla ciebie!), Aby wiedzieć, jak pozwolić JS osią na ten temat. Nie powiedziałeś też, czy używasz <h:selectOneMenu> lub <p:selectOneMenu>, więc nie możemy sami przyjrzeć się wygenerowanej reprezentacji HTML. Pierwszy z nich generuje <select><option>, a drugi generuje <div><ul><li>, który współdziała z ukrytym <select><option>. Obie reprezentacje menu rozwijanych wymagają innego podejścia w JS. Ponadto informacje na temat rejestrowania funkcji obsługi zdarzeń change są obowiązkowe. Czy jest to przez przypisanie atrybutu onchange do twardych dysków, czy też przez osadzenie wartości <f:ajax> lub <p:ajax>?

W jakikolwiek sposób, na podstawie informacji dostarczonych do tej pory, będę odgadnąć że masz do

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

które będą generować <select onchange="..."><option>.

Jak na pierwszą próbę:

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

to zawiedzie na <h:selectOneMenu> ponieważ HTMLSelectElement interfejsu nie posiada właściwości change ani metody. Zamiast tego jest to właściwość, która zwraca procedurę obsługi zdarzenia, która może być bezpośrednio wywołana przez dołączenie ().

Poniższe zadziała na <h:selectOneMenu>:

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

Jednak wola ta z kolei nie w <p:selectOneMenu>, ponieważ zwraca HTMLDivElement zamiast HtmlSelectElement.Obiekt HTMLDivElement nie ma właściwości onchange, która zwraca procedurę obsługi zdarzeń. Jak już wspomniano, <p:selectOneMenu> generuje widżet <div><ul><li>, który współdziała z ukrytym <select><option>. Rejestr ten należy zarejestrować w kontekście JS, a następnie użyć jego specjalnej metody triggerChange().

więc, biorąc pod uwagę

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

powinien to zrobić

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