2 Replies Latest reply on Apr 18, 2008 6:29 AM by Luis Miguel Rodriguez

    Referencing JSF components from Javascript in JPDL forms

    Luis Miguel Rodriguez Newbie


      I have modified a xhtml task form generated by the Graphical designer plugin in order to add a combobox component:

       <h:selectOneMenu onchange="updateTopic(this);" id="topicCombo" value="#{ChooseTopicBean.value}" styleClass="combobox">

      and defined apart a JS function called "updateTopic(ref)" which try to change the value of another jsf component when select any of the combobox's options, that is:

      <h:inputText id="inputTopic" value="#{var['topic']}" />

      I don't know how to reference the inputText from my JavaScript function since I've seen from the generated HTML page parsed by the browser that the components/forms IDs are generated dynamically:

      <input id="j_id197:inputTopic" type="text" name="j_id197:inputTopic" />

      So, I'll get an error if I try to reference as "document.getComponentById('inputTopic')".

      Where is the "j_id197" id name coming from? Is there any other way to reference jsf components from Javascript?

      Thanks in advance.


        • 1. Re: Referencing JSF components from Javascript in JPDL forms
          Ronald van Kuijk Master


          Where is the "j_id197" id name coming from?
          JSF, it is the ID of the parent form element. Give the form element an explicit ID and you get something with this id as the prefix for the input element

          • 2. Re: Referencing JSF components from Javascript in JPDL forms
            Luis Miguel Rodriguez Newbie

            Ok, but I'm posting the issue in this forum because I'm trying to tweak the xhtml forms provided with jBPM console, that is:

            <html xmlns="http://www.w3.org/1999/xhtml"
             xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"
             <f:facet name="header">
             <h:outputText value="#{taskName}"/>
             <f:facet name="header">
             <h:outputText value="New Topic name:"/>
             <h:selectOneMenu value="#{ChooseTopicBean.value}" styleClass="combobox">
             <a4j:support event="onchange" reRender="inputTopic" />
             <f:selectItems id="yourItemId" value="#{ChooseTopicBean.items}"/>
             <!-- TASKFORM ROWS -->
             <f:facet name="header">
             <h:outputText id="out" value="Topic name:"/>
             <h:inputText id="inputTopic" value="#{ChooseTopicBean.value}" />
             <f:facet name="header">
             <h:outputText value="Actions"/>
             <!-- TASKFORM BUTTONS -->
             <tf:saveButton value="Save"/>
             <tf:cancelButton value="Cancel"/>
             <tf:transitionButton transition="Configure SeedDiscovery" value="Configure SeedDiscovery"/>

            as you can see, I have no <f:form> tag. I've tried with

            <ui:component id="myform">


            <jbpm:dataform id="myform">

            but the latter turned out to be the data table. So, the html tags are generated automatically. How could I get my goal?

            BTW, where can I find the Tag library documentation of jBPM JSF tags?