JSF 2 下拉 JavaScript 和 Ajax 支持

Question

我有一个非常具体的要求，即使用 JavaScript、JSF 2 和 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 属性中。但它在我的情况下不起作用，并且在浏览器中出现此控制台错误。

Answer 1

无论如何我找到了解决方案并且认为它会有所帮助。一些有价值的发现：
1。如果要访问 JavaScript 中的 bean 变量，请将脚本放在 form 中。
2。 "onevent" 中的函数有自己的变量 "data" 并且有不同的状态（开始，完成和成功 )。只有当状态为 "success" 时才执行任务，否则它将运行 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>

JSF 2 下拉 JavaScript 和 Ajax 支持

JSF 2 Drop down with JavaScript and Ajax support

javascript

java

ajax

jsf-2