通知JSF服务器端有关Jquery / Ajax对(DOM)客户端状态所做的更改

时间:2012-07-12 11:19:47

标签: jquery dom jsf-2 rich-client-platform

使用基于组件的框架(如JSF),定义了一个复选框的组件:

<h:selectManyCheckbox value="#{user.favNumber1}">
    <f:selectItem itemValue="1" itemLabel="Number1 - 1" />
    <f:selectItem itemValue="2" itemLabel="Number1 - 2" />
    <f:selectItem itemValue="3" itemLabel="Number1 - 3" />
</h:selectManyCheckbox>

生成的(x-html)代码如下所示:

<table>
<tr>
  <td>
    <input name="j_idt6:j_idt10" id="j_idt6:j_idt10:0" value="1" type="checkbox" />
    <label for="j_idt6:j_idt10:0" class=""> Number1 - 1</label></td>
  <td>
    <input name="j_idt6:j_idt10" id="j_idt6:j_idt10:1" value="2" type="checkbox" />
    <label for="j_idt6:j_idt10:1" class=""> Number1 - 2</label></td>
  <td>
    <input name="j_idt6:j_idt10" id="j_idt6:j_idt10:2" value="3" type="checkbox" />
    <label for="j_idt6:j_idt10:2" class=""> Number1 - 3</label></td>
  <td>
</tr>
</table>

一个Jquery函数在一个事件上更改了该组件的状态(比如说值为“1”的框)(点击“按钮”):

<script>  // or in $(document).ready(){}
   $('#button').click(function(){ 
       var $checkbox = $(this).find('#j_idt6:j_idt10:0');
       $checkbox.attr('checked', !$checkbox.attr('checked'));
   });
</script>

如何通知JSF端客户端状态发生了变化。在这个级别上,JSF仍在思考 复选框具有例如值0,而它现在具有值1.这导致状态不一致......

我的选择是什么?

我想到JSF对其他人(Rich-,Primes-,MyFaces)的AJAX支持,但我仍然坚持使用它,知道 让我的组件更新,因为我正在构建一个具有许多功能的富客户端 (显示操作,Jquery UI小部件,Web远程处理,动态行为,Web服务,视觉效果等)。应该严重操纵的DOM客户端状态和Jquery是必须的.​​.....因此不能将它放在一边。

谢谢!

1 个答案:

答案 0 :(得分:4)

由于你使用的是JSF2,你应该使用f:ajax(谷歌更多关于它)

像这样(在你的情况下不需要jquery)

<h:selectManyCheckbox value="#{user.favNumber1}">
    <f:selectItem itemValue="1" itemLabel="Number1 - 1" />
    <f:selectItem itemValue="2" itemLabel="Number1 - 2" />
    <f:selectItem itemValue="3" itemLabel="Number1 - 3" />
    <f:ajax listener="#{user.someMethod}" />
</h:selectManyCheckbox>

你的user bean

中的位置
public void someMethod(AjaxBehaviorEvent ev) {
    System.out.println(favNumber1);
}