Check a Radio and then Hide/Show a table. Idea?

HCL Domino Domino Forum
1

Hi, (i speak spanish)I have a problem trying to hide a table, after having selected a radio button value(Yes/No).

I tryed either, full update and table partial update, after clicking a radio button, but it didn’t work. I tryed onChange event too.

Visible property is computed for the table:

i tryed getComponent(“radioId”)==“1”

and documentDataSource.getItemValueAsString(“radioId”)==“1”

When i click the radio, the page reload(full update) but the table is still there.

Which’s the way???

Thanks

Diego

2

Subject: try this…

<xp:radio text="Show" id="radio1" groupName="rgrp"

	value="#{sessionScope.vis01}" selectedValue="show">

	<xp:eventHandler event="onclick" submit="true"

		refreshMode="complete">

	</xp:eventHandler>

</xp:radio>

<xp:radio text="Hide" id="radio2" groupName="rgrp"

	value="#{sessionScope.vis01}" selectedValue="hide">

	<xp:eventHandler event="onclick" submit="true"

		refreshMode="complete">

	</xp:eventHandler>

</xp:radio>

<xp:br></xp:br>

<xp:table

	style="width:193.0px;background-color:rgb(0,0,255);border-color:rgb(255,255,0);border-style:solid;border-width:medium"

	border="1">

	<xp:this.rendered><![CDATA[#{javascript:sessionScope.vis01 == "show"}]]></xp:this.rendered>

	<xp:tr>

		<xp:td>

			<xp:button value="Label" id="button1"></xp:button>

		</xp:td>

		<xp:td></xp:td>

	</xp:tr>

	<xp:tr>

		<xp:td></xp:td>

		<xp:td>

			<xp:button value="Label" id="button2"></xp:button>

		</xp:td>

	</xp:tr>

</xp:table>
3

Subject: it work, but…!

Thanks Paul. Your code work.But finally i did it with a simple condition:

getComponent(“abc”)==“1” on the table visible property, and with updateall for onclick radio buttons events.

I found that it didn’t work, when the property “No Data Validation” was checked. It was my problem…

Thanks!!

Diego

4

Subject: Here’s a better example that works with ‘No Data Validations’…

Forget the first example as you are most likely to use ‘No Data Validation’ when you’re trying to show and hide stuff.

When using no data validation on the action we need to use getSubmittedValue() along with the getComponent().

See this example…

<xp:br></xp:br>

<xp:radio text="Show" id="radio3" groupName="rg"

	value="#{sessionScope.vis02}" selectedValue="show">

	

<xp:eventHandler event="onclick" submit="true"

	refreshMode="partial" refreshId="panel1" immediate="true">

</xp:eventHandler></xp:radio>

<xp:radio text="Hide" id="radio4" groupName="rg"

	value="#{sessionScope.vis02}" selectedValue="hide">



<xp:eventHandler event="onclick" submit="true"

	refreshMode="partial" immediate="true" refreshId="panel1">

</xp:eventHandler></xp:radio>

<xp:panel id="panel1">

	<xp:table

		style="width:193.0px;background-color:rgb(200,240,198);border-color:rgb(0,64,128);border-style:dotted;border-width:thin"

		 id="table1">

		<xp:this.rendered><![CDATA[#{javascript:var r1 = getComponent("radio3");

var r1v = r1.getSubmittedValue();

r1v ==“show”}]]></xp:this.rendered>

		<xp:tr>

			<xp:td>

				<xp:button value="Label" id="button3"></xp:button>

			</xp:td>

			<xp:td></xp:td>

		</xp:tr>

		<xp:tr>

			<xp:td></xp:td>

			<xp:td>

				<xp:button value="Label" id="button4"></xp:button>

			</xp:td>

		</xp:tr>

	</xp:table>

</xp:panel>

And here’s another where you are submitting data…

<xp:br></xp:br>

Continent:

<xp:comboBox id="comboBox1" defaultValue="#{javascript:''}">



	<xp:selectItem itemLabel=""></xp:selectItem>

	<xp:selectItem itemLabel="North America"></xp:selectItem>

	<xp:selectItem itemLabel="Europe"></xp:selectItem>



	<xp:eventHandler event="onchange" submit="true"

		refreshMode="partial" refreshId="comboBox2" immediate="true">

		<xp:this.action><![CDATA[#{javascript:// just re-evaluate

// the comboBox2 items}]]></xp:this.action>

	</xp:eventHandler>

</xp:comboBox>

<xp:br></xp:br>

Country:

<xp:comboBox id="comboBox2">

	<xp:selectItems>

		<xp:this.value><![CDATA[#{javascript:

var combo1 = getComponent(‘comboBox1’);

// value submitted from the browser

var value = combo1.getSubmittedValue();

if( null == value ){

// else not yet submitted

value = combo1.getValue();

}

if( value == ‘North America’ ){

return ['','United States of America','Canada', 'Mexico'];

}else if ( value == ‘Europe’ ){

return ['','United Kingdom', 'France', 'Germany', 'Other'];

}

return “Select a value in comboBox1”;

}]]></xp:this.value>

	</xp:selectItems>

</xp:comboBox>