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

【问题标题】：Javascript calculator in JSF view calling server sideJSF视图调用服务器端的Javascript计算器
【发布时间】：2025-11-26 10:25:01
【问题描述】：

我需要只使用客户端部分在 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) 而不是值本身。

我做错了什么？

谢谢！ ;)

【问题讨论】：

如果您不想向服务器端发送任何内容，为什么不使用纯 Javascript 来完成这项工作？处理起来会更容易，代码混合更少，你也可以轻松使用 JS 组件。
类似？，我尝试了几件事，但似乎没有任何工作...... :(
有几个 JS 示例，例如：codeproject.com/Tips/631525/…
当然，我已经尝试过几种类似的方法。我可以轻松地在 html 页面中制作一个 javascript 计算器，但在这里我认为 jsf 正在后台执行它的“magic”并以我无法弄清楚的方式调用服务器端。
你必须确保你的 JS 代码不会尝试提交表单，这样会触发服务器端调用，为此我建议你返回 false 并尝试使用 event.preventDefault()在你的按钮上，这样你就可以避免将事件冒泡给任何听众。

标签： jsf primefaces

【解决方案1】：

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

【讨论】：