Notify JSF Server side about changes on (DOM) client-state made by Jquery/Ajax

Question

Using a component based Framework like JSF, a component for a checkbox get defined:

<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>

the generated (x-html) code looks like:

<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>

a Jquery function changes the state of this component (let say the box with value "1") on one event(the click of "button"):

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

how do I notify the JSF-side that the client state changed. at this level JSF still thinks that the checkbox has eg value 0 whereas it has now value 1. this leads to state inconsistency...

what are my options?

I think of the AJAX- support of JSF on other (Rich-, Primes-, MyFaces) but I still relent to use it, knowing that to have my component to update , because I am building a rich client with many features (Display manipulation, Jquery UI widgets, Web remoting, dynamic behaviour, Web-services, visual effects , and so on ). the DOM client state in supposed to heavily manipulated and Jquery is something that is a must.. so it can't be left aside.

thanks!

Answer 1

Since you are using JSF2 you should use f:ajax (google some more about it)

Like this (no jquery needed in your case)

<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>

where in your user bean

public void someMethod(AjaxBehaviorEvent ev) {
    System.out.println(favNumber1);
}