0 Replies Latest reply on Dec 28, 2011 8:45 AM by agey

    How to display into input text component the translated value from selected value by user instead the selected value

    agey Newbie

      Hi,

       

      I have a xhtml page with a input text and a vitual keyboard. When user select a key on keyboard its value is showed in input text component.

       

      Now I want to translate the value that the user selected on keyboard and display the translated value in the inputText component instead of the value of the keyboard, every time the user presses a key on the keyboard. The translation algorithm is in Managed Bean so I am using jsFunction to do an asyncronous call to Managed Bean to translate the selected value.

       

      This is my code:


      <h:form>

       

      <div id="value"  class="span-8">

           <div class="span-4">

                <h:outputLabel for="valueInput" value="Numero" />

           </div>

           <div class="span-4">

                <h:inputText id="valueInput" readonly="true" value="#{keyboard.newValue}" />

           </div>

      </div>

      <div id="submit"  class="span-8">

           <h:commandButton value="submit" type="submit" action="#{keyboard.enter}" />

      </div>

       

      <a4j:jsFunction name="getNewValue" render="valueInput" execute="valueInput"

               action="#{keyboard.translate}">

                       <a4j:param name="value" assignTo="#{keyboard.value}" /

      </a4j:jsFunction>

       

      <rich:jQuery selector="#keyboard span[id*=value]" event="click" query="

           getNewValue(jQuery(this).attr('value'));

      "/>

       

      </h:form>

       

      The value translated is displayed into input text component but when submit button is clicked, the value is not submitted to keyboard Managed Bean. Somebody can point to me how can I solve this?

       

      I have noticed that a jQuery sentence invoked by an event on the input text doesn´t work when the input text is used into 'render' atribute on jsFunction component and this function was executed. For example:

       

      <rich:jQuery selector="#value input" event="focus" query="

          alert('Hello');

      "/>

       

      The first time, this query works fine but when user click a key on keyboard and jsFunction is executed, the query on focus event doesn´t work. Is this normal behavior?

       

      I appreciate any suggestions.

       

      Thanks a lot in advance