Question

I am using JQuery with JSF+RF3.3
My requirement is that when a user clicks on the YES radio button few of the components will be shown. In case he clicks NO then those components will be hidden.
On page Load initially these components are shown.

Although using Jquery I am able to extract the value of the Radio Button Clicked I am not able to hide/show component.Morever the component is ListShuttle. I am not able to select any component in ListShuttle.The select itself is not working..

The code snippet is:-

<rich:panel>
<h:selectOneRadio id="Radio"  border="0" label="Name" value="#{bean.functionName}" required="true" styleClass="intro" onchange="showNameList()" >
<f:selectItem id="All" itemValue="All" itemLabel="All" />
<f:selectItem id="region" itemValue="Region" itemLabel="Region" />
</h:selectOneRadio> 
</rich:panel>

The components which will be shown/hidden on Radio Clicked are:-

    <div id="alll">
    <h:outputLabel value="RegionList *" id="region" styleClass="intro" escape="false" />
    <h:outputLabel value=" : " styleClass="intro" id="colonLabel" escape="false" />
    <h:panelGroup>    
    <rich:listShuttle id="calListShuttle" sourceValue="#{Bean.SourceList}" targetValue="#{Bean.targetList}" var="itemsRegion" fastOrderControlsVisible="false" orderControlsVisible="false" targetRequired="true" >
    <rich:column >

    <h:outputLabel value="#{itemsRegion}"/>
    </rich:column >                                 
    </rich:listShuttle>
</div>

The JQuery code is

<script>
    function showRegionList()
    {
        jQuery(document).ready(function()
         {
        var $ = jQuery;

        $("input:radio[@name='Create\\:Radio']").click(function() { 
        var radioValue=$("input[name='Create\\:Radio']:checked").val();

        if(radioValue=="All")
        {
            $("#alll").hide("slow");    
        }
        else
        {
            $("#alll").show("slow");
        }

        });
         });
        }
    </script>

Answer 1

You’re making one fundamental mistake with jQuery. The jQuery library is designed to among others easily add event handlers to the HTML DOM tree during page load without the need to specify them yourself straight inside the HTML markup.

To get your code to work, you need to remove the event attribute from the markup:

onchange="showNameList()"

and you need to remove the function block around jQuery.ready():

function showRegionList() {

}

(those function names does by the way not match, please review your question carefully to avoid red herrings)

This way the jQuery.ready() will run as intended and attach the click event handler functions to the desired HTML elements.

I strongly recommend to take some time apart to go through a bit decent jQuery book/tutorial.