Jun 10, 2012, 4:25 PM
68 Posts
topic has been resolvedResolved

Disabling groups of checkboxes not all. Getting values from documents.

  • Category: Dojo and Client Side JavaScript
  • Platform: All
  • Release: 8.5.3
  • Role: Administrator
  • Tags:
  • Replies: 4
Hi all.
 
I have pretty big problem. I have such an situation:
 
 
As you can see you have here simply repeated checkboxes. I want make something that will disable checkboxes when there is more than 3 checked and here is my script:
 

var i = 0;
var ilosc = 0;
while(dojo.query('input[type=checkbox]:checked')[i]!=null)
{
    ilosc++;
    i++;
}

i = 0;

if(ilosc>3)
{
    while(dojo.query('input[type=checkbox]')[i]!=null)
    {
        dojo.query('input[type=checkbox]')[i].disabled = true;
        i++;
    }
}
 
Where ilosc is a count of checked checkboxes but there is one problem. You can see it here:
 
https://dl.dropbox.com/u/16887656/repeat2.PNG

This script disable all checkboxes and I want make him to disable checkboxes only in repeat area ... This is first problem
 
Second is much easier I have document named "document1" and field in this document named "field1". How to get value of field1 from document1 in server side it would look like this:
 
document1.getItemValueString("field1");
 
And in client side how can I get this ?
 
 
Jun 11, 2012, 7:47 AM
126 Posts
Re: Disabling groups of checkboxes not all. Getting values from documents.
I'm guessing the reason its disabling all of them is that your running the code on a page level. Meaning the previous code looks like its not just checking for the checkboxes in one repeat but for the entire page. so when 3 of them get set, all on the page get disabled.
 
You need to do something more along the lines of: 
 
