cannot access rich components in java script using #{rich:component(Id)} or RichFaces.$(Id)

Question

Newbie at javascript here. Trying to access the internals of RichFaces components with examples I find on the web, without much luck.

RichFaces 3.3 and JSF 1.2, jboss server, Chrome, ant.

I've seen examples like

#{rich:component(formId)}
RichFaces.$(stHourId)

But neither is recognized when executed. So how can I use these or access them otherwise ...

Are these not available in RichFaces 3.3 ? If not, is there a way to do the example below in 3.3?
Do I need something special in my xhtml file to be able to use these, or in web.xml or faces-config.xml or ?

HERE'S THE SPECIFIC EXAMPLE:

access the value list of a rich:comboBox in javascript - found an example on the web

var valueArray = #{rich:component(formId)}.comboList.itemsValue;

I get an error when the page loads : Uncaught SyntaxError: Unexpected token . When I look at the code in the developer tool console, the #{rich:component(formid)} is completely missing (which causes other problems)

var valueArray = .comboList.itemsValue;

If I remove that line but break in the code, and try to manually use #{rich:component...} in the console,

#{rich:component('form:recurStartMincomboboxField')}

I get : Uncaught SyntaxError: Unexpected token ILLEGAL or

RichFaces.$('form:recurStartMincomboboxField')

a different error: Uncaught TypeError: RichFaces.$ is not a function

I know the form Id is correct since the following works, but I can't seem to access the value list from this

document.getElementById('form:recurStartMincomboboxField')

and If you want to see it in context, relevant parts:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"> 

<head>    
    <script>         
        function checkMinute(formId, defaultVal) {
            alert('validateMinute');

            var minuteStr = document.getElementById(formId).value;

            // get list of values allowed for the combobox
            var valueArray = #{rich:component(formId)}.comboList.itemsValue;      
        }
    </script>
</head>

<body> 
    <h:form id="form">

    ......

        <rich:comboBox id="recurStartMin" value="#{filterManagerBean.recurStartMin}" required="false" 
                       selectFirstOnUpdate="true" defaultLabel="" enableManualInput="true" width="50"
                       onchange="checkMinute('form:recurStartMincomboboxField', '00')"
                       > 
             <f:selectItems value="#{filterManagerBean.minuteOptions}" />
        </rich:comboBox>

    ......

    </h:form>
</body> 

</html>

Been trying various things and searches all day, pretty frustrated :(

Makhiel Makhiel · Accepted Answer · 2015-08-24T08:34:53

#{rich:component('recurStartMincomboboxField')}

This is Expression Language (EL) not JavaScript, see the tutorial.

You cannot execute EL on the client side since that's for the server to work with (it's kind of like inline Java code). EL expressions are executed as the page loads so if you want to use it you have to know the id beforehand, or the id has to be available on the server. Or you can use pure JavaScript:

document.getElementById('form:recurStartMincomboboxField').component

RichFaces.$ is not available in RichFaces 3.

cannot access rich components in java script using #{rich:component(Id)} or RichFaces.$(Id)

HERE'S THE SPECIFIC EXAMPLE:

2 Answers