SyntaxError: missing } using primefaces extensions inputNumber using jquery

Question

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

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

Answer 1

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.

                <pe:inputNumber id="amount_value" value="#{dtDialogView.amount}"
                            thousandSeparator="\'"
                            decimalSeparator="."/>

SyntaxError: missing } using primefaces extensions inputNumber using jquery

Question

1 answers

solution1
0 2014-11-14 10:34:06

SyntaxError: missing } using primefaces extensions inputNumber using jquery

Question

1 answers

solution1 0 2014-11-14 10:34:06

solution1
0 2014-11-14 10:34:06