I'm using PrimeFaces. Successfully I implemented many dialogs using PrimeFaces component InputText. For better input formatting and validation on numbers I checked out the component InputNumber of PrimeFaces Extensions. But when I'm using this component my dialog will not be opened by clicking on a button.
After more testing and research I can say more specifically that the problem depends on the locale that is used. So a locale like 'de' or 'en' is OK, but 'de-ch' not. For 'de-ch' the special character apostrophe ' is used as thousand separator.
So using an apostrophe as thousand or decimal separator will produce the error.
In internet explorer 11 I get the following error:
SCRIPT1009: '}' expected
file: jquery.js.xhtml, row: 14, column: 2888
globalEval:function(e){if(e&&bI.trim(e)){(a5.execScript||function(i){a5["eval"].call(a5,i)})(e)}},camelCase:function(e){return e.replace(bS,"ms-")
The error is at a5["eval"].call(a5,i)
In firefox 33.0 I get the following error:
SyntaxError: missing } after property list
I have reduced the problem to the following code:
inputNumber.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:pe="http://primefaces.org/ui/extensions"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<h:form>
<p:panelGrid columns="4">
<p:commandButton id="btnActionListenerPinputText"
value="InputText Dialog via ActionListener"
actionListener="#{dtDialogView.onShowPITDialog}"/>
<p:commandButton id="btnOnSuccessPinputText"
value="InputText Dialog via OnSuccess"
onsuccess="PF('pitDlg').show();"/>
<p:commandButton id="btnOnClickPinputText"
value="InputText Dialog via OnClick"
onclick="PF('pitDlg').show();"/>
<p:commandButton id="btnOnCompletePinputText"
value="InputText Dialog via OnComplete"
oncomplete="PF('pitDlg').show();"/>
<p:commandButton id="btnActionListenerPEinputNumber"
value="InputNumber Dialog via ActionListener"
actionListener="#{dtDialogView.onShowPEINDialog}"/>
<p:commandButton id="btnOnSuccessPEinputNumber"
value="InputNumber Dialog via OnSuccess"
onsuccess="PF('peinDlg').show();"/>
<p:commandButton id="btnOnClickPEinputNumber"
value="InputNumber Dialog via OnClick"
onclick="PF('peinDlg').show();"/>
<p:commandButton id="btnOnCompletePEinputNumber"
value="InputNumber Dialog via OnComplete"
oncomplete="PF('peinDlg').show();"/>
</p:panelGrid>
</h:form>
<!-- primefaces inputText dialog -->
<h:form id="form-dlgpit">
<p:dialog id="dlgpit"
header="PrimeFaces Input Text"
widgetVar="pitDlg"
resizable="false"
dynamic="true"
modal="true">
<h:outputText id="amount_label" value="Amount"/>
<p:inputText id="amount_value" value="#{dtDialogView.amount}" />
<p:commandButton id="btnPitSave"
value="Save"
oncomplete="{PF('pitDlg').hide();}"/>
</p:dialog>
</h:form>
<!-- primefaces extensions inputNumber dialog -->
<h:form id="form-dlgpein">
<p:dialog id="dlgpein"
header="PrimeFaces Extensions Input Number"
widgetVar="peinDlg"
resizable="false"
dynamic="true"
modal="true">
<h:outputText id="amount_label" value="Amount"/>
<pe:inputNumber id="amount_value" value="#{dtDialogView.amount}"
thousandSeparator="'"
decimalSeparator="."/>
<p:commandButton id="btnPeinSave"
value="Save"
oncomplete="{PF('peinDlg').hide();}"/>
</p:dialog>
</h:form>
</h:body>
</html>
DialogView.java
@ManagedBean(name = "dtDialogView")
@ViewScoped
public class DialogView implements Serializable {
private Long amount;
public Long getAmount() {
return amount;
}
public void setAmount(Long amount) {
this.amount = amount;
}
public void onShowPITDialog() {
RequestContext.getCurrentInstance().execute("PF('pitDlg').show();");
}
public void onShowPEINDialog() {
RequestContext.getCurrentInstance().execute("PF('peinDlg').show();");
}
}
The Environment I use:
- PrimeFaces 5.1.3
- PrimeFaces Extensions 3.0.0
- Tomcat 8.0.14
- Java Server Faces 2.2
Until there is a fix in PrimeFaces Extensions, check link in the PrimeFaces Extensions issue tracker and escape the apostrophe with a backslash in the XHTML code.