Hide the components in Visual JSF 1.x (Woodstock) Using JavaScript
Hi friends, today my friend had a small problem i.e., based on the check-box selected value it shows the text fields (in html <input type="text">),
finally i got the solution for it using the javascript
Here is my solution for the problem.
design the form
1. checkbox group (id = checkboxGroup1 in jsf, id =form1:checkboxGroup1 in html)
2. textfield (id = order in jsf, id = form1:order_field in html)
3. another textfield (id = order2 in jsf, id = form1:order2_field in html)
2. prerender
Save files, Start the Sever and run the file.
Hi friends, today my friend had a small problem i.e., based on the check-box selected value it shows the text fields (in html <input type="text">),
finally i got the solution for it using the javascript
Here is my solution for the problem.
design the form
1. checkbox group (id = checkboxGroup1 in jsf, id =form1:checkboxGroup1 in html)
2. textfield (id = order in jsf, id = form1:order_field in html)
3. another textfield (id = order2 in jsf, id = form1:order2_field in html)
open the jsp page and add the below script between the head tag( <webuijsf:head"> </webuijsf:head>)
<script>
//<![CDATA[
function ahk(){
var group = document.getElementById("form1:checkboxGroup1").getElementsByTagName('input');
document.getElementById("form1:order_field").style.visibility = "hidden";
document.getElementById("form1:order2_field").style.visibility = "hidden";
var len = group.length;
for(var i =0;i<len;i++){
if("item1" == group[i].value){
if(group[i].checked){
document.getElementById("form1:order_field").style.visibility = "visible";
}
}
if("value" == group[i].value){
if(group[i].checked){
document.getElementById("form1:order2_field").style.visibility = "visible";
}
}
}
}
//]]></script>
initially generated code...
Remove the Styles to the textfield component
Before doing this you have to bind the componets, otherwise it won't work.
open the java page and add the below code in _int(), prerender(), methods respectively
_init and prerender methods are pre defined methods you just implement those methods
//in _init method
order.setStyle("position: absolute; left: 336px; top: 96px;visibility:hidden");
order2.setStyle("position: absolute; left: 336px; top: 168px;visibility:hidden");
//in prerender Method
if (checkboxGroup1.getSelected() == null) {
order.setStyle("position: absolute; left: 336px; top: 96px;visibility:hidden");
order2.setStyle("position: absolute; left: 336px; top: 168px;visibility:hidden");
} else {
System.out.println("Entered");
order.setStyle("position: absolute; left: 336px; top: 96px;visibility:hidden");
order2.setStyle("position: absolute; left: 336px; top: 168px;visibility:hidden");
String[] group = (String[]) checkboxGroup1.getSelected();
for (String a : group) {
System.out.println("aa : " + a);
if ("item1".equalsIgnoreCase(a)) {
order.setStyle("position: absolute; left: 336px; top: 96px;visibility:visible");
}
if ("value".equalsIgnoreCase(a)) {
order2.setStyle("position: absolute; left: 336px; top: 168px;visibility:visible");
}
}
}
Screen shots
1. init
2. prerender
Save files, Start the Sever and run the file.
All the Best....
EmoticonEmoticon