jsf 2 -如何在jsf中完成javascript调用后调用侦听器或后台bean方法

Question

根据我的场景，需要先调用javascript。javascript调用之后，两个隐藏的值将被更新。用更新后的隐藏值，必须调用Bean方法。在这个场景中，我同时调用javascript和bean方法。所以在我的bean方法中，我没有得到隐藏字段中的更新值。

小细节说明

文本框(address)用于输入地址。并且有两个隐藏元素，将用于存储基于地址字段的街道名称和城市名称。

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

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

我的代码如下: 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>

您可能需要额外的值验证等，并且您对map 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秒，您只需更改该值为您的方便