var repeat = dojo.byId('#{id:repeat1}'); 
var list = repeat.elementsByTagName('input'); 
for(x in list)
{
   if(list[x].type == "checkbox")
   {
       .....
   } 
 
this will check inside one repeat (or panel etc.) for checkboxes and leave the rest alone.
 
also you can run serverside in client side with either a remote service or code along the lines of:
 
var temp = "#{javascript: document1.getItemValueString('From')}"; 
alert(temp); 
Jun 11, 2012, 10:16 AM
68 Posts
Re: Disabling groups of checkboxes not all. Getting values from documents.
Great to hear you Simon.
 
As always you are very helpful. I found a little bug in your code (or maybe I made it buggy):
 
 var list = repeat.getElementsByTagName('input');
 
instead of:
 
var list = repeat.elementsByTagName('input'); 
 
But still it don't work at all... The code is pretty simple I tried to make disable all checkbox in repeat after check (for test your function). But as a interior script (in repeat control) this don't work at all.
 
This is script:
 
var repeat = dojo.byId('#{id:repeat1}');
var list = repeat.getElementsByTagName('input');  <== Here is problem I "debuged" it and write alert("debug") after this don't work so here is some error probably.

for(x in list)
{
   if(list[x].type == "checkbox")
   {
       list[x].disabled = true;
   }
 
But there is a strange thing I made button above repeat control, and it partial work - it simply disable all checkboxes on page :)
 
 
Here is code of all (same only for test so its not so big):
 
 <xp:button value="Button Above Repeat" id="button3">
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[var repeat = dojo.byId('#{id:repeat1}');
var list = repeat.getElementsByTagName('input');

for(x in list)
{
   if(list[x].type == "checkbox")
   {
       list[x].disabled = true;
   }
} ]]></xp:this.script>
        </xp:eventHandler></xp:button>
    <xp:br></xp:br><xp:repeat id="repeat1" rows="30" first="0" indexVar="index">

        <xp:this.value><![CDATA[#{javascript:return [0,1,2];}]]></xp:this.value>

        <xp:br></xp:br>

        <xp:text escape="true" id="computedField1">
            <xp:this.value><![CDATA[#{javascript:return "Repeat no: "+index;}]]></xp:this.value>
        </xp:text>
        <xp:br></xp:br><xp:button id="button4">
        <xp:this.value><![CDATA[#{javascript:return "Button Inside Repeat no: "+index;}]]></xp:this.value>
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[var repeat = dojo.byId('#{id:repeat1}');
var list = repeat.getElementsByTagName('input');

for(x in list)
{
   if(list[x].type == "checkbox")
   {
       list[x].disabled = true;
   }
} ]]></xp:this.script>
        </xp:eventHandler></xp:button>
        <xp:repeat id="repeat2" rows="30" indexVar="index2">
            <xp:this.value><![CDATA[#{javascript:return [0,1,2,3,4,5,6];}]]></xp:this.value>
            <xp:checkBox text="#{javascript:return index2;}" id="checkBox1">


                <xp:eventHandler event="onchange" submit="false">
                    <xp:this.script><![CDATA[var repeat = dojo.byId('#{id:repeat1}');
var list = repeat.getElementsByTagName('input');

for(x in list)
{
   if(list[x].type == "checkbox")
   {
       list[x].disabled = true;
   }
} ]]></xp:this.script>
                </xp:eventHandler>

            </xp:checkBox>
            <xp:br></xp:br>
        </xp:repeat>
    </xp:repeat>
 
UPDATE:
 
I have changed in inside inside buttons repeat1 to repeat2 and this works but problem is when I want to make this as a  onChange event in checkboxes - it don't work why ? Full code:
 
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:button value="Button Above Repeat" id="button3">
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[var repeat = dojo.byId('#{id:repeat1}');
var list = repeat.getElementsByTagName('input');

for(x in list)
{
   if(list[x].type == "checkbox")
   {
       list[x].disabled = true;
   }
} ]]></xp:this.script>
        </xp:eventHandler></xp:button>
    <xp:br></xp:br><xp:repeat id="repeat1" rows="30" first="0" indexVar="index">

        <xp:this.value><![CDATA[#{javascript:return [0,1,2];}]]></xp:this.value>

        <xp:br></xp:br>

        <xp:text escape="true" id="computedField1">
            <xp:this.value><![CDATA[#{javascript:return "Repeat no: "+index;}]]></xp:this.value>
        </xp:text>
        <xp:br></xp:br><xp:button id="button4">
        <xp:this.value><![CDATA[#{javascript:return "Button Inside Repeat no: "+index;}]]></xp:this.value>
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[var repeat = dojo.byId('#{id:repeat2}');
var list = repeat.getElementsByTagName('input');

for(x in list)
{
   if(list[x].type == "checkbox")
   {
       list[x].disabled = true;
   }
} ]]></xp:this.script>
        </xp:eventHandler></xp:button>
        <xp:repeat id="repeat2" rows="30" indexVar="index2">
            <xp:this.value><![CDATA[#{javascript:return [0,1,2,3,4,5,6];}]]></xp:this.value>
            <xp:checkBox text="#{javascript:return index2;}" id="checkBox1">


                <xp:eventHandler event="onchange" submit="false">
                    <xp:this.script><![CDATA[var repeat = dojo.byId('#{id:repeat2}');
var list = repeat.getElementsByTagName('input');

for(x in list)
{
   if(list[x].type == "checkbox")
   {
       list[x].disabled = true;
   }
} ]]></xp:this.script>
                </xp:eventHandler>

            </xp:checkBox>
            <xp:br></xp:br>
        </xp:repeat>
    </xp:repeat>

</xp:view>
 
Jun 11, 2012, 11:06 AM
126 Posts
Re: Disabling groups of checkboxes not all. Getting values from documents.
the error being thrown in the browser console is " can not call getElementsByTagName() on null ", this doesn't mean this method is flawed, it can't find the repeat control that its trying to execute this on. getElementsByTagName only works on DOM elements and at the minute its trying to run against a null object, thats why its not working.
 
I'm not sure why but the client side expression :  var repeat = dojo.byId('#{id:repeat2}'); doesn't seem to be working from inside the repeat, I'm not sure why, thats why the button is working and the on change isn't. When I hardcoded this to the id of a repeat it worked fine. I would suggest something like having a hidden label that uses SSJS to get the client id of the repeat and instead of (#{id:repeat2})  get the innerHTML of the hidden label. Not the best solution but it will work.
Jun 11, 2012, 11:23 AM
68 Posts
Re: Disabling groups of checkboxes not all. Getting values from documents.
Idea look pretty awsome ! But still nothing in my code:
 
<xp:button value="Button Above Repeat" id="button3">
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[var repeat = dojo.byId('#{id:repeat1}');
var list = repeat.getElementsByTagName('input');

for(x in list)
{
   if(list[x].type == "checkbox")
   {
       list[x].disabled = true;
   }
} ]]></xp:this.script>
        </xp:eventHandler></xp:button>
    <xp:br></xp:br><xp:repeat id="repeat1" rows="30" first="0" indexVar="index">

        <xp:this.value><![CDATA[#{javascript:return [0,1,2];}]]></xp:this.value>

        <xp:br></xp:br>

        <xp:text escape="true" id="computedField1">
            <xp:this.value><![CDATA[#{javascript:return "Repeat no: "+index;}]]></xp:this.value>
        </xp:text>
        <xp:br></xp:br><xp:button id="button4">
        <xp:this.value><![CDATA[#{javascript:return "Button Inside Repeat no: "+index;}]]></xp:this.value>
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[var repeat = dojo.byId('#{id:repeat2}');
var list = repeat.getElementsByTagName('input');

for(x in list)
{
   if(list[x].type == "checkbox")
   {
       list[x].disabled = true;
   }
} ]]></xp:this.script>
        </xp:eventHandler></xp:button>
        <xp:br></xp:br>
       
        <xp:label id="label1"><xp:this.value><![CDATA[#{javascript:var repeat2:com.ibm.xsp.component.xp.XspDataIterator = getComponent("repeat2");
return getClientId("repeat2");}]]></xp:this.value></xp:label><xp:repeat id="repeat2" rows="30" indexVar="index2">
            <xp:this.value><![CDATA[#{javascript:return [0,1,2,3,4,5,6];}]]></xp:this.value>
<xp:checkBox text="#{javascript:return index2;}" id="checkBox1">


                <xp:eventHandler event="onchange" submit="false">
                    <xp:this.script><![CDATA[//var repeat = dojo.byId('#{id:ta}');
var repeat = "#{javascript:getComponent("label1").getValue();}";
var list = repeat.getElementsByTagName('input');
alert(list);
for(x in list)
{
   if(list[x].type == "checkbox")
   {
       list[x].disabled = true;
   }
} ]]></xp:this.script>
                </xp:eventHandler>

</xp:checkBox><xp:br></xp:br></xp:repeat>
    </xp:repeat>
 
Label  1 holds client ID of repeat2 control ... Same with innerHTML
 
var repeat = dojo.byId("#{id:label1}").innerHTML;
var list = repeat.getElementsByTagName('input');   <--- This dont work
 
Label have value  getClientId("repeat2");