JQuery Mobile: update select using javascript

9
votes

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>
2
cordovajquery-mobile
I just discovered that my code will work if I change from 'data-role=slider' to 'data-role=select'. So now my question is, how do I change/refresh the a slider? – Be Kind To New Users
related: stackoverflow.com/questions/5249250/… – Phill Pafford

2 Answers

23
votes

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.

0
votes

For me, on JQM 1.4, the only way to get rid of: "Cannot call methods on selectmenu prior to initialization; attempted to call method 'refresh' " was to create a wrapper parent around my toggler with data-role="fieldcontain" then, call that element's .trigger("create") just before calling my toggler's .slider("refresh")

In other words, I changed from this:

<select id='policy_toggler' data-role='slider'>
  <option value="false">No</option>
  <option value="true">Yes</option>
</select>

<script>
$("#policy_toggler").selectmenu("refresh");  //rises prior-to-initialization error, nothing happens visually.
</script>

to this:

<div class="prefparam" data-role="fieldcontain">
  <select id='policy_toggler' data-role='slider'>
    <option value="false">No</option>
    <option value="true">Sí</option>
  </select>
</div>

<script>
$(".prefparam").trigger("create");
$("#policy_toggler").slider("refresh");  //visual sync between real input element and visual ui element
</script>

Also note, when working with JQM1.4 a toggler's API is accessed with .slider(), not .selectmenu()