Hi all,
I have three radio buttons that when clicked are supposed to show a particular div and hide other divs, pretty straight forward. But what I have noticed is that while the code works perfectly in Chrome and Firefox it breaks down in IE 7 & 8. Here is the code:
<%= radio_button_tag( :synch, :div_1, @account.div_1 == true ? true : false, :onchange => 'new Effect.Fade(\'div2_check\'); new Effect.Appear(\'div1_check\');' ) %>
<%= radio_button_tag( :synch, :div_2, @account.div_2 == true ? true : false, :onchange => 'new Effect.Fade(\'div1_check\'); new Effect.Appear(\'div2_check\');' ) %>
<%= radio_button_tag( :synch, :none, (@account.div_1 == false and @account.div_2 == false) ? true : false, :onchange => 'new Effect.Fade(\'div1_check\'); new Effect.Fade(\'div2_check\');' ) %>
<div id = "div1_check" style = "<% if !@account.div_1 %> display:none;<% end %>border: 1px solid black;"> .... </div>
<div id = "div2_check" style = "<% if !@account.div_2 %> display:none;<% end %>border: 1px solid black;"> ... </div>
When the page loads and I click on one of the radio buttons it's almost as if the first click isn't "heard", and when I click a different radio button a div is shown but not the div that I clicked, instead the previous div is show from the "unheard" click.
Really I'm just wondering if anybody has encountered a similar problem and how they fixed it if they have. I have been looking at mis-matched tags with no luck. IE is giving me a JavaScript error at the bottom, but I am a little suspicious of this just because all other browsers fail to give a similar error and work as designed.
