Evento di segnalazione incendio manuale

Question

Ehi, ho un problema con l'attivazione manuale di un evento di modifica.

Quindi ho un SelectOneMenu (mi piace un menu a discesa in jsf) con valori diversi.

Se scelgo un valore di questo elenco a discesa, è necessario aggiornare un datatable. Funziona correttamente, se scelgo questo valore manualmente.

Ora c'è un caso, in cui ho bisogno di inserire un nuovo valore per selectOneMenu. Questo nuovo valore viene selezionato automaticamente, ma l'evento di modifica per aggiornare il datatable non viene generato ...

Quindi in pratica ho questo pulsante per salvare un nuovo valore per selectOneMenu che viene selezionato correttamente, ma il DataTable non viene aggiornato, ed è per questo ho cercato di scrivere la funzione fireChange() e dato che al onComplete del pulsante:

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

per la fireChange() - la funzione, ho provato un paio di cose diverse :

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

Ma nessuno di questi lavori :(

Potete dirmi come posso ottenere questo?

Grazie, Xera

Answer 1

Non ha detto nulla circa la rappresentazione HTML della createEvent:EventSeatingPlan_input mentre questo è obbligatorio per noi (e voi!) Al fine di sapere come lasciare JS intercettare su questo. Non hai detto né se stavi usando <h:selectOneMenu> o <p:selectOneMenu>, quindi non possiamo dare un'occhiata alla rappresentazione HTML generata. Il primo genera uno <select><option> mentre il secondo genera un <div><ul><li> che interagisce con un <select><option> nascosto. Entrambe le rappresentazioni dei menu a discesa richiedono un approccio diverso in JS. Inoltre, le informazioni su come stai registrando la funzione di gestore eventi change sono obbligatorie. È provando a fatica l'attributo onchange o incorporando uno <f:ajax> o <p:ajax>?

In ogni modo, sulla base delle informazioni fornite finora, io immagino che hai un

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

che genererà una <select onchange="..."><option>.

Secondo il vostro primo tentativo:

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

Questo non riuscirà a <h:selectOneMenu> perché HTMLSelectElement interfaccia non hanno una proprietà change né metodo. Al contrario, è la proprietà onchange che restituisce un gestore di eventi che può essere richiamato direttamente aggiungendo ().

Quanto segue funziona su <h:selectOneMenu>:

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

Tuttavia questo a sua volta fallire in <p:selectOneMenu>, perché restituisce un HTMLDivElement invece di HtmlSelectElement.Il HTMLDivElement non ha una proprietà onchange che restituisce un gestore di eventi. Come detto, <p:selectOneMenu> genera un widget <div><ul><li> che interagisce con un <select><option> nascosto. Dovresti registrare questo widget nel contesto di JS e quindi usare il suo speciale metodo triggerChange().

Quindi, dato un

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

questo dovrebbe fare

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