JSF 2下载JavaScript和Ajax支持[重复]

Posted 2021-05-04

这个问题在这里已有答案：

• Execute JavaScript before and after the f:ajax listener is invoked 1回答

我有一个非常具体的要求，它使用JSF 2的javascript，JSF 2和Ajax功能。我有一个带有两个值的下拉列表。说A和B.

<h:selectOneMenu class="form-control" id="sampleList" value="#{beanName.tempValue}">
    <f:selectItem itemLabel="Select value..." itemValue="0" />
    <f:selectItem itemLabel="A" itemValue="a" />
    <f:selectItem itemLabel="B" itemValue="b" />
    <f:ajax event="change" listener="#{beanName.actionMethodToNavigate}" onevent="if (this.value=='0'){ return false;} else if (this.value=='a'){jumpToAhchor('#listItems');return false;}"/>
</h:selectOneMenu>

如果下拉值为“a”，则用户停留在同一页面上，并使用JavaScript在同一屏幕上向下锚定其他元素。如果值为B，则调用bean方法，最终将用户导航到其他屏幕。

我试图搜索许多示例，许多人建议将JavaScript放在onevent属性中。但它在我的情况下不起作用，并在浏览器中收到此控制台错误。

答案

无论如何，我找到了解决方案并认为它会有所帮助。一些宝贵的发现： 1.如果要在JavaScript中访问bean变量，请将脚本放在表单中。 2.“onevent”中的函数有自己的变量“data”，具有不同的状态（开始，完成和成功）。仅在状态为“成功”时执行任务，否则将运行3次。 3. JSF and Jquery AJAX - How can I make them work together? - 有关状态的更多信息，请参阅此处

<h:selectOneMenu class="form-control" id="sampleList" value="#{beanName.tempValue}">
    <f:selectItem itemLabel="Select value..." itemValue="0" />
    <f:selectItem itemLabel="A" itemValue="a" />
    <f:selectItem itemLabel="B" itemValue="b" />
    <f:ajax event="change" listener="#{beanName.actionMethodToNavigate}" onevent="function(data){clickToNavigate(data, '#{beanName.tempValue}')}"/>
</h:selectOneMenu>

<script>
    function clickToNavigate(data, value){
        if(data.status=="success"){
            if (value=='0'){ 
                return false;
            } else if (value=='a'){
                 jumpToAhchor('#listItems');
                 return false;
            }
        }
    }
</script>