將焦點設置在RichFaces中的彈出式面板和動態呈現字段4.1.0

我有一個JSF頁面，其中某些字段在其他字段的「onchange」事件被調用時動態呈現。還有一個彈出式面板，點擊一個按鈕即可打開。這裏是頁的簡化版本：將焦點設置在RichFaces中的彈出式面板和動態呈現字段4.1.0

<h:form id="testForm"> 
     <h:panelGrid id="testPanel" columns="2"> 
      <h:inputText id="text0" /> 
      <h:inputText id="text1"> 
       <f:ajax event="change" listener="#{popupMBean.renderDynamicData}" 
        render="@form" /> 
      </h:inputText> 
      <h:inputText id="text2" rendered="#{popupMBean.renderDynamic}" /> 
      <h:inputText id="text3" /> 
      <a4j:commandButton id="open" value="Open" render="testPopup" 
       oncomplete="#{rich:component('testPopup')}.show();" /> 
     </h:panelGrid> 
    </h:form> 

    <rich:popupPanel id="testPopup" height="100" 
     domElementAttachment="form" header="Test"> 
     <f:facet name="controls"> 
      <h:commandButton value="Close" 
       onclick="#{rich:component('testPopup')}.hide()"></h:commandButton> 
     </f:facet> 
     <a4j:outputPanel id="test"> 
      <a4j:commandButton id="first" value="First" /> 
      <a4j:commandButton id="second" value="Second" /> 
     </a4j:outputPanel> 
    </rich:popupPanel>

我有我需要通過使用鍵盤的所有字段來遍歷需求。以下是所面臨的問題：

當我點擊「打開」按鈕，它顯示的彈出面板，但焦點未設置爲在彈出的第一輸入元件。
當用戶關閉彈出窗口時，應將焦點設置爲生成彈出窗口的字段或其旁邊的字段。
調用字段「text1」上的更改事件後，焦點將移回到頁面上的第一個輸入元素，即「text0」而不是新呈現的字段「text2」。

感謝。

來源

2014-01-06 Niharika G.

經過各種論壇後，我發現這個問題與Rich Faces 4.1（RF-10758）中的錯誤有關。

在RichFaces 4.2.3發行版中，通過對popupPanel.js文件進行更改，Jboss社區已經解決了此錯誤。在popupPanel.js有一個processAllFocusElements函數比較「根」（父窗口）和「this.div」（子窗口）之間。雖然「root」是一個簡單的DOM元素，但「this.div」是jQuery元素的集合，因此兩者之間的比較總是失敗。因此，應該寫（root！= this.div.get（0））而不是（root！= this.div）。

但是我現在不能遷移到RichFaces 4.2。所以我決定來覆蓋默認功能processAllFocusElements用下面的代碼：

jQuery.extend(RichFaces.ui.PopupPanel.prototype, { 
     processAllFocusElements: function(root, callback) { 
      var idx = -1; 
      var tagName; 
      var formElements = "|a|input|select|button|textarea|"; 
      if (root.focus &amp;&amp; root.nodeType == 1 &amp;&amp; (tagName = root.tagName) &amp;&amp; 
       // Many not visible elements have focus method, we is had to avoid processing them. 
       (idx = formElements.indexOf(tagName.toLowerCase())) != -1 &amp;&amp; 
       formElements.charAt(idx - 1) === '|' &amp;&amp; 
       formElements.charAt(idx + tagName.length) === '|' &amp;&amp; 
       !root.disabled &amp;&amp; root.type != "hidden") { 
       callback.call(this, root); 
      } else { 
       if (root != this.div.get(0)) { 
        var child = root.firstChild; 
        while (child) { 
         if (!child.style || child.style.display != 'none') { 
          this.processAllFocusElements(child, callback); 
         } 
         child = child.nextSibling; 
        } 
       } 
      } 
     } 
     } 
    )

這解決了我在原來的問題，但其他問題的問題（1）仍有待處理。

來源

2014-01-07 05:51:32

將焦點設置在RichFaces中的彈出式面板和動態呈現字段4.1.0

回答

相關問題