Question

我需要仅使用客户端部分在jsf视图中创建计算器。没有数据可以传递到服务器端。

我将视图分成几个<h:form>，中间有计算器：

<h:form id="customer_form">
// view here working nice
</h:form>                   

<h:panelGroup layout="block" styleClass="ui-grid-col-2 offset-boxes" >

    <p:panel id="calculator" header="Calculadora" styleClass="half-screen-height calculator-table">

        <h:inputText id="result" widgetVar="result" styleClass="result-text"/>
        <p:button value="X" widgetVar="X" ajax="false" onclick="calculate('x')" styleClass="right"></p:button>

        // more calculator buttons   

    </p:panel>

</h:panelGroup>

<h:form id="consumption_form">
// view here working nice
</h:form>

直到这里一切正常，但当我尝试使用javascript管理计算器时：

<script type="text/javascript">
    function calculate(sel){
        if (sel == "x") {
            document.getElementById("result").value = "";
        } else {
            var input = document.getElementById("result").value;
            document.getElementById("result").setAttribute("value", input + sel);
        }                   
    }
</script>

每次更改result值时，都会调用服务器端，并将值重置为原始value。

编辑根据p:button::onclick事件的PrimeFaces文档

单击按钮时执行的客户端回调。

<h:button>标记的行为都是这样的，所以我猜问题是JSF或PrimeFaces处理javascript事件的方式......

我还尝试使用jquery调用并设置$("result").value的输入值，但我得到的结果是function(b7)而不是值本身。

我做错了什么？

谢谢！ ;）

Ĵ

Answer 1

你必须确保你的JS代码不会尝试提交表单，这样会触发服务器端调用，因为我建议你返回false并尝试在你的HTML按钮上使用event.preventDefault（）onclick调用，所以你将避免将事件冒泡到任何听众。

JSF视图中的Javascript计算器调用服务器端

1 个答案: