0

The main task is to select one check box and get the index and set it in the edit box and proceed further,I am successful in achieving the selected index in edit box, but I want to allow the user to select only one date

After selecting one check box, I want to uncheck the other checked values,But in my code I can select the multiple check boxes and the recently checked value is getting stored in the edit box, I have tried with some client side JavaScript but failed , even the storing the checked index value in view scope method didn't helped me. the code with the check box in repeat control is below.

 <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:this.data>
        <xp:dominoDocument var="document1" formName="testing">
        </xp:dominoDocument>
    </xp:this.data>

    <xp:br></xp:br>
    <xp:repeat id="repeat1" rows="30" var="r" indexVar="i" first="0">
        <xp:this.value><![CDATA[#{javascript:var v:java.util.Vector = new java.util.Vector();
v.add('Date1');v.add('Date2');v.add('Date3');v.add('Date4');v.add('Date5');v.add('Date6');
return v;}]]></xp:this.value>
        <xp:br></xp:br>
        <xp:div id="checkDiv">



            <xp:checkBox id="checkBox1">

            <xp:eventHandler event="onchange" submit="true"
                refreshMode="partial" refreshId="checkDiv">
                <xp:this.action><![CDATA[#{javascript:if(getComponent("checkBox1").value == "true"){
//viewScope.put("IdValue",optionIndex2)
getComponent("finalDate").setValue(r);
//getComponent("checkBox1").getAttributes().put("true",optionIndex2);
}
else
getComponent("finalDate").setValue("");
}]]></xp:this.action>
            </xp:eventHandler></xp:checkBox>
            <xp:text escape="true" id="computedField1"
                value="#{javascript:r}">

            </xp:text>
        </xp:div>
        <xp:br></xp:br>
    </xp:repeat>
    <xp:inputText id="finalDate"></xp:inputText>
</xp:view>

I Don't know, checking it on client side would be optimal or on server side will be better.Need an idea how to keep only one check box checked. Any kind of suggestion would be helpful

Ajit Hogade
  • 1,072
  • 9
  • 29
  • A similar question with some suggestions: http://stackoverflow.com/questions/26352924/xpages-checkbox-single-value-selection – Brian Gleeson - IBM Oct 12 '15 at 12:14
  • Thanx for the instant reply but in my case there is only one check box in a repeat control which get repeat with the records and want to select one from those all records given by repeat control. – Ajit Hogade Oct 12 '15 at 12:18
  • Is there a reason for using a checkbox rather than a button? You cannot access other rows of a repeat. Unless you set repeatControls="true", there is only one row, just repeated during Render Response. – Paul Stephen Withers Oct 12 '15 at 12:27

3 Answers3

0

I recommend you look at this video :

http://www.notesin9.com/2011/04/01/notesin9-025-selecting-documents-from-a-repeat-control/

This is about selecting multiple documents in a repeat. I would think to select just one, all you'd need to do is replace my ArrayList with a single variable. So each new selection overwrites the last and you only can select one document at a time.

Note I also used buttons and css to highlight the rows... converting to checkbox from the button also shouldn't be a big deal if you want to do that.

David Leedy
  • 3,583
  • 18
  • 38
  • I have tried the above suggestion,The confusion of mine is that the check boxes in a repeat control have same ids because it gets repeated according to the repeat control data,it doesn't have any unique id which i can use to un-check the remaining check boxes on-click of current check box.On-click I can put the index value in session scope but I am not getting how check and uncheck the boxes using the session scope. – Ajit Hogade Oct 13 '15 at 06:07
  • 1
    As Paul suggests I think checkbox is inappropriate for this use case. Checkbox typically implies multiples allowed. Personally I would use the button BUT if you think about it from the video I posted - You don't need an "actual checkbox" you really just need a font or graphic of checked and unchecked. Then use SSJS and the scoped var to render the appropriate on similar to how the css highlighting is done in the video. Just an idea... – David Leedy Oct 13 '15 at 11:30
  • I have tried JQuery for this purpose and it is working, I would like to post my answer you can Please correct me if there any thing additional in the code. – Ajit Hogade Oct 23 '15 at 05:12
