Topic
4 replies Latest Post - ‏2012-10-17T17:19:36Z by SystemAdmin
SystemAdmin
SystemAdmin
6420 Posts
ACCEPTED ANSWER

Pinned topic Trying to change readonly of h:inputText with hx:behavior

‏2012-10-17T00:10:38Z |
Hi, i've been trying in a exhaustive way to implement a simple functionality of change the state of readonly=true to readonly=false of h:inputText by using onActionFunction from hx:behavior.

And to enable a second button. I am trying this doing one click at the first button.

This is the button i want to change the state

<hx:commandExButton value=
"Change readonly" id=
"btnChange"> <hx:behavior event=
"onclick" id=
"behavior1" behaviorAction=
"unlocked;stop" targetAction=
"btnTwo"onActionFunction=
"return func_1(this, event);" />


The action of enable the 2nd button is working well. But I don't know how to make the javascript func_1 to change readonly of the inputText.


<script> function func_1(thisObj, thisEvent) 
{ 
//use 'thisObj' to refer directly to this component instead of keyword 'this' 
//use 'thisEvent' to refer to the event generated instead of keyword 'event' document.getElementById(
"formTest:textChangeTest").readonly = 

false; 

return 

true; 
} </script>


Any idea how to make it work?
Updated on 2012-10-17T17:19:36Z at 2012-10-17T17:19:36Z by SystemAdmin
  • SystemAdmin
    SystemAdmin
    6420 Posts
    ACCEPTED ANSWER

    Re: Trying to change readonly of h:inputText with hx:behavior

    ‏2012-10-17T10:31:16Z  in response to SystemAdmin
    Try changing readonly to readOnly. Case matters.

    In addition, in case of an input field consider using the disabled property instead of the readOnly property since (at least in the common browsers) the visual representation of a disabled input text field makes it clear that one cannot edit it whereas setting readOnly=false just disallows editing but does not give a visual clue.
    • SystemAdmin
      SystemAdmin
      6420 Posts
      ACCEPTED ANSWER

      Re: Trying to change readonly of h:inputText with hx:behavior

      ‏2012-10-17T14:14:09Z  in response to SystemAdmin
      Thank you, Tuukka. I changed readonly to readOnly, and didn't work too.

      I agree that visually to use enable/disable becomes more evident to the user that the field don't allow any isertion. But in my case readonly works better because allows the content of the input field to at least be selected and copied.

      At the moment the client triggers the onclick event of the first button, the input field must be changed to readonly=false and a second button must be turnned enabled.

      I am using the pre-defined behavior to enable the 2nd button, and it is working. The problem is to change the readonly of the input field from false to true using the javascript.

      I am not finding a way to use correctly the event onActionFunction

      
      <hx:behavior event=
      "onclick" id=
      "behavior1" behaviorAction=
      "unlocked;stop" targetAction=
      "btnTwo" onActionFunction=
      "return func_1(this, event);" />
      


      
      function func_1(thisObj, thisEvent) 
      { 
      //use 'thisObj' to refer directly to this component instead of keyword 'this' 
      //use 'thisEvent' to refer to the event generated instead of keyword 'event' document.getElementById(
      "formTest:textChangeTest").readonly = 
      
      false; 
      
      return 
      
      true; 
      }
      


      What is wrong in the javascript? Or the problem is on onActionFunction?
  • gloriay
    gloriay
    5 Posts
    ACCEPTED ANSWER

    Re: Trying to change readonly of h:inputText with hx:behavior

    ‏2012-10-17T16:15:44Z  in response to SystemAdmin
    Hi Felipe,

    I do not think you need to use the onActionFucntion attribute to get that functionality, you just have to use the targetAction and behaviorAction attributes, take a look to the following sample:

    <h:inputText styleClass="inputText" id="text1" value="Test text"></h:inputText>
    <hx:commandExButton type="button" value="Disable/Enable" styleClass="commandExButton" id="button1">
    <hx:behavior event="onclick" *targetAction="text1;button2" behaviorAction="locked;unlocked"*>
    </hx:behavior>
    </hx:commandExButton>
    <hx:commandExButton type="submit" value="Submit" styleClass="commandExButton" id="button2" disabled="true">
    </hx:commandExButton>

    In this case the locked action has the InputText as target and the unlocked action has the button2 as target.
    BTW, you can select and copy the text from a inputText in disabled mode.

    Hope this can help you.
    • SystemAdmin
      SystemAdmin
      6420 Posts
      ACCEPTED ANSWER

      Re: Trying to change readonly of h:inputText with hx:behavior

      ‏2012-10-17T17:19:36Z  in response to gloriay
      Hi, already tried unlock,lock and invertlocked. They just enable/disable the selected target. The only way I see to do this is writing a javascript and insert it somehow in the behavior tag.