在 jsf 中完成 javascript 调用后如何调用监听器或支持 bean 方法？

Question

根据我的场景，需要先调用javascript。在 javascript 调用之后，两个隐藏的值将被更新。使用更新的隐藏值，必须调用 Bean 方法。在这种情况下，我同时被称为 javascript 和 bean 方法。所以在我的 bean 方法中，我没有在隐藏字段中获取更新的值。

小细节说明

Textbox(address) 用于输入地址。并有两个隐藏元素，用于根据地址字段存储街道名称和城市名称。

通过 Javascript 调用，从 google maps API (codeAddress()) 收集两个值（街道名称和城市名称）。根据在文本框中输入的地址更新两个隐藏字段（街道和城市）。 Bean 方法必须处理更新后的隐藏值。

但是从我的代码中，Backing bean 和 java 脚本是同时被调用的。所以我没有在支持 Bean 中获得更新的值。

我的代码如下：

JSF 代码

<h:form prependId="false">
    <div id="panel-one">
        <h:outputLabel value="ADDRESS"/>
        <h:inputText type="text" id="address" size="40" value="#{Bean.address}"/>
        <h:inputHidden id="street" value="#{Bean.streetName}" />
        <h:inputHidden id="city" value="#{Bean.city}" />
        <h:commandButton type="submit" value="Verify Address"
            onclick="checkAddress()">
            <f:ajax execute="@form" render="@none" listener="#{Bean.checkAddress()}"/>
        </h:commandButton>
    </div>
</h:form>

Javascript

checkAddress() {
    document.getElementById("street").value = //Setting value from other javascript API;
    document.getElementById("city").value = //Setting value from other javascript API;
}

在上面的 javascript 中收集值并使用两个文本框进行设置。随着更新的值再次调用支持 bean 中的 checkAddress() 方法。 仅供参考： *checkAddress()* 是 AJAX 调用。我在 JSF 的 h:commandButton 中犯了错误，但不知道如何修复它。非常感谢任何帮助。

Answer 1

您提供的代码有几处奇怪：

• 我认为不需要prependId
• 在commandButton 上定义onclick 是个坏主意[tm]
• 你让自己和/或继承该代码的人感到头疼，因为你有一个 JS 函数和一个 bean 方法，两者都称为 checkAddress
• 您似乎没有根据已触发的操作执行任何操作？ （有render="@none"）

也就是说，一种应该满足您需要的技巧是隐藏实际按钮并以编程方式单击它：

<h:form id="addrF">
    <h:outputLabel value="ADDRESS"/>
    <h:inputText type="text" id="address" size="40" value="#{bean.address}"/>
    <button class="clickMe">Verify Address</button>

    <h:inputHidden id="street" value="#{bean.streetName}" />
    <h:inputHidden id="city" value="#{bean.city}" />

    <h:commandButton id="submitBtn" style="display:none;">
        <f:ajax execute="@form" render="@none" listener="#{Bean.checkAddress()}"/>
    </h:commandButton>
</h:form>
<h:outputScript>
    $(".clickMe").click(function(ev) {
        ev.preventDefault();
        $.getJSON(
             "https://maps.googleapis.com/maps/api/geocode/json", 
             { address : $("#addrF\\:address").val() },
             function(data) {
                 // set street, city
                 $('#addrF\\:submitBtn').click();
             }
         );
    });
 </h:outputScript>

您可能需要额外的值验证等，并且您对地图 API 的访问可能会有所不同（我根本没有使用过）。重点是：只有在 ajax 调用完成后，您才需要在隐藏的 commandButton 上 click()。

Answer 2

请尝试在 f:ajax 中使用 event="" 然后使用 onevent 调用 javascript 函数。 事件值将是“点击”，onevent 值将是 javascript 函数的名称。喜欢

Answer 3

您可以尝试为 JavaScript setTimeout() 设置延迟

<h:commandButton type="submit" value="Verify Address"
            onclick="setTimeout(function(){checkAddress()},1000);">

1000 毫秒 = 1 秒，为方便起见，您只需更改该值