How can I refer to a jsf object with jquery?

advertisements

i want to get a textbox object with jquery.

$(function() {
    // create a datepicker with default settings
    $("[id='#{fbForm.beginDate}']").mobiscroll().date({
        invalid: {
            daysOfWeek: [0, 6],
            daysOfMonth: ['5/1', '12/24', '12/25']
        },
        theme: 'android-ics light',
        display: 'bottom',
        mode: 'scroller',
        dateOrder: 'mmD ddyy'
    });
});

This does not work? Why what is the problem


Assumming you have

<h:form id="myForm">
    <h:inputText id="myText" />
</h:form>

You can access to the component with jQuery using

var myText = $('#myForm\\:myText');

Example:

<script type="text/javascript">
    //<![CDATA[
    window.onload = function() {
        var myTextValue = $('#myForm\\:myText').val();
        alert(myTextValue);
    };
    //]]>
</script>

<h:form id="myForm">
    <h:inputText id="myText" value="#{fbForm.beginDate}" />
</h:form>

Or you can use plain component ID by adding prependId="false" on <h:form>:

<script type="text/javascript">
    //<![CDATA[
    window.onload = function() {
        var myTextValue = $('#myText').val();
        alert(myTextValue);
    };
    //]]>
</script>

<h:form prependId="false">
    <h:inputText id="myText" value="#{fbForm.beginDate}" />
</h:form>