How to pass JSF variable to jQuery - jsf-2

Question

Suppose i have JSF page
<h:body>
<h:form id="formID" prependId="false">
<h:outputText id="randomID" value="#{randomNumber.random}"/>
<h:commandButton id="buttonID"
value="Random"
onclick="myArrayList(countries)" /> //just example
</h:form>
</h:body>
#ViewScoped
public class RandomNumber {
private int totalCountries;
private String data = "Afghanistan, Albania, Zimbabwe";
private List<String> countries;
public RandomNumber() {
countries = new ArrayList<String>();
StringTokenizer st = new StringTokenizer(data, ",");
while(st.hasMoreTokens()) {
countries.add(st.nextToken().trim());
}
totalCountries = countries.size();
} //end of constructor
} //end of class RandomNumber
.js file
function myArrayList(countries) {
.....
}
See when user click on button then i want to call Jquery function whom i am passing my ArrayList. Is it possible to pass your current JSF variable with values to javascript or jQuery?
Thanks
EDIT
**_________________________________________________-*
<h:body>
<h:form id="formID" prependId="false">
<h:outputText id="countries" value="#{countries.countries}" style="display:none"/>
<h:inputHidden id="hiddenCountries" value="#{countries.countries}" />
<h:commandButton id="buttonID"
value="Random"
onclick="myArrayList()"/>
</h:form>
</h:body>
#ViewScoped
public class Countries {
private int totalCountries;
private String data = "Afghanistan, Albania, Zimbabwe";
private List<String> countries;
/** Creates a new instance of Countries */
public Countries() {
countries = new ArrayList<String>();
StringTokenizer st = new StringTokenizer(data, ",");
while(st.hasMoreTokens()) {
countries.add(st.nextToken().trim());
}
totalCountries = countries.size();
} //end of constructor
public List<String> getCountries() {
return countries;
}
public void setCountries(List<String> countries) {
this.countries = countries;
}
} //end of class Countries
function myArrayList() {
alert(jQuery('#countries').html());
alert(jQuery('#hiddenCountries').val()) //when using h:inputHidden
} //end of function myArrayList

Answer 1

You can do
<h:inputHidden id="someID" value="#{randomNumber.data}/>
(dont forget to added getter/setter to your data in the bean )
change your onclick of the h:commandButton
onclick="myArrayList()" // or onclick="myArrayList(#{SomeELExpressioGoesHere})"
change your js function into
function myArrayList(inputParam) {
alert(jQuery('#someID').val());
var yourJSString = jQuery('#someID').val();
var myArray = yourJSString.split(','); //when string is Afghanistan,Albania,Zimbabwe (no spaces)
alert(myArray[inputParam]);
}
in order to transfer your js string into array just use
var yourJSString = jQuery('#someID').val()
var myArray = yourJSString.split(','); //when string is Afghanistan,Albania,Zimbabwe (no spaces)
you might be needed to change someID into other id selector if you wont set prependId=false in your form... or simply use a broaded jquery selector like
alert(('input[id$="someID"]').val());
EDIT
Look at my example , you should work with your String data variable and not the countries , cause you should pass the data as string only and not as array... after you will pass the data variable to js you can manipulate it with simple slpit js function to make it back an array in your js... you are getting Conversion Error setting value '[Afghanistan, Albania, Zimbabwe]' for 'null cause you are trying to set String into array... probably the getter of countries converted implicitly the java array into string and when you try to submit it back (string into array) you getting the exception
in order to set from js back to to bean :
jQuery('#someID').val("Some new String goes here");
then when you will submit the form.. the value will be set back to server