CODEWITHSUNDEEP
jsfjsf-2primefacesradio-button
user517491
user517491

Reputation:

How to exclusively select a radio button in two p:selectOneRadios

JSF 2.0, Primefaces 3.1.1

I have two p:selectOneRadio components:

   <p:selectOneRadio id="radio1" value="#{inningBean.lastDeliveryType}">  
        <f:selectItem itemLabel="Wide" itemValue="1" />
        <f:selectItem itemLabel="No Ball" itemValue="2" />
        <f:selectItem itemLabel="Normal" itemValue="3" />
   </p:selectOneRadio> 

   <p:selectOneRadio id="radio2" value="#{inningBean.lastDeliveryRunsScored}">  
        <f:selectItem itemLabel="1" itemValue="1" />
        <f:selectItem itemLabel="2" itemValue="2" />
        <f:selectItem itemLabel="3" itemValue="3" />
   </p:selectOneRadio>

   <p:commandButton />

I want that when user clicks the button, first radio button in each selectOneRadio is selected(Without submitting request to server). Just like user himself is selecting first radio button in each p:selectOneRadio, I just want to do it in javascript.

Upvotes: 2

Views: 9136

Answers (1)

Fallup
Fallup

Reputation: 2427

You can do this easily with jQuery. Take a look at these selectors:

And on the prop() function.

Now to the point :

For better manipulation with elements ids use prependId="false" on your form wrapping p:selectOneRadios.

You don't want to reaload page so use ajax="true" in p:commandButton.

<p:commandButton value="select" ajax="true" onclick="selectRadios()" update="@form"/>

If you specify id for p:selectOneRadio primefaces will use it as name attribute for input type="radio" in rendered HTML page. Ofcourse if you don't use prependId="false" on the form element, primefaces will add forms id to the radio name attr., so it looks like name="formId:radio1". With prependId="false" it's name="radio1".

Now when you know that your radio buttons have specific name you can select first of each group specified by this name with simple function:

function selectRadios(){
               jQuery('input[name=radio1]:first').prop('checked', true);
               jQuery('input[name=radio2]:first').prop('checked', true);
            };

So the whole code looks like this :

<script type="text/javascript">
            function selectRadios(){
               jQuery('input[name=radio1]:first').prop('checked', true);
               jQuery('input[name=radio2]:first').prop('checked', true);
            };
</script>

<h:form id="formID" prependId="false">  
            <p:selectOneRadio id="radio1" value="#{testBean.radio1}">  
                <f:selectItem itemLabel="Wide" itemValue="1" />
                <f:selectItem itemLabel="No Ball" itemValue="2" />
                <f:selectItem itemLabel="Normal" itemValue="3" />
            </p:selectOneRadio> 

            <p:selectOneRadio  id="radio2" value="#{testBean.radio2}">  
                <f:selectItem itemLabel="1" itemValue="1" />
                <f:selectItem itemLabel="2" itemValue="2" />
                <f:selectItem itemLabel="3" itemValue="3" />
            </p:selectOneRadio>
            <p:commandButton value="select" ajax="true" onclick="selectRadios()" update="@form"/>
</h:form>

Note : You can also update each p:selectOneRadio separately if you don't want to update whole form by: update="radio1 radio2"

EDIT

I don't know the way how you can select a radio button in primefaces (while using theme) without a request being made, because after clicking on radio button GET request will be made, in which related UI icon will be obtained (at least for the first click). If you are okay with that keep reading.

Since you don't want to make classic HTTP request nor AJAX request change the type of your commandButton:

<p:commandButton type="button" value="Default select" id="selButtonId" onclick="selectRadios();" />

And use this js function to trigger click on radio button:

function selectRadios(){
               jQuery('[for=radio1\\:0]').click();
               jQuery('[for=radio2\\:0]').click();
            };

ID of radio button will be used as label + :x , where x is the actual order number of the button. (0 being the first). This is the proper way of using click() function, because you want to click on label instead on button itself, explanation here.

Note: Primefaces ver 3.1.1 are bundled with jQuery ver 1.6.x which doesn't support refresh method of button element (it is supported since ver 1.8). Otherwise you could use :

  function selectRadios(){
       jQuery('input[name=radio1]:first').prop('checked', true).button("refresh");
       jQuery('input[name=radio2]:first').prop('checked', true).button("refresh");
    };

So IMHO what is written above is all you can do in your situation. I don't know if there is some alternative to button refresh method. Someone will correct me for sure if I'm wrong.

Regards

Upvotes: 3

Related Questions