Sự kiện thay đổi lửa theo cách thủ công

Question

Tôi đã gặp sự cố khi kích hoạt sự kiện thay đổi theo cách thủ công.

Vì vậy, tôi có một selectOneMenu (không giống như trình đơn thả xuống trong jsf) với các giá trị khác nhau.

Nếu tôi chọn giá trị của danh sách thả xuống này, có thể cập nhật dữ liệu. Điều này hoạt động chính xác, nếu tôi chọn giá trị này theo cách thủ công.

Hiện có trường hợp, tôi cần chèn giá trị mới vào selectOneMenu. Giá trị mới này được chọn tự động, nhưng sự kiện thay đổi để cập nhật dữ liệu không được kích hoạt ...

Vì vậy, về cơ bản tôi có nút này để lưu giá trị mới vào selectOneMenu sau đó được chọn đúng, nhưng DataTable không được cập nhật, đó là lý do tôi đã cố gắng để viết chức năng fireChange() và cho rằng đến onComplete của nút:

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

Đối với fireChange() - chức năng, tôi đã cố gắng một vài điều khác nhau :

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

Nhưng không cách nào trong số này hoạt động: (

Bạn có thể cho tôi biết cách tôi có thể đạt được điều này không?

Cảm ơn, Xera

Answer 1

Bạn đã không nói bất cứ điều gì về các đại diện HTML của createEvent:EventSeatingPlan_input trong khi đó là bắt buộc đối với chúng ta (và bạn!) Để biết làm thế nào để cho JS đánh chặn trên đó. Bạn không cho biết liệu bạn có đang sử dụng <h:selectOneMenu> hoặc <p:selectOneMenu>, vì vậy, chúng tôi không thể xem chính mình trong biểu diễn HTML được tạo. Trước đây tạo ra một <select><option> trong khi sau đó tạo ra một <div><ul><li> tương tác với một ẩn <select><option>. Cả hai biểu diễn các menu thả xuống đều yêu cầu một cách tiếp cận khác trong JS. Ngoài ra, thông tin về cách bạn đang đăng ký chức năng xử lý sự kiện change là bắt buộc. Có phải do cố định thuộc tính onchange hoặc bằng cách nhúng <f:ajax> hoặc <p:ajax>?

Trong bất kỳ cách nào, dựa trên thông tin cung cấp cho đến nay, tôi sẽ đoán mà bạn đã một

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

mà sẽ tạo ra một <select onchange="..."><option>.

Theo nỗ lực đầu tiên của bạn:

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

này sẽ thất bại trên <h:selectOneMenu> vì HTMLSelectElement giao diện không có một tài sản change hay phương pháp. Thay vào đó, nó là thuộc tính onchange trả về trình xử lý sự kiện có thể được gọi trực tiếp bằng cách gắn thêm ().

Sau đây sẽ làm việc trên <h:selectOneMenu>:

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

Tuy nhiên điều này sẽ lần lượt thất bại trong <p:selectOneMenu>, bởi vì nó sẽ trả về một HTMLDivElement thay vì HtmlSelectElement.Số HTMLDivElement không có thuộc tính onchange trả về trình xử lý sự kiện. Như đã nói, các <p:selectOneMenu> tạo ra một widget <div><ul><li> tương tác với một ẩn <select><option>. Bạn nên đăng ký tiện ích này trong ngữ cảnh JS và sau đó sử dụng phương thức đặc biệt triggerChange() của nó.

Vì vậy, cho một

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

này nên làm

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