• Radio Buttons and Partial Refresh

    By Ryan Buening 1 decade ago

    Not necessarily related to the ExtLib, but I've asked this in the XPages forum with nobody knowing a solution. When you have radio buttons in a panel that gets refreshed, unless you click on the radio button circle, the value doesn't "stick". It is a pain to deal with. Simple example is posted below. Explained in detail here: http://www-10.lotus.com/ldd/nd85forum.nsf/ShowMyTopicsAllFlatweb/5be066a529abcb698525773d005ce7c1?OpenDocument

     

    <?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<xp:label id="label1">

<xp:this.value><![CDATA[Clicking the word, "Yes" or "No" doesn't keep the value selected after a partial. You have to actually click the circle.]]></xp:this.value></xp:label>

<xp:panel id="PartialPanel">

<xp:radioGroup id="radioGroup1">

<xp:selectItem itemLabel="Yes" itemValue="Y"></xp:selectItem>

<xp:selectItem itemLabel="No" itemValue="N"></xp:selectItem>

<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="PartialPanel"></xp:eventHandler>

</xp:radioGroup>

</xp:panel>

</xp:view>

    • Known Issue

      By Darin Egan 1 decade ago

      Ryan, this issue is known about and logged as SPR DEGN8NMGF5.

      The radio group output markup for each radio option as follows:

      <label><input type="radio" value="Y" name="root:_id1:radioGroup1"> Yes</label>

      The clicking on the label does appear to apply focus to the radio control yet however with selecting the control hence the appearance of not "sticking". Ideally the above could should be as follows which associates the label with the control.

       

      <input type="radio" value="Y" id="radio" name="root:_id1:radioGroup1">
      <label for="radio">Yes</label>

      You can achieve the same effect if the ExtLib is available to you using the Dojo controls like so.

       

      &lt;xp:panel id=&quot;PartialPanel&quot;&gt;

&lt;xe:djRadioButton id=&quot;djRadioButton1&quot; value=&quot;#{sessionScope.djButton2}&quot;

groupName=&quot;val&quot; selectedValue=&quot;Y&quot; label=&quot;Yes&quot;&gt;

&lt;xp:eventHandler event=&quot;onclick&quot; submit=&quot;true&quot;

refreshMode=&quot;partial&quot; refreshId=&quot;PartialPanel&quot;/&gt;

&lt;/xe:djRadioButton&gt;

&lt;xe:djRadioButton id=&quot;djRadioButton2&quot; value=&quot;#{sessionScope.djButton2}&quot;

groupName=&quot;val&quot; selectedValue=&quot;N&quot; label=&quot;No&quot;&gt;

&lt;xp:eventHandler event=&quot;onclick&quot; submit=&quot;true&quot;

refreshMode=&quot;partial&quot; refreshId=&quot;PartialPanel&quot;/&gt;

&lt;/xe:djRadioButton&gt;

&lt;/xp:panel&gt;

&nbsp;

      • Re:

        By Ryan Buening 1 decade ago

        Thanks for the reply Darin. Dojo controls are not an option in my case. There is no workaround for the core radio button control then correct?

        • Yup

          By Darin Egan 1 decade ago

           

          Ryan, I believe it is possible to do so just using the standard radio buttons and manually associating them with labels. However the drawback is that events would need to be assigned to the individual radios rather than the group as a whole. It is somewhat more cumbersome but perhaps an interim solution for the time being. See example.

&nbsp;

&lt;xp:panel id=&quot;PartialPanel&quot;&gt;

&nbsp; &nbsp; &lt;fieldset&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &lt;legend&gt;Select either Yes or No&lt;/legend&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &lt;xp:radio text=&quot;Yes&quot; id=&quot;radio1&quot; selectedValue=&quot;Y&quot;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; groupName=&quot;radioGroup&quot;&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;xp:eventHandler event=&quot;onclick&quot; submit=&quot;true&quot;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; refreshMode=&quot;partial&quot; refreshId=&quot;PartialPanel&quot;/&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &lt;/xp:radio&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &lt;xp:radio text=&quot;No&quot; id=&quot;radio2&quot; selectedValue=&quot;N&quot; groupName=&quot;radioGroup&quot;&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;xp:eventHandler event=&quot;onclick&quot; submit=&quot;true&quot;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; refreshMode=&quot;partial&quot; refreshId=&quot;PartialPanel&quot;/&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &lt;/xp:radio&gt;

&nbsp; &nbsp; &lt;/fieldset&gt;

&lt;/xp:panel&gt;

&nbsp;

          • Thanks (EOM)

            By Ryan Buening 1 decade ago