CODEWITHSUNDEEP
jsf-2primefaces
Basit
Basit

Reputation: 8626

How to pass JSF variable to jQuery

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

Upvotes: 2

Views: 6972

Answers (1)

Daniel
Daniel

Reputation: 37061

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

Upvotes: 1

Related Questions