0

If you step back a re-evaluate the controls used and the choice of repeat control, is there a much simpler approach?

Unless there's more code not included, you're looking to get the user to select one from a list of field names to then do something. Instead of the repeat control and a computed field, I would use a Radio Button Group or Combo Box, and then you handle that functional requirement without needing either the repeat control or the computed field. Both allow the options to be calculated.

If you need a repeat control because there is more than just the list of names in the repeat, again choose a component specifically designed for ensuring single selection - a button or a radio button. I believe you can set a group name on a radio button, which would cover the requirement you have.

A checkbox is specifically designed for multi-select. A radio button is the component used for single-select. Seems like a checkbox is not the best choice for the functionality you're looking for.

Paul Stephen Withers
  • 15,699
  • 1
  • 15
  • 33
  • Yes as per your Suggestion it correct that check is not suitable for this purpose as check box is for multi select, but actually it is a need which we needed to implement in one of the situation.So in order to get this I have tried jQuery for the above purpose.And yes its done using jquery as per need.using both CSJS and SSJS. – Ajit Hogade Oct 23 '15 at 05:09
  • a checkbox is often used for a opt-in or opt-out function so only 1 value (true or false) – Patrick Kwinten Nov 05 '17 at 10:33
0

After some research,It seems that it can be possible using jquery,by passing the unique styleClass to all the check boxes generates according to repeat control.

So the first change in the check box is the styleClass which is computed as "return ""+r;" that is index,

Next I have used the Client-side JavaScript to check uncheck the on event.

CSJS:

 var textFieldValue = document.getElementById('#{id:finalDate}').value;
 if(textFieldValue != "")
 {
 $("."+textFieldValue).prop("checked", false);
 }

In Server-side JavaScript, Setting the textfield value on condition if checkbox is checked to "true".

SSJS:

if(getComponent("checkBox1").getValue() == "true"){
getComponent("finalDate").setValue(""+r);
}
else
getComponent("finalDate").setValue("");

And the checkBox partial refresh to textfield.

The overall page code:

    <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:this.data>
        <xp:dominoDocument var="document1" formName="testing">
        </xp:dominoDocument>
    </xp:this.data>

    <xp:br></xp:br>
    <xp:repeat id="repeat1" rows="30" var="r" indexVar="i" first="0">
        <xp:this.value><![CDATA[#{javascript:var v:java.util.Vector = new java.util.Vector();
v.add('Date1');v.add('Date2');v.add('Date3');v.add('Date4');v.add('Date5');v.add('Date6');
return v;}]]></xp:this.value>
        <xp:br></xp:br>
        <xp:div id="checkDiv">



            <xp:checkBox id="checkBox1">

            <xp:this.styleClass><![CDATA[#{javascript:return ""+r;}]]></xp:this.styleClass>
            <xp:eventHandler event="onchange" submit="true"
                refreshMode="partial" refreshId="finalDate">
                <xp:this.action><![CDATA[#{javascript:if(getComponent("checkBox1").getValue() == "true"){
getComponent("finalDate").setValue(""+r);
}
else
getComponent("finalDate").setValue("");
}]]></xp:this.action>
                <xp:this.script><![CDATA[var v = document.getElementById('#{id:finalDate}').value;
if(v!="")
{
$("."+v).prop("checked", false);
}


]]></xp:this.script>
            </xp:eventHandler></xp:checkBox>
            <xp:text escape="true" id="computedField1"
                value="#{javascript:r}">

            </xp:text>
        </xp:div>
        <xp:br></xp:br>
    </xp:repeat>
    <xp:inputText id="finalDate"></xp:inputText>
</xp:view>

This may be useful also if using radio buttons in repeat control. Check boxes are now working as per need with setting the values to text field.

Ajit Hogade
  • 1,072
  • 9
  • 29