title: How to pass JSF variable to jQuery
body: <p>Suppose i have JSF page </p>
  
  <pre><code> &lt;h:body&gt;       
      &lt;h:form id="formID" prependId="false"&gt;      
  
          &lt;h:outputText id="randomID" value="#{randomNumber.random}"/&gt;      
          &lt;h:commandButton id="buttonID" 
                           value="Random"
                           onclick="myArrayList(countries)" /&gt;   //just example  
      &lt;/h:form&gt;
  &lt;/h:body&gt;
  
  @ViewScoped
  public class RandomNumber {
  
      private int totalCountries;
      private String data = "Afghanistan, Albania, Zimbabwe";
      private List&lt;String&gt; countries;
  
      public RandomNumber() {
  
          countries = new ArrayList&lt;String&gt;();
          StringTokenizer st = new StringTokenizer(data, ",");
  
          while(st.hasMoreTokens()) {
              countries.add(st.nextToken().trim());
          }
          totalCountries = countries.size();
  
      } //end of constructor
  
  } //end of class RandomNumber 
  </code></pre>
  
  <p>.js file</p>
  
  <pre><code>function myArrayList(countries) {
  
      .....
  
  }
  </code></pre>
  
  <p>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? </p>
  
  <p>Thanks</p>
  
  <p><strong>EDIT</strong>
  **<strong><em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em></strong>-*</p>
  
  <pre><code>&lt;h:body&gt;
      &lt;h:form id="formID" prependId="false"&gt;
  
          &lt;h:outputText id="countries" value="#{countries.countries}" style="display:none"/&gt;
          &lt;h:inputHidden id="hiddenCountries" value="#{countries.countries}" /&gt;
  
          &lt;h:commandButton id="buttonID"
                           value="Random"
                           onclick="myArrayList()"/&gt;
  
      &lt;/h:form&gt;
  
  &lt;/h:body&gt;
  
  @ViewScoped
  public class Countries {
  
      private int totalCountries;
      private String data = "Afghanistan, Albania, Zimbabwe";
      private List&lt;String&gt; countries;
  
      /** Creates a new instance of Countries */
      public Countries() {
  
          countries = new ArrayList&lt;String&gt;();
          StringTokenizer st = new StringTokenizer(data, ",");
  
          while(st.hasMoreTokens()) {
              countries.add(st.nextToken().trim());
          }
          totalCountries = countries.size();
  
      } //end of constructor
  
      public List&lt;String&gt; getCountries() {
          return countries;
      }
  
      public void setCountries(List&lt;String&gt; 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
  </code></pre>