JSF thành phần tùy chỉnh mất tiêu điểm đầu vào trên bản cập nhật ajax

Question

Tôi đang viết thành phần tùy chỉnh tự động hoàn thành dưới dạng bài tập học tập với JSF 2.1.3. Ý tưởng (có lẽ là khá quen thuộc) là nhập một số văn bản vào và thành phần đầu vào và trình bày một hộp danh sách với các giá trị phù hợp. Ý tưởng là để có sự kiện javascript khóa trên đầu vào gọi jsf.ajax.request() để cập nhật thành phần. Cho đến nay tôi đã có một thành phần mà tôi có thể bao gồm như này:

<mycc:autocomplete id="myauto" searchMethod="#{bean.doSearch}"/> 

này làm cho html như thế này:

<span id="myauto"> 
    <input type="text" id="myauto_input" name="myauto_input" 
    onkeyup="com.myco.ajaxRequest(this, event)"/> 
    <select id="myauto_listbox" name="myauto_listbox"> 
    <option value="1st">First</option> 
    <option value="2nd">Second</option> 
    </select> 
</span> 

Các com.myco.ajaxRequest() chức năng javascript (KeyUp) thực hiện này:

jsf.ajax.request(comp, null, { 
       execute: 'myauto', 
       render: 'myauto' 
       }); 

vì vậy, bởi vì tôi muốn xây dựng lại và rerender ListBox với những gợi ý danh sách, tôi lại vẽ các thành phần tùy chỉnh 'myauto'. Bằng cách chỉ định thực hiện: 'myauto' phương thức decode() thực hiện và tôi có thể nhận được giá trị đầu vào. Bằng cách chỉ định hiển thị: phương thức 'myauto' mã hóa ...() thực thi để tạo lại html.

Điều này là tốt nhưng vì tôi đang hiển thị phụ huynh của thành phần myauto_input Tôi mất tiêu điểm đầu vào mỗi khi sự kiện khóa bàn phím kích hoạt.

Nếu tôi chỉ định một cái gì đó như hiển thị: 'myauto_listbox' (Tôi chỉ thực sự muốn đặt lại hộp danh sách sau khi tất cả) vấn đề là các phương thức mã hóa ...() không thực thi, vì chúng dành cho toàn bộ thành phần tùy chỉnh, không chỉ là hộp danh sách. Và nó sẽ là một trong các phương thức mã hóa ...() mà tôi xây dựng lại hộp danh sách chứa các đề xuất.

Các thành phần mở rộng UIInput và tôi tạo đánh dấu trong một renderer riêng (componentFamily = "javax.faces.Input") trong phương pháp encodeEnd() (vì vậy này luôn chạy sau khi bất kỳ chuyển đổi cung cấp - chưa thực hiện). Tôi giả sử mà buộc tập trung từ javascript là một hack khủng khiếp và để tránh.

Tôi không chắc chắn nên đi đâu với điều này, nhưng tôi nghi ngờ rằng những gì tôi thấy chỉ ra rằng tôi đang tiếp cận điều này một cách sai lầm bằng cách nào đó. Nếu bất cứ ai sẽ là đủ tốt để chỉ cho tôi đúng hướng tôi rất muốn đánh giá cao nó.

Answer 1

Tôi đã dành thời gian nhìn vào điều này và các vấn đề chung của mất tập trung sau khi một bản cập nhật ajax là khá phổ biến và được mô tả trong Jim Driscoll của blog (xem 'Giữ Focus').

Trong trường hợp thành phần tùy chỉnh của tôi, tôi nghĩ rằng mình phải cập nhật thành phần tùy chỉnh chính là phụ huynh của đầu vào, vì vậy tôi sẽ mất tiêu điểm do kết quả của ajax cập nhật, và đó chỉ là cách nó được. Như vậy tôi đã xem xét những gì cần phải được thực hiện để khôi phục tiêu điểm và có vẻ như trong mã hóa trình kết xuất của tôi, chỉ cần buộc khôi phục tiêu điểm vào đầu vào, nhưng chỉ khi trả lời POST được gửi từ sự kiện onkeyup jsf.ajax.request. Tôi sử dụng jQuery và chỉ cần gọi.focus() không phải là đủ bởi vì bạn cũng phải lấy vị trí con trỏ đến cuối bất kỳ đầu vào hiện tại nào. Mã này dưới đây dường như làm việc ok:

<script> 
    jQuery(function($){var cid='#myauto_input';$(cid).focus().focus().click();$(cid).val($(cid).val());}); 
</script> 

(lưu ý:.. .focus() tập trung() click() cần thiết cho IE8, chỉ .focus() hoạt động trên chrome ...)

Vì vậy, có vẻ như các hack khủng khiếp đã lưu trong ngày. Tôi đã tự hỏi nếu có sẽ là bất kỳ sự khác biệt nếu tôi sử dụng các thói quen ajax jQuery hơn là thư viện jsf ajax nhưng Tôi không cho rằng nó sẽ tạo ra bất kỳ sự khác biệt nào.