從'document.getElementById（）'獲取空值

Question

我在review.xhtml頁面上有以下確認框：

<p:confirmDialog message="#{msgs['com.yob.dpg.customerReview.invalid.invoiceDate.message']}" width="400" header="#{msgs['portaal.popup.window.confirmation.title']}" closable="false" widgetVar="invoiceDateConfirmation" showEffect="bounce" hideEffect="explode" severity="alert">
            <p:commandButton value="#{msgs['portaal.popup.window.cancel']}" onclick="invoiceDateConfirmation.hide()" oncomplete="documentWiz.back(); setFocusToInvoiceNumber()" /> 
            <p:spacer width="5"/>  
            <p:commandButton value="#{msgs['common.ok.button']}" update="messages,@form,headerForm:todoCountMenu,welcomeMessage" onclick="invoiceDateConfirmation.hide()" />  
</p:confirmDialog>

.js在documentPreview.xhtml頁面上：

function setFocusToInvoiceNumber(){
    document.getElementById("invoiceNumber").focus();
}

我要設置焦點的輸入文本代碼在'documentPreview.xhtml'上：

<p:inputText  style="color:#4d4d4f; width:280px !important; margin-top: -3px;" id="invoiceNumber" value="#{customerReviewLazyDataModel.customerReviewVO.transactionheaderVO.invoiceNumber}" required="true" requiredMessage="#{msgs['com.yob.dpg.customerReview.mandatory.invoiceNumber']}"/>

我的問題是，當我單擊確認框的取消按鈕時，瀏覽器上拋出了一個異常，即“ document.getElementById（）為null”

誰能給我解決這個問題的方法。

Answer 1

由於JSF中的組件ID與HTML DOM對象ID不同，因此在檢查生成的HTML文件中的組件ID時可以看到這一點。

查看McDowell 撰寫的此博客文章（ JSF：使用組件標識符（id / clientId） ）

Answer 2

嘗試將prependId = false屬性添加到表單中。 當JSF生成html時，這將保留其所有子級的id。

Answer 3

在瀏覽器中檢出呈現的html。 輸入元素的ID可能類似於“ form1：invoiceNumber”，而不是簡單的invoiceNumber。 這是因為JSF在呈現為html時會將所有父NamingContainer id附加到組件上。

為了解決此問題，您可以關閉@id建議的prepend id功能，但這可能會產生一些不利影響（即，如果在同一頁面上多次重復使用復合組件，則存在重復的id）。 另一種選擇是在JavaScript中存儲“ clientId”（JSF准備的部分）。

為此，請將init（String clientId）函數添加到js文件中，然后使用JSF facelet中的內聯腳本對其進行調用

<h:outputScript>init('#{component.clientId}')</h:outputScript>

然后，您必須在invoiceNumber前面加上clientId，但僅在轉義JSF使用的定界符（:)之后。