jQuery capture component id on some event

Question

I have some dynamically generated rich:calendar and h:selectBooleanCheckbox components with dynamically generated ids that I need to do dirty checking on. When the user attempts to navigate away from the page without saving changes a popup box should warn them. But I only want to check specific components.

I created a jquery function:

 <script type="text/javascript">
 function somebodyChangedMe(item) {
    var id = $(item).attr("id");
    alert(id);
}
  </script>

This is my initial shot at it, I just want to capture the event, if I can get this to work I'll use it to set a variable for use in another function.

In the component I added:

 <h:selectBooleanCheckbox id="upd_ckbx_#{status.index}"
     onchange="somebodyChangedMe(this);"
     value="#{_parent.id[status.index].ignore}">
     <a4j:support event="onclick"ajaxSingle="true" 
       actionListener="#{someRandomListener}" /> 
 </h:selectBooleanCheckbox>

But when I select the checkbox nothing happens. I tried using onclick and onkeyup, same result. Can I do this? What am I doing wrong? I'm using Seam 2.2 JSF 1.2 and RichFaces 3.3.3

Answer 1

JSF caused me some problems with this. When I did get the id my functions wouldn't work. It was because of the form, I needed to include that in the element name, JS doesn't do it for you. I needed to do 3 things:

• change the background color of an edited component
• enable another component (the save button)
• set a parameter on the page to catch unsaved changes (dataChanged)

So I ended up with the following:

 function dirtyEnableUpdate(itemChanged,elem) {
    dataChanged = 1;  
    jQuery(itemChanged).parent().addClass("redBackground");
    if (typeof elem === "string") {
       console.log("i'm setting value here to " + elem);
       document.getElementById(elem).disabled=false;
    } 
 }

In my edited component:

 <rich:calendar id="dcal" 
      value="#{programEventHome.instance.eventDate}"
   onchanged="dirtyEnableUpdate(this,'form:idOFComponentToEnable');" 

/>

The component that had to be enabled:

 <a4j:commandButton id="idOFComponentToEnable"
  value="Update"
  oncomplete="disableItAgain('form:idOFComponentToEnable'); 
  action="#{class.doStuffHere()}" 
 />