I am calling a page (see code below) from a list of links on another page using. A list like this
<ul data-role="listview" data-theme="g">
<li><a href="test.html">test</a></li>
</ul>
with the code below being the test.html page.
I am using jquery mobile on these pages. Only the checkboxes after the first 3 checkboxes seem to get refreshed properly (appear as checked) when the page is loaded by clicking on the link. The first three checkboxes always appear to be unselected and their checked value is set to false. What is unusual is that if I place an if statement right after the statement that is setting the checkbox to true the checkbox checked value evaluates to true, but appears to be false on the rendered page and you look at the checked value in the elements area of the web inspector. When you refresh the page (using F5 or the refresh button near the address bar) the checkboxes refresh as you would expect. Any help would be greatly appreciated. While the sample code below appears to just be setting all the checkboxes to a checked value I am really (in my real page) setting their value based on data from a recordset so I cannot just do a mass setting to true and refresh. I have to loop through the recordset and set the checkbox values accordingly. The code below is just a simple reproduction of the error I am having. Thank you!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Checkbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="jqm1/jquery.mobile.structure-1.0.1.min.css" />
<script src="jqm/jquery-1.7.1.min.js"></script>
<script src="jqm/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div id="loadCB" data-role="page">
<script type="text/javascript">
$("#loadCB").live('pageinit', function() {
// do something here...
for (i=0;i<=5;i++)
{
$("#checkbox-"+i).prop("checked", true);
$("#checkbox-"+i).prop("checked", true).checkboxradio("refresh");
}
});
</script>
<article data-role="content">
<form id="frmR">
<input type="checkbox" name="checkbox-0" id="checkbox-0" class="custom" value="0"/>
<label for="checkbox-0">checkbox-0</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" value="1"/>
<label for="checkbox-1">checkbox-1</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" value="2"/>
<label for="checkbox-2">checkbox-2</label>
<input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" value="3"/>
<label for="checkbox-3">checkbox-3</label>
<input type="checkbox" name="checkbox-4" id="checkbox-4" class="custom" value="4"/>
<label for="checkbox-4">checkbox-4</label>
<input type="checkbox" name="checkbox-5" id="checkbox-5" class="custom" value="5"/>
<label for="checkbox-5">checkbox-5</label>
<input type="submit" value="Set Rules" />
</form>
</article>
</body>
</div>
</html>
I am calling a page (see code below) from a list of links on another page using. A list like this
<ul data-role="listview" data-theme="g">
<li><a href="test.html">test</a></li>
</ul>
with the code below being the test.html page.
I am using jquery mobile on these pages. Only the checkboxes after the first 3 checkboxes seem to get refreshed properly (appear as checked) when the page is loaded by clicking on the link. The first three checkboxes always appear to be unselected and their checked value is set to false. What is unusual is that if I place an if statement right after the statement that is setting the checkbox to true the checkbox checked value evaluates to true, but appears to be false on the rendered page and you look at the checked value in the elements area of the web inspector. When you refresh the page (using F5 or the refresh button near the address bar) the checkboxes refresh as you would expect. Any help would be greatly appreciated. While the sample code below appears to just be setting all the checkboxes to a checked value I am really (in my real page) setting their value based on data from a recordset so I cannot just do a mass setting to true and refresh. I have to loop through the recordset and set the checkbox values accordingly. The code below is just a simple reproduction of the error I am having. Thank you!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Checkbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="jqm1/jquery.mobile.structure-1.0.1.min.css" />
<script src="jqm/jquery-1.7.1.min.js"></script>
<script src="jqm/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div id="loadCB" data-role="page">
<script type="text/javascript">
$("#loadCB").live('pageinit', function() {
// do something here...
for (i=0;i<=5;i++)
{
$("#checkbox-"+i).prop("checked", true);
$("#checkbox-"+i).prop("checked", true).checkboxradio("refresh");
}
});
</script>
<article data-role="content">
<form id="frmR">
<input type="checkbox" name="checkbox-0" id="checkbox-0" class="custom" value="0"/>
<label for="checkbox-0">checkbox-0</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" value="1"/>
<label for="checkbox-1">checkbox-1</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" value="2"/>
<label for="checkbox-2">checkbox-2</label>
<input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" value="3"/>
<label for="checkbox-3">checkbox-3</label>
<input type="checkbox" name="checkbox-4" id="checkbox-4" class="custom" value="4"/>
<label for="checkbox-4">checkbox-4</label>
<input type="checkbox" name="checkbox-5" id="checkbox-5" class="custom" value="5"/>
<label for="checkbox-5">checkbox-5</label>
<input type="submit" value="Set Rules" />
</form>
</article>
</body>
</div>
</html>
2 Answers
Reset to default 6Check this code
$("#loadCB").live('pageinit', function() {
// do something here...
$("input[type='checkbox']").attr("checked",false).checkboxradio("refresh");
});
I wrote a fairly prehensive list of widgets and the method by which you refresh them: http://andymatthews/read/2011/12/14/Refreshing-jQuery-Mobile-listviews,-buttons,-select-dropdowns,-and-input-fields
Perhaps that will answer your question?