Since I'm using a multipage template for my app, data that I have previously inputted into forms and selects appears when I navigate back to the same page. I'm looking for a way to wipe the page back to default when a user comes back to it. On the pages, there are forms, selects, checkboxes and img tags.
This has been suggested to me:
just add custom attribute (like data-default="true") to your default element (for example 0)
but I'd like further clarification if possible. Thanks
Working example: http://jsfiddle.net/vds2U/66/
Usage:
Take a look at provided code, every element used has a custom attribute called data-default-value, it is used to determine which element is a default one.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<input type="button" id="clr-form-btn" value="Clear form"/>
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value=""/>
<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider" data-default-value="off">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1"/>
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" checked="checked" data-default-value=""/>
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
<label for="select-choice-0" class="select">Shipping method:</label>
<select name="select-choice-0" id="select-choice-0" data-default-value="standard">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second" data-theme="a" >
<div data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Javascript:
$(document).on('pagebeforeshow', '#index', function(){
cleanForm();
});
function cleanForm() {
var page = $.mobile.activePage;
// Reset input elements
page.find('.ui-content *').filter("[type='text']").each(function(){
$(this).val('');
});
// Reset drop down elements
page.find('.ui-content *').filter(".ui-select").each(function(){
var select = $(this).find('select');
var defaultValue = select.attr('data-default-value');
select.val(defaultValue);
select.selectmenu('refresh', true);
});
// Reset flip switch elements
page.find('.ui-content *').filter('[data-role="slider"]').each(function(){
var flipSwitch = $(this);
var defaultValue = flipSwitch.attr('data-default-value');
flipSwitch.val(defaultValue);
flipSwitch.slider('refresh');
});
// Reset radio elements
page.find('.ui-content *').filter('fieldset:has([type="radio"])').each(function(){
var radio = $(this);
var checkedRadio = radio.find(':checked').prop("checked",false).checkboxradio("refresh");
var defaultRadio = radio.find('[data-default-value]').prop("checked",true).checkboxradio("refresh");
});
}
Related
I have the following HTML:
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://gregpike.net/demos/bootstrap-file-input/bootstrap.file-input.js"></script>
<meta charset="utf-8">
</head>
<body>
<form id="id-method1Form" class="form-horizontal" method="post" > <input type='hidden' name='csrfmiddlewaretoken' value='vr5MftcSxGGUeIOwKioeUlalXJdXNgkl' /> <div id="div_id_clustering_method_param" class="form-group"> <label for="id_clustering_method_param" class="control-label col-lg-2">
Clustering method
</label> <div class="controls col-lg-8"> <select class="select form-control" id="id_clustering_method_param" name="clustering_method_param">
<option value="complete">Complete linkage</option>
<option value="average">Average linkage</option>
<option value="ward" selected="selected">Ward</option>
</select> </div> </div> <div id="div_id_distance_method_param" class="form-group"> <label for="id_distance_method_param" class="control-label col-lg-2">
Distance measure
</label> <div class="controls col-lg-8"> <select class="select form-control" id="id_distance_method_param" name="distance_method_param">
<option value="euclidean" selected="selected">Euclidean</option>
<option value="manhattan">Manhattan</option>
<option value="pearsond">Pearson Correlation</option>
</select> </div> </div> <div class="form-group"> <div class="aab controls col-lg-2"></div> <div class="controls col-lg-8"> <input type="submit"
name="submit"
value="Submit"
class="btn btn-primary"
id="submit-id-submit"
/> </div> </div> </form>
<!--- END FORM DISPLAY-->
</body>
<html>
What I want to do is to set the condition. Namely the clustering method ward can only be applied with distance measure euclidean. If the user pass all other distance measure to ward it should return error message.
How can I do it using JavaScript?
To disable some of the menu options based on which option is selected, you can hook into the "on change" event for the first select element. Every time the first select element is changed, a bit of JavaScript then determines which options should be available in the second menu.
The following code uses an if-else block to show the general idea of how you can enable/disable the option elements in the second box. To make this solution more elegant, I would use a JavaScript object to keep track of which options in the second menu should be available when a certain option is selected in the first select element. Then whenever the first element is changed you can do a lookup and set the options in the second menu to be enabled or disabled as needed.
Live Demo:
var method = $("#id_clustering_method_param");
var dist = $("#id_distance_method_param");
function refreshOptions() {
// The following can be refactored to use a
// lookup instead if more option rules are needed.
if (method.find(':selected').text() === "Ward") {
dist.find("option[value='manhattan']").attr("disabled", true);
dist.find("option[value='pearsond']").prop("disabled", true);
} else {
dist.find("option").prop("disabled", false)
};
}
refreshOptions();
method.on("change", refreshOptions);
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<form id="id-method1Form" class="form-horizontal" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='vr5MftcSxGGUeIOwKioeUlalXJdXNgkl' />
<div id="div_id_clustering_method_param" class="form-group">
<label for="id_clustering_method_param" class="control-label col-lg-2">
Clustering method
</label>
<div class="controls col-lg-8">
<select class="select form-control" id="id_clustering_method_param" name="clustering_method_param">
<option value="complete">Complete linkage</option>
<option value="average">Average linkage</option>
<option value="ward" selected="selected">Ward</option>
</select>
</div>
</div>
<div id="div_id_distance_method_param" class="form-group">
<label for="id_distance_method_param" class="control-label col-lg-2">
Distance measure
</label>
<div class="controls col-lg-8">
<select class="select form-control" id="id_distance_method_param" name="distance_method_param">
<option value="euclidean" selected="selected">Euclidean</option>
<option value="manhattan">Manhattan</option>
<option value="pearsond">Pearson Correlation</option>
</select>
</div>
</div>
<div class="form-group">
<div class="aab controls col-lg-2"></div>
<div class="controls col-lg-8">
<input type="submit" name="submit" value="Submit" class="btn btn-primary" id="submit-id-submit" />
</div>
</div>
</form>
<!--- END FORM DISPLAY-->
</body>
<html>
I am need to get the id before and after html element of dropdown list on change. Please see blow source code.
When Fund name selected I need to get the previous selected checkbox id or name ( Cash / Epf ) & after selected checkbox id or name ( No.of Units Reedem / Amount Reedem / All units).
Thanks in advance.
$(document).ready(function () {
$('.units').change(function () {
alert($(this).attr('id'));
alert($(this).before().parent().parent().html());
});
});
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<div class="setup-content" id="form-3">
<div id="repurchase">
<div class="lblHead">REPURCHASE REQUEST</div>
<div class="form-group">
1.<input type="checkbox" name="Fm3CheckBoxList1[]" id="fm3chk11" value="CashPlan" class="singlecheckbox plan" /><label for="fm3chk11">Cash Plan</label>
<input type="checkbox" name="Fm3CheckBoxList1[]" id="fm3chk12" value="EPFPlan" class="singlecheckbox plan" /><label for="fm3chk12">EPF Plan</label>
</div>
<div class="form-group">
<div class="col-lg-6">
<label>Fund Name</label>
<select id="fundId" class="form-control drplst units" AppendDataBoundItems="true">
<option Value=""></option>
<option Value="123">123</option>
<option Value="369">369</option>
</select>
</div>
<div class="col-lg-6">
<div class="clearfix"></div>
<input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk21" value="No_OfUnitToRedeem" class="singlecheckbox" /><label for="fm3chk21">No. of Unit to Redeem</label>
<input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk22" value="Amount_ToRedeem" class="singlecheckbox" /><label for="fm3chk22">Amount to Redeem</label>
<input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk23" value="All_Units" class="singlecheckbox" /><label for="fm3chk23">All Units</label>
<asp:TextBox ID="Fm3TextBox2" runat="server" class="form-control" placeholder="AMOUNT"></asp:TextBox>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
Try this :
$(document).ready(function () {
$('.units').change(function () {
alert($(this).closest('.form-group').prev().find('.singlecheckbox:checked').attr('id'));
alert($(this).parent().next().find('.singlecheckbox:checked').attr('id'));
});
});
This is working for single checked box, if more than one checkbox was chekced, you need to iterate that and doing something with that.
Assuming your plans are mutually exclusive, you would want radio buttons to represent them, unless that F3m... indicates some JS framework that would turn appropriately decorated checkboxes into mutually exclusive selections. Maybe you don't want them to be mutually exclusive. If that's the case I'll update my answer. Either way, you can use another attribute on the group of checkboxes to aggregate them all, such as name. See my changes to the code snippet (below) for using name to find the selected plan. You could assign all checkboxes in a particular group a name, class, or modify their IDs to include some base to use in a selector. You could put them inside a container element (div) for easier reference, and then bind your inputs' events...
var lastPlanSelection = "none";
$('input[name=targetSet]').on('click', function() { lastPlanSelection = $(this).val(); });
Modifying your snippet to find the selected radio button...same principle could be applied to checkboxes using class attribute.
$(document).ready(function () {
$('.units').change(function () {
var selectedPlan = $('input[name=plan]:checked');
alert("Selected Plan: " +
(selectedPlan.length === 1 ? selectedPlan.val() : "none"));
});
});
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<div class="setup-content" id="form-3">
<div id="repurchase">
<div class="lblHead">REPURCHASE REQUEST</div>
<div class="form-group">
1.<input type="radio" id="cashPlan" name="plan" value="Cash"><label for="cashPlan">Cash Plan</label><br/>
<input type="radio" id="epfPlan" name="plan" value="EPFPlan"><label for="epfPlan">EPF Plan</label>
</div>
<div class="form-group">
<div class="col-lg-6">
<label>Fund Name</label>
<select id="fundId" class="form-control drplst units" AppendDataBoundItems="true">
<option Value=""></option>
<option Value="123">123</option>
<option Value="369">369</option>
</select>
</div>
<div class="col-lg-6">
<div class="clearfix"></div>
<input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk21" value="No_OfUnitToRedeem" class="singlecheckbox" /><label for="fm3chk21">No. of Unit to Redeem</label>
<input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk22" value="Amount_ToRedeem" class="singlecheckbox" /><label for="fm3chk22">Amount to Redeem</label>
<input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk23" value="All_Units" class="singlecheckbox" /><label for="fm3chk23">All Units</label>
<asp:TextBox ID="Fm3TextBox2" runat="server" class="form-control" placeholder="AMOUNT"></asp:TextBox>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
I am building a data aqusition system using PhoneGap. .I am trying to store my form data temporary on local storage using JSON,Data should be visible after I close and reopen the application (after pressing Get Data button),But after I close it only the lastly entered record is visible
This is my code
<!DOCTYPE html>
<html>
<head>
<title>Household Profile DB storage</title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no,
initial-scale=1, maximum-scale=1,
minimum-scale=1,width=device-width" />
<link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="css/table.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" charset="utf-8">
function onDeviceReady() {
persistData(homeId,owner,gramaND,contactNo,address,race);
}
function saveLocal(form){
if (window.localStorage) {
var fhomeId = form.homeId.value,
fowner = form.owner.value,
fgramaND = form.gramaND.value,
fcontactNo= form.contactNo.value,
faddress = form.address.value,
frace = form.race.value;
alert("hi");
var highscores = [{"homeId": fhomeId,
"owner":fowner,
"gramaND":fgramaND,
"contactNo":fcontactNo,
"address":faddress,
"race":frace}];
localStorage.setItem("highscores",JSON.stringify(highscores));
alert("The data has been stored successfully.");
} else {
alert("Your Browser does not support LocalStorage.");
}
}
function readLocal(){
if (window.localStorage) {
var scores =[];
//Get the highscores object
scores = localStorage.getItem("highscores");
scores = JSON.parse(scores);
for (i=0;i<scores.length;i++){
var text = "homeId :"+scores[i].homeId +"<br>"+
"owner:"+ scores[i].owner+"<br>"+
"address"+scores[i].address +"<br>"+
"gramaND"+scores[i].gramaND +"<br>"+
"contactNo"+scores[i].contactNo+"<br>" +
'<Button value="DELETE" onclick="'+scores.splice(i, 0)+'><>/Button>';
var tbodyx = document.getElementsByTagName("tbody");
var tr=document.createElement("TR");
var td=document.createElement("TD");
td.innerHTML = text;
tr.appendChild(td);
tbody.appendChild(tr);
}
}
}
</script>
</head>
<body>
<div data-role="page" id="page1">
<!--/header-->
<div data-role="header" data-position="inline" data-theme="b">
Back
<h1>Household Profile</h1>
Menu
</div>
<!--/header-->
<div id="wrapper">
<form id="userInput" action ="" method="GET">
<div data-role="content">
<div data-role="fieldcontain">
<label > Home ID </label>
<input class="inputClass" id="homeId" placeholder="H0001" value="" data-mini="true" type="text">
</div>
<div data-role="fieldcontain">
<label > Owner </label>
<input class="inputClass" id="owner" placeholder="Aberathne" value="" type="text">
</div>
<div data-role="fieldcontain">
<label class="select">GramaNiladhari Division</label>
<select class="inputClass" id="gramaND">
<option value="GramaNiladhari Division 1">GramaNiladhari Division 1</option>
<option value="GramaNiladhari Division 2">GramaNiladhari Division 2</option>
<option value="GramaNiladhari Division 3">GramaNiladhari Division 3</option>
<option value="GramaNiladhari Division 4">GramaNiladhari Division 4</option>
</select>
</div>
<div data-role="fieldcontain">
<label > Contact No </label>
<input class="inputClass" id="contactNo" placeholder="071-9545-073" value="" type="number">
</div>
<div data-role="fieldcontain">
<label >Address:</label>
<textarea cols="40" rows="8" class="inputClass" id="address"></textarea>
</div>
<div class="ui-block-a"><button type="submit" data-theme="d">Location in a Map</button></div>
<div data-role="fieldcontain">
<label >Race</label>
<select class="inputClass" id="race">
<option value=" Sinhalese"> Sinhalese</option>
<option value=" Sri Lanka Tamils"> Sri Lanka Tamils</option>
<option value=" Moors"> Moors</option>
<option value=" Indian Tamils "> Indian Tamils </option>
<option value=" Malays "> Malays </option>
<option value=" Burghers "> Burghers </option>
</select>
</div>
<input class="buttonClass" type="button" value="Insert Data" onclick="saveLocal(this.form);">
</div>
</form>
</div>
<input class="buttonClass" type="button" value="get Data" onclick="readLocal();">
<!-- <p id="dhomeId"></p>
<p id="downer"></p>
<p id="dgramaND"></p>
<p id="dcontactNo"></p>
<p id="daddress"></p>
<p id="drace"></p>-->
<table border="1">
<tbody id="tbody">
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
</tbody>
</table>
</div>
</body>
</html>
Also I need to expand my code to edit and delete record from local storage.
Of course it should only show the last entered JSON. You're not appending the scores rather you're replacing it. When you are executing the command
localStorage.setItem("highscores",JSON.stringify(highscores));
you just replaced previous highscores value on the localStorage. I can't see any append mechanism in your code. What you need to do is retrieve the previous JSON data, add the new highscores with previous data and then save it again.
I am very new to javascript, and I am trying to build a mobile app with Jquery Mobile. I would like the user to input one value on each page and then on the last page they will click submit and it will display the value on the last page. I have been working on this for like 4 hours and I can get the calculation to work on the same page as the submit button but not on the next page.
<script>
function sum()
{
var item1num = document.getElementById('item1num').value;
var item2num = document.getElementById('item2num').value;
{result = parseInt(item1num)*parseInt(item2num);
document.getElementById("showResult").innerHTML = (result);}}
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="fieldcontain" id="item1">
<fieldset data-role="controlgroup">
<label for="item1">
item1
</label>
<input name="item1num" id="item1num" placeholder="" value="" type="number" />
</fieldset>
</div>
<a data-role="button" data-transition="slidefade" href="#page2" data-theme="b">
Next
</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="fieldcontain" id="item1">
<fieldset data-role="controlgroup">
<label for="item2">
item2
</label>
<input name="item2num" id="item2num" placeholder="" value="" type="number" />
</fieldset>
</div>
<input id="btnAdd" type="submit" value="Submit" onclick="sum();" data-theme="b" />
<span id="showResult"></span>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<span id="showResult"></span>
</div>
</div>
Please try below code.It's displaying the result in the final page.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
function sum()
{
var item1num = document.getElementById('item1num').value;
var item2num = document.getElementById('item2num').value;
{result = parseInt(item1num)*parseInt(item2num);
document.getElementById("showResult").innerHTML = "Result is: "+(result);}
}
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="fieldcontain" id="item1">
<fieldset data-role="controlgroup">
<label for="item1">
item1
</label>
<input name="item1num" id="item1num" placeholder="" value="" type="number" />
</fieldset>
</div>
<a data-role="button" data-transition="slidefade" href="#page2" data-theme="b">
Next
</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="fieldcontain" id="item1">
<fieldset data-role="controlgroup">
<label for="item2">
item2
</label>
<input name="item2num" id="item2num" placeholder="" value="" type="number" />
</fieldset>
</div>
B
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<span id="showResult"></span>
</div>
</div>
</body>
</html>
You need to pass the value to the pages submitting a form
// page1
<form action="page2" method="post">
<input type="text" name="value1"/>
<input type="text" name="value2"/>
<input type="submit" />
</form>
so in the other page you can get both and work with
// page2
<input type="hidden" name="value1" value="value from page 1"/>
<input type="hidden" name="value2" value="other value from page 1"/>
to get this with jQuery you can do
var val1 = jQuery('input[name=value1]');
var val2 = jQuery('input[name=value2]');
I have checked radio button using Jquery buts its not updated in UI .
Anyone has any idea .below is my snippets...
<!DOCTYPE html>
<html>
<head>
<title>Radio Button</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
function getValue() {
alert("Value is :"+$('input[name=animal]:checked').val());
}
function setValue(toBeSetID) {
$("input[name=animal][id=radio-choice-2]").prop("checked", true);
$("label[for='rock']").addClass("ui-radio-on");
alert("Value is :"+$('input[name=animal]:checked').val());
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Radio Button</h1>
</div><!-- /header -->
<div data-role="content">
<input type="radio" name="animal" id="cat" value="Cat" />
<label for="cat">Cat</label>
<input type="radio" name="animal" id="radio-choice-2" value="choice-2"/>
<label for="radio-choice-2">Dog</label>
<input type="radio" name="animal" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="animal" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
<input type="button" value="Get Radio Button Value" onclick="getValue();">
<input type="button" value="Set Radio Button Value" onclick="setValue();">
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Its Checked by programm as alert box says But not updated in UI.
As Chase says in his answer to your other question, you have to refresh the jQuery Mobile widget when you change the checked property of the underlying form element. This can be done by writing:
$("input[name=animal][id=radio-choice-2]")
.prop("checked", true).checkboxradio("refresh");
That way, you do not have to manipulate the classes yourself, the mobile widget does all the work.
Note in passing that your selector targets an element that has an id attribute, so it can be simplified:
$("#radio-choice-2").prop("checked", true).checkboxradio("refresh");