Comment passer la variable JSF à jQuery

Question

Supposons que j'ai la page JSF

<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 

fichier .js

function myArrayList(countries) { 

    ..... 

} 

Voir lorsque l'utilisateur clique sur le bouton puis je veux appeler la fonction Jquery que je passe mon ArrayList. Est-il possible de transmettre votre variable JSF actuelle avec des valeurs à javascript ou à jQuery?

Merci

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

Vous pouvez faire

<h:inputHidden id="someID" value="#{randomNumber.data}/> 

(ne pas oublier d'ajouter getter/setter à vos données dans le haricot)

changer votre onclick du h:commandButton

onclick="myArrayList()" // or onclick="myArrayList(#{SomeELExpressioGoesHere})" 

changer votre fonction js dans

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

afin de transférer votre chaîne de js dans un tableau il suffit d'utiliser

var yourJSString = jQuery('#someID').val() 
var myArray = yourJSString.split(','); //when string is Afghanistan,Albania,Zimbabwe (no spaces) 

vous pourriez être nécessaire pour changer someID dans un autre sélecteur d'id si vous ne voulez pas mettre prependId = false dans votre forme ... ou tout simplement utiliser un sélecteur jquery broaded comme

alert(('input[id$="someID"]').val()); 

EDIT

Regardez mon exemple, vous devez travailler avec votre variable de données String et non les pays, parce que vous devez passer les données en tant que chaîne uniquement et non en tant que tableau ... après avoir transmis la variable de données à js, vous pouvez la manipuler avec une simple fonction slp js pour faire revenir un tableau dans votre js ... vous obtenez Conversion Erreur lors de la définition de la valeur '[Afghanistan, Albanie, Zimbabwe]' pour 'null car vous essayez de définir Chaîne dans le tableau ...probablement le getter des pays converti implicitement le tableau java en chaîne et lorsque vous essayez de le soumettre de nouveau (chaîne en tableau) vous faire l'exception

afin de mettre de js retour à la fève:

jQuery('#someID').val("Some new String goes here"); 

puis lorsque vous soumettez le formulaire .. la valeur sera définie sur le serveur