1

I have a custom component(named myComponent) which has an attribute value. I want to change the value of this attribute using javascript. How to do that ?

<apex:component >
    <apex:attribute name="value" description="The value of picklist"
                    type="String[]" />
    <script>
       //change value of attribute here
       var x = {!value}
       x = ['val1', 'val2']
    </script>

</apex:component >

visulaforce page:

<apex:form>
    <c:myComponent value={!value}></<c:myComponent>
    <apex:commandButton Value="Post"/>
</apex:form>

When I click the Post button, the value is not updated in the controller.

3 Answers 3

1

Are you trying to send a value modified into your component to your controller ?

If so, check this:

  1. You should set the action to call in your apex:commandButton
  2. You should set the component attribute to an apex:inputField in order to sent it using an standard apex:form to the controller.
  3. Instead that you could invoke your controller method by javascript directly by using @RemoteAction
  4. Also, you should use the function JSENCODE to escape x = {!value};

This is an small sample of the last option:

 var x = {!JSENCODE(value)};

    Visualforce.remoting.Manager.invokeAction(
        '{!$RemoteAction.MyController.sentMyValue}', 
        x, 
        function(result, event){
            console.log(result);
        }, 
        {escape: true}
    );
6
  • There's no need to provide an action for a commandbutton - if you leave it out the fields will be updated in the controller and the page refreshed. Commented Mar 4, 2014 at 8:51
  • Also, can we stop using comments like "I see many things wrong here" - people are typically posting here because they know there's a problem with their code, so there's no need to rub their nose in it. Commented Mar 4, 2014 at 8:54
  • My intention is never to rub nothing or disturb or bother nobody, just help. That is why I spend time here trying to return the community the help that I received before. Commented Mar 4, 2014 at 9:05
  • Thanks for removing the comment - these can easily be taken the wrong way and sometimes turn into flame wars! Commented Mar 4, 2014 at 9:13
  • Thank for your comment. My english is not good enough to notice this and in spanish that comment has not bad connotations at all. Commented Mar 4, 2014 at 9:21
0

The value won't be sent back to the controller, as all you have done is create a JavaScript property that takes its initial value from the component and updated the property to a different value. This is disconnected from the attribute, as by the time the page is delivered to the browser {!value} is simply some text in a JavaScript block.

If you want to update the attribute you'll need to provide an input so that the updated value is sent back to the controller. I don't think you'll be able to use a hidden input to update an array of strings, so you may need to send a string representation back to the controller and then turn this into an array of strings server side.

0

You can use a merge field for accessing the value:

<apex:component >
    <apex:attribute name="value" description="The value of picklist"
                    type="String[]" />
    <script>
       var x = {!JSENCODE(value)};
       console.log(x);
    </script>
</apex:component >

For sending the new value to a controller, use Javascript Remoting

Visualforce.remoting.Manager.invokeAction(
        '{!$RemoteAction.ControllerName.setValue}',
        x, 
        function(result, event){
            // x has been sent to the controller
        }, 
        {escape: true}
    );
2
  • can you explain it further. What is x ?
    – vishesh
    Commented Mar 4, 2014 at 7:47
  • I am able to read the value,but not able to update it. I have included more code in question
    – vishesh
    Commented Mar 4, 2014 at 8:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .