CODEWITHSUNDEEP
jqueryjquery-mobile
Mark Burgoyne
Mark Burgoyne

Reputation: 1594

How to set radio buttons in non visible div pages with JQuery Mobile?

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

Upvotes: 2

Views: 2450

Answers (2)

Taifun
Taifun

Reputation: 6293

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

Upvotes: 9

Rahul Lamkhade
Rahul Lamkhade

Reputation: 19

use 

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

instead of

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

Upvotes: 0

Related Questions