Menu
I am trying change a select value with javascript in a phonegap/JQM application. I followed the recommendation to call .selectmenu('refresh') after I changed its value; It get this error:
Uncaught cannot call methods on selectmenu prior to initialization; attempted to call method 'refresh'
If I remove that call the .val() on the select will change, but the graphic on the screen will not change. The .selectmenu("refresh") is intended to synchronize the graphic with the .val() of the select.
Here are two of the resources I am attempting to make use of: http://jquerymobile.com/demos/1.0a3/#docs/forms/plugin-eventsmethods.html http://jquerymobile.com/test/docs/forms/forms-selects.html
I am new phonegap and JQM.
Here is sample code that attempts to flips the select every three seconds:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Demo Error</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
for (i=1;i<10;i++) {
setTimeout('changeProduct()',i*3000);
}
}
function changeProduct()
{
if ($("#product").val() == 'S')
{
$("#product").val('M');
}
else
{
$("#product").val('S');
}
console.log("calling selectmenu refesh change to " + $("#product").val());
$("#product").selectmenu('refresh', true);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
// do your thing!
}
</script>
<link rel="stylesheet" href="jquery.mobile-1.0a3.css" />
<link rel="stylesheet" href="quote.css" />
<script src="jquery-1.5.min.js"></script>
<script src="jquery.mobile-1.0a3.js"></script>
</head>
<body onload="onBodyLoad()">
<div id="page1" data-role="page">
<div data-role="content">
<div id="product-all" data-role="fieldcontain">
<label for="product">Product:</label>
<select data-role="slider" name="product" id="product" value="S">
<option id="one" value="S">Single</option>
<option id="two" value="M" selected="selected">Multi</option>
</select>
</div>
</div>
</div>
</body>
</html>
872
I figured it out:
When you want to change a value of a data-role=slider using javascript, after you change the value, call : $('#mysliderid').slider('refresh');
When you want to change a value of a data-role=select using javascript, after you change the value, call : $("#myselectid").selectmenu('refresh', true);
This can be confusing because internally they both use select so one might be misled into thinking that selectmenu would work for both.
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
