2 Replies Latest reply on Nov 24, 2010 7:02 AM by Siva P

    How to make one h:selectOneRadio selected in the modelpanel???

    Siva P Master

      How to select only one Radio button in richfaces model panel.??

      For me it is selecting both and displaying both as selected in screen.

       

      RadioScreen.JPG

       

      This is model panel,here i have to select only one radio button,but in screen if i select new radio button the previous one is not getting false (looks both selected) in  backend bean i am getting the new value.Why it is displaying like in model panel???

       

      jsp:

       

      <rich:column>
      <a4j:outputPanel>
      <h:selectOneRadio id="selectedField" layout="pageDirection"
      value="#{editAccountInfoBean.selectedMobileNo}" immediate ="true"
      valueChangeListener="#{editAccountInfoBean.selectedValueChange}"   style="font-size:10px;">
      <f:selectItem itemValue="null"/>
      <a4j:support eventsQueue="my.events.queue" event="onclick"
      actionListener="#{editAccountInfoBean.assignSelected}"
      ajaxSingle="true" status="status"/>
        </h:selectOneRadio>
        </a4j:outputPanel>
      </rich:column>

      <rich:column>

      <a4j:outputPanel>

      <h:selectOneRadio id="selectedField" layout="pageDirection"

      value="#{editAccountInfoBean.selectedMobileNo}" immediate ="true"

      valueChangeListener="#{editAccountInfoBean.selectedValueChange}"   style="font-size:10px;">

      <f:selectItem itemValue="null"/>

      <a4j:support eventsQueue="my.events.queue" event="onclick"

      actionListener="#{editAccountInfoBean.assignSelected}"

      ajaxSingle="true" status="status"/>

         </h:selectOneRadio>

         </a4j:outputPanel>

      </rich:column>

       

       

      Bean:

       

       

       

      public void assignSelected(ActionEvent event)

        {

      log.info("Calling into assignSelected...");

      List selectedDataList = new ArrayList();

      this.keys.add(Integer.valueOf(this.currentRow));

      EditAccountInfoBean editaccbeanObj =(EditAccountInfoBean)mobilenumberList.getRowData();

      selectedMobileDataList = new ArrayList<EditAccountInfoBean>();

      selectedMobileDataList.add(editaccbeanObj);

      log.info("Hp No:"+editaccbeanObj.getSearchMobileNo());

      log.info("Size:"+selectedMobileDataList.size());

      if(selectedMobileDataList.size()>0)

      {

      for(int i=0;i<selectedMobileDataList.size();i++)

      {

      selectedDataList.add(selectedMobileDataList.get(i));

      }

      /*for (EditAccountInfoBean dataItem : selectedMobileDataList) {

      if (selectedIds.get(dataItem.getSelectedMobileNo()).booleanValue()) {

                      selectedDataList.add(dataItem);

                      selectedIds.remove(dataItem.getSelectedMobileNo());

                  }*/

             // }

      log.debug(selectedDataList);

      //log.info("Selected Value:"+editaccbeanObj.getSelectedMobileNo().booleanValue()+"...Selected Hp No:"+editaccbeanObj.getSearchMobileNo());

      }

        }

       

       

      BeforeError.JPG

       

       

      AfterError.JPG

       

       

       

       

      My Original jsp page (Modelpanel):

       

       

       

       

      <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>

      <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

      <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%>

      <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>

      <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>

       

      <script>

       

      function dataTableSelectOneRadio(radio) {

          var id = radio.name.substring(radio.name.lastIndexOf(':'));

          alert(id);

          Parent = document.getElementById('mainRoverInclude:postpaidCustomerView:postpaidCustomerForm:generalInformationPage:msiddnEditView:infomsisdnSubview:infoMsisdnForm:mobilenoData');

          alert(Parent);

          var el = Parent.getElementsByTagName('radio');

          alert(el);

          for (var i = 0; i < el.length; i++) {

              if (el[i].name.substring(el[i].name.lastIndexOf(':')) == id) {

                  el[i].checked = false;

                  alert(el[i].checked);

              }

          }

          radio.checked = true;

          alert("finished");

      }

       

      </script>

      <f:subview id="infomsisdnSubview">

      <a4j:region selfRendered="true">

      <a4j:form id="infoMsisdnForm"  ajaxSubmit="true">

      <h:outputLink value="#" id="link" onclick="return false;">

      <rich:modalPanel id="info_msisdn_no_searchmodal" moveable="false" resizeable="false" autosized="false"

      width="900" height="450" showWhenRendered="false" style="overflow-y: scroll">

      <f:facet name="header">

      <h:outputText value="Edit Customer Info-Search Number" styleClass="modalPanel12"/>

      </f:facet>

      <f:facet name="controls">

      <h:panelGroup>

      <h:outputLabel value="Press Esc to close"></h:outputLabel>

      <rich:hotKey  id="myKey"  key="esc"

      handler="Richfaces.showModalPanel('info_msisdn_no_searchmodal');"/>

       

      <h:outputLabel value="(OR)"></h:outputLabel>

      <a4j:commandLink id="hidelinkeditinfomsisdn"

      styleClass="hidelink" style="border:0" title="Close"

      limitToList="true" ajaxSingle="true">

      <img src="../_assets/image/close.png">

      </a4j:commandLink>

      <rich:componentControl for="info_msisdn_no_searchmodal" attachTo="hidelinkeditinfomsisdn"

      operation="hide" event="onclick"/>

      </h:panelGroup>

      </f:facet>

      <a4j:region id="masterSearchMobileNoRegion" renderRegionOnly="true">

      <table class="font_exist" width="100%" height="50%" border="0" cellpadding="0" cellspacing="0">

       

        <tr>

          <td>

          <table width="845" height="19" border="0">

            <tr>

              <td bgcolor="#0000FF">

              <h:outputText styleClass="style2 style3" value="#{msg['existingcustomer.postpaid.modelpanel.searchno']}"/></td>

            </tr>

          </table></td>

        </tr>

        <tr>

          <td valign="top"><table width="845" border="0" cellspacing="1" cellpadding="1">

            <tr>

              <td width="302"><span class="mandatory_text">*</span>Prefix :</td>

              <td width="207">

              <rich:comboBox id="cbxPrefixField" listClass="myClass"

      selectFirstOnUpdate="false" required="true" enableManualInput="false"

      defaultLabel="#{msg.defaultLabel}" directInputSuggestions="true"

      value="#{editAccountInfoBean.cbxPrefix}">

      <f:selectItems value="#{listBoxBean.selectPrefixList}" />

      </rich:comboBox>

      </td>

              <td width="134"> </td>

              <td width="189"> </td>

            </tr>

            <tr>

              <td><span class="mandatory_text">*</span>Search Number (7 or last 4 digit only) : </td>

              <td>

              <rich:inplaceInput defaultLabel="Click Here to enter values - 0999" maxlength="7" showControls="true"

              minInputWidth="4" value="#{editAccountInfoBean.txtSearchNumber}">

              <a4j:support event="onviewactivated"

                                 ajaxSingle="true" bypassUpdates="true"/>

                    </rich:inplaceInput>

              </td>

              <td> </td>

              <td> </td>

            </tr>

            <tr>

              <td>    Sales Channel ID : </td>

              <td>

              <rich:comboBox id="cbxsalesChannelField" listClass="myClass" width="260"

      selectFirstOnUpdate="false" required="true" enableManualInput="false"

      defaultLabel="#{msg.defaultLabel}" directInputSuggestions="true"

      value="#{editAccountInfoBean.cbxPrefix}">

      <f:selectItems value="#{listBoxBean.selectChannelIDist}" />

      </rich:comboBox>

      </td>

              <td> </td>

              <td> </td>

            </tr>

            <tr>

              <td> </td>

              <td> </td>

              <td> </td>

              <td> </td>

            </tr>

            <tr>

              <td>

              <a4j:commandButton  value="#{msg['search']}" id="mobileNoSearch"

              limitToList="true" ajaxSingle="true" action="#{editAccountInfoBean.submitSearchMobileNumberListAction}"

              reRender="showData1,showData2,showData3"

              ></a4j:commandButton>    

              </td>   

            </tr>

          </table>

          </td>

        </tr>

        <tr>

          <td>

          <table width="845" height="19" border="0">

            <tr>

             <a4j:outputPanel id="showData1">

             <a4j:region  rendered="#{editAccountInfoBean.searchListMobileFlag == 'show'}">

              <td bgcolor="#0000FF"><h:outputText styleClass="style2 style3" value="#{msg['existingcustomer.postpaid.modelpanel.searchno']}"

              rendered="#{editAccountInfoBean.searchListMobileFlag == 'show'}"/></td>

              </a4j:region>

              </a4j:outputPanel>

            </tr>

          </table>

          </td>

        </tr>

        <tr>

          <td>

          <a4j:outputPanel id="showData2">

          <a4j:region  rendered="#{editAccountInfoBean.searchListMobileFlag == 'show'}">

          <h:panelGrid>

          <rich:datascroller id="mobileDataScrollList" for="mobilenoData" maxPages="5" align="right"  renderIfSinglePage="false" 

                            limitToList="true" rendered="#{editAccountInfoBean.searchListMobileFlag == 'show'}"/>

          <rich:dataTable id="mobilenoData" value="#{editAccountInfoBean.mobilenumberList}"

            border="1" cellspacing="0" cellpadding="2" onRowMouseOver="this.style.backgroundColor='#F0F0F0'"

        onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"

                var="mobileNumber" rows="2" width="845" style="border-collapse:collapse;display:block"

                rowKeyVar="row" ajaxKeys="#{editAccountInfoBean.keys}"

                rendered="#{editAccountInfoBean.searchListMobileFlag == 'show'}">

      <!-- ----------------------------------------------------------------- Table Header  -->

      <f:facet name="header" >

      <rich:columnGroup>

      <rich:column width="75" styleClass="serviceno-bgcolor-dt">

      <h:outputText value="Select" />

      </rich:column>

      <rich:column width="301" styleClass="serviceno-bgcolor-dt">

      <h:outputText value="Mobile Number" />

      </rich:column>

      <rich:column width="217" styleClass="serviceno-bgcolor-dt">

      <h:outputText value="Sales Channel ID" />

      </rich:column>

      <rich:column width="122" styleClass="serviceno-bgcolor-dt">

      <h:outputText value="Status" />

      </rich:column>

      <rich:column width="114" styleClass="serviceno-bgcolor-dt">

      <h:outputText value="Remarks" />

      </rich:column>

      </rich:columnGroup>

      </f:facet>

      <!-- ######################Boolean Field - Radio Button######################### -->

       

      <rich:column>

      <a4j:outputPanel>

      <h:selectOneRadio id="selectedField" value="#{editAccountInfoBean.selectedMobileNo}"

      layout="pageDirection" immediate="true"

      valueChangeListener="#{editAccountInfoBean.selectedValueChange}"

        style="font-size:10px;">

      <f:selectItem itemValue="#{mobileNumber.searchMobileNo}" itemLabel="#{mobileNumber.searchMobileNo}"/> 

         </h:selectOneRadio>

         </a4j:outputPanel>  

      </rich:column>

       

      <!-- ######################Mobile No Field######################### -->

      <rich:column>

      <h:outputText id="mobileNoField" value="#{mobileNumber.searchMobileNo}"/>

      </rich:column>

      <!-- ######################Sales Channel ID Field######################### -->

      <rich:column>

      <h:outputText id="salesChannelField" value="#{mobileNumber.searchSalesChannelID}"/>

      </rich:column>

      <!-- ######################Status Field######################### -->

      <rich:column>

      <h:outputText id="statusField" value="#{mobileNumber.searchStatus}"/>

      </rich:column>

      <!-- ######################Remarks Field######################### -->

      <rich:column>

      <h:outputText id="remarksField" value="#{mobileNumber.searchRemarks}"/>

      </rich:column>

         

          </rich:dataTable>

          </h:panelGrid>

          </a4j:region>

          </a4j:outputPanel>

          </td>

        </tr>

          <tr>

          <td> </td>

        </tr>

        <tr>

          <td>

          <a4j:outputPanel id="showData3">

             <a4j:region  rendered="#{editAccountInfoBean.searchListMobileFlag == 'show'}">

          <table width="400" border="0" cellspacing="0.1" cellpadding="0.1">

              <tr>

                <td width="10"> </td>

                <td width="83"> <a4j:commandButton   value="#{msg['choose']}" rendered="#{editAccountInfoBean.searchListMobileFlag == 'show'}"/></td>

                <td width="307"><a4j:commandButton   value="#{msg['cancel']}"

                limitToList="true" ajaxSingle="true" rendered="#{editAccountInfoBean.searchListMobileFlag == 'show'}"

                oncomplete="Richfaces.hideModalPanel('info_msisdn_no_searchmodal');Richfaces.showModalPanel('info_changemobile_editmodal');"/></td>

              </tr>

          </table>

          </a4j:region>

          </a4j:outputPanel>

          </td>

        </tr>

        <tr>

          <td> </td>

        </tr>

      </table>

      </a4j:region>

      </rich:modalPanel>

      </h:outputLink>

      </a4j:form>

      </a4j:region>

      </f:subview>

      -----------------------------------------------------------------------------------------------
      <a4j:support eventsQueue="my.events.queue" event="onclick" actionListener="#{editAccountInfoBean.assignSelected}"
      status="status" ajaxSingle="true">
      My problem is in screen both the radio buttons is selected.How to solve this.???