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（）为空'的异常

任何人都可以为我解决这个问题。

Answer 1

因为JSF中的组件ID与HTML DOM对象ID不同，所以当您在生成的HTML文件中检查组件ID时，可以看到这一点。

通过JSF: working with component identifiers (id/clientId)

查看此博文（McDowell）

Answer 2

尝试将prependId = false属性添加到表单中。当JSF生成html时，这将保留所有子节点的ID。

Answer 3

在浏览器中查看渲染的html。 input元素的id可能类似于“form1：invoiceNumber”，而不仅仅是invoiceNumber。这是因为JSF在呈现为html时会将所有父NamingContainer id添加到组件中。

为了解决这个问题，您可以关闭@sergui建议的prepend id功能，但这可能会产生一些不利影响（即，如果复合组件在同一页面上多次重复使用，则会出现重复ID）。另一种选择是在javascript中存储“clientId”（JSF预置的部分）。

为此，将init（String clientId）函数添加到js文件，然后使用JSF facelet中的内联脚本调用它

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

然后你必须在invoiceId前面加上clientId，但只有在转义JSF使用的分隔符（:)后才会这样。

从＆＃39; document.getElementById（）＆＃39;中获取空值

3 个答案: