Set value of apex:attribute from javascript

Question

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.

Answer 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}
    );

Answer 2

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.

Answer 3

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}
    );