JQuery Mobile: actualizar seleccionar usando javascript

Estoy intentando cambiar un valor de selección con javascript en una aplicación phonegap/JQM. Seguí la recomendación de llamar a .selectmenu ('actualizar') después de haber cambiado su valor; Obtiene este error:JQuery Mobile: actualizar seleccionar usando javascript

Uncaught no puede llamar a los métodos en el menú de selección antes de la inicialización; intentó llamar al método 'actualizar'

Si elimino esa llamada, el .val() en la selección cambiará, pero el gráfico en la pantalla no cambiará. El .selectmenu ("actualizar") está destinado a sincronizar el gráfico con .val() de la selección.

Éstos son dos de los recursos que estoy tratando de hacer uso de: http://jquerymobile.com/demos/1.0a3/#docs/forms/plugin-eventsmethods.html http://jquerymobile.com/test/docs/forms/forms-selects.html

Soy nuevo PhoneGap y JQM.

Aquí es código de ejemplo que intenta voltea los seleccionados cada tres segundos:

<!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>

Fuente

2011-03-20 Michael Potter

acabo de descubrir que mi código se trabajo si cambio de 'data-role = slider' a 'data-role = select'. Entonces, ahora mi pregunta es, ¿cómo cambio/actualizo el control deslizante? –

relacionado: http://stackoverflow.com/questions/5249250/jqm-jquerymobile-dynamically-added-elements-not-displaying-correctly-and-css-is –

lo he descubierto:

Cuando se desea cambiar un valor de un data-role = deslizador usando javascript Después de cambiar el valor, llame a: $ ('# mysliderid'). slider ('refresh');

Cuando desee cambiar el valor de un data-role = select usando javascript, después de cambiar el valor, invoque: $ ("# myselectid"). Selectmenu ('refresh', true);

Esto puede ser confuso porque internamente ambos usan select por lo que uno puede ser engañado al pensar que selectmenu funcionaría para ambos.

Fuente

2011-03-20 14:36:48

Es bueno saberlo, gracias por su contribución. +1 – naugtur

Muchas gracias, es ridículo que esto haya sido tan difícil. – Andrew

gracias, estaba teniendo el mismo problema. Sin embargo, sí lo veo en los documentos: http://jquerymobile.com/demos/1.1.1/docs/forms/slider/methods.html – carillonator

Para mí, en JQM 1.4, la única manera de deshacerse de: "No se puede llamar a métodos en Seleccione Menú antes de la inicialización; trató de llamar al método 'actualización'" fue la creación de un padre envoltura alrededor de mi toggler con datos-role = "fieldcontain" a continuación, llamar a .trigger de ese elemento ("crear") justo antes de llamar .slider de mi basculador ("refresh")

En otras palabras, he cambiado de esta :

<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>

a esto:

<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>

También tenga en cuenta, cuando se trabaja con JQM1.4 API de un toggler se accede con .slider(), no .selectmenu()

Fuente

2014-02-20 16:35:33 user3333698

JQuery Mobile: actualizar seleccionar usando javascript

Respuesta

Cuestiones relacionadas