I have a jsf application, and the rendered html has a radio button
group that essentially looks like this :
<b><script src="javascript/jquery-1.2.1.js"></script>
<script language="JavaScript">
<!--
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(":radio").css({"background":"#003366", "border":"none"});
});
.
.
//-->
</script>
.
.
<table id="buttonsForm:filterByActor" style="margin: 0px 0px 0px 15px;
font-size: 12px; background-color: #003366;">
<tr>
<td><input type="radio" checked="checked"
name="buttonsForm:filterByActor" id="buttonsForm:filterByActor:0"
value="Y" />
<label for="buttonsForm:filterByActor:0"> My Cases</label></td>
<td><input type="radio" name="buttonsForm:filterByActor"
id="buttonsForm:filterByActor:1" value="N" />
<label for="buttonsForm:filterByActor:1"> All Cases</label></td>
</tr>
</table></b>
I wish to hide/show the above table depending on what is rendered in
my iframe, so I used jquery in the header of the content that is
rendered.
Here is the jquery script for the content in the iframe when I wish to
show the table:
<b><script src="javascript/jquery-1.2.1.js"></script>
<script language="JavaScript">
<!--
jQuery.noConflict();
jQuery(document).ready(function(){
parent.document.getElementById("buttonsForm:filterByActor").style.display="block"
//jQuery("#buttonsForm:filterByActor",
parent.document).css({"display":"block"});
});
//-->
</script></b>
Here is the jquery script for the content in the iframe when I wish to
hide the table:
<script src="javascript/jquery-1.2.1.js"></script>
<script language="JavaScript">
<b><!--
jQuery.noConflict();
jQuery(document).ready(function(){
parent.document.getElementById("buttonsForm:filterByActor").style.display="none"
//jQuery("#buttonsForm:filterByActor",
parent.document).css({"display":"none"});
});
//--></b>
The issue is that the jquery script that is commented out does not
work, BUT the standard javascript code DOES WORK - why?!?! What am I
doing wrong? Is there a better way to do this?
