CODEWITHSUNDEEP
jqueryjquery-mobile
mcktimo
mcktimo

Reputation: 1460

Jquery-mobile radio is checked but not displayed

Javascript decides which button is checked when the page loads. The code successfully detects this but the 'checked' button doesn't display.

I have added .checkboxradio("refresh") to the radio group and to the individual radiobutton to no avail. A demo is here: http://jsfiddle.net/mckennatim/a9jx9/

.button("refresh") causes an error.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tax</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <link href="css/tax.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>  
</head>
<body>
<div id="page2" data-role="page"  data-add-back-btn="true">
    <div data-role="content">
        <div id="proCG">
            <fieldset data-role="controlgroup" data-mini="true">
                <legend>Tax Capital Gains </legend>
                <input type="radio" name="choProCG" id="radProCG1" value="1" />
                <label for="radProCG1">as ordinary income</label>
                <input type="radio" name="choProCG" id="radProCG2" value="0" />
                <label for="radProCG2">at a separate rate</label>
            </fieldset>
        </div>
        <div id="txthere"></div>
    </div>
</div>      
</body>
</html> 

<script>
$('#page2').live('pageinit', function(event) {    
    console.log('here');
    $("#radProCG2").prop("checked", true).checkboxradio("refresh");
    $('input[name=choProCG]').checkboxradio("refresh");
    $('#txthere').append('duck');
    $('#txthere').append($('input[name=choProCG]:checked').val());
    $('input[name=choProCG]').change( function(e){
        $('#txthere').append(this.value);
        $('#txthere').append('frog');

    }); 
});
</script>

Upvotes: 1

Views: 2660

Answers (2)

Rab
Rab

Reputation: 35582

Try this http://jsfiddle.net/CGpGD/2/

OR

the Code Below

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tax</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <link href="css/tax.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>  
</head>
<body>
<div id="page2" data-role="page"  data-add-back-btn="true">
    <div data-role="content">
        <div id="proCG">
            <fieldset data-role="controlgroup" data-mini="true">
                <legend>Tax Capital Gains </legend>
                <input type="radio" name="choProCG" id="radProCG1" value="1" />
                <label for="radProCG1">as ordinary income</label>
                <input type="radio" name="choProCG" id="radProCG2" value="0" />
                <label for="radProCG2">at a separate rate</label>
            </fieldset>
        </div>
        <div id="txthere"></div>
    </div>
</div>      
</body>
</html> 

<script>

$('#page2').live('pageinit', function(event) {  

    console.log('here');
    $("#radProCG2").attr("checked", true).checkboxradio("refresh");
    $('input[name=choProCG]').checkboxradio("refresh");
    $('#txthere').append('duck');
    $('#txthere').append($('input[name=choProCG]:checked').val());
    $('input[name=choProCG]').change( function(e){
        $('#txthere').append(this.value);
        $('#txthere').append('frog');

    }); 
});
</script>​

Upvotes: 1

Owais Iqbal
Owais Iqbal

Reputation: 549

try this code in html..

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Choose a pet:</legend>
            <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
            <label for="radio-choice-1">Cat</label>

            <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
            <label for="radio-choice-2">Dog</label>

            <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
            <label for="radio-choice-3">Hamster</label>

            <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
            <label for="radio-choice-4">Lizard</label>
    </fieldset>
</div>

Upvotes: 0

Related Questions