2

I have a single html file split into multiple pages with divs. On each page I have a units toggle radio buton, which on pressing I would like all the corresponding radio buttons on the non visible pages to toggle as well.

I've tried with the below code, which works well for the page visible, but throws the following error when it tries to set the non visible radio button (a2 and b2);

Error: cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'

Code example;

    <fieldset data-role="controlgroup" data-type="horizontal" >
<input type="radio" align="center" name="radio-view1" id="radio-view-a1" checked="checked">
<label for="radio-view-a1">Imperial</label>
<input type="radio" name="radio-view1" id="radio-view-b1">
<label for="radio-view-b1">Metric</label>
    </fieldset>

    <!--script type="text/javascript" language="javascript">

$('#radio-view-a1').click(function(){       
    $('#radio-view-a1').attr('checked',true).checkboxradio("refresh");
    $('#radio-view-b1').attr('checked',false).checkboxradio("refresh");
    $('#radio-view-a2').attr('checked',true).checkboxradio("refresh");
    $('#radio-view-b2').attr('checked',false).checkboxradio("refresh");
    updown_toggle_units2imperial();
    });
$('#radio-view-b1').click(function(){
    $('#radio-view-a1').attr('checked',false).checkboxradio("refresh");
    $('#radio-view-b1').attr('checked',true).checkboxradio("refresh");
    $('#radio-view-a2').attr('checked',false).checkboxradio("refresh");
    $('#radio-view-b2').attr('checked',true).checkboxradio("refresh");
    updown_toggle_units2metric();
            });
   </script-->

Edit: I've created a Fiddle to demonstrate. If you go to link, and click on the Metric button with firebug or similar activated, you can see the error message

Any assistance to help me sort out how to achieve the desired beviour would be much appreciated!

Thanks

Mark Burgoyne
  • 1,524
  • 4
  • 18
  • 31
  • the provided link to the jsfiddle does not work... – Taifun Nov 08 '12 at 13:58
  • Hi taifun, not sure what you mean by not working. If you click on the metric button, it does change to blue, but if you navigate to page 2 (top left link) the corresponding button will not have changed. If you have firebug or similar open you would have seen the error thrown that I had mentioned – Mark Burgoyne Nov 08 '12 at 20:32
  • Thanks for the thought, but didnt work. Tried adding $("#radio-view-a1").trigger("create"); before as well as after without luck – Mark Burgoyne Nov 09 '12 at 08:43

2 Answers2

9

the following combination works:

$("input[type='radio']").checkboxradio();
$("input[type='radio']").checkboxradio("refresh");

see working example here

This link helped me to find it out

Taifun
  • 6,165
  • 17
  • 60
  • 188
0

use 

$('#radio-view-b1').live('click',function(){ //your code });

instead of

$('#radio-view-a1').click(function(){ //your code });
Rahul Lamkhade
  • 19
  • 1
  • Thanks for the help, but when I substitute .live('click',function() for what was previously .click(function(), while I no longer get any errors, it also no longer picks up the click event. Any other thoughts? – Mark Burgoyne Nov 08 '12 at 10:47
  • I further tried `$('#radio-view-a1').on('click', function ()` , but then I get the error again... – Mark Burgoyne Nov 08 '12 at 10:57