JavaScript - Problema al cargar datos a un combobox

 
Vista:

Problema al cargar datos a un combobox

Publicado por mtoledo (1 intervención) el 30/05/2012 14:46:28
Hola,

Tengo algunos problemas cuando cargo datos en un combobox. Tengo una aplicación html5, donde todos mis objetos son objetos jquery mobile.

En este caso, tengo un combobox que se llena con los datos que obtengo de mi base de datos, a través de un servicio REST que me devuelve los datos en formato json.

Para cargar mis datos en el combobox, lo hago en una función javascript, utilizando $.getJSON, y en la función que recibe los datos, armo un string con el código html del combobox, y coloco en el div este string mediante document.getElementById('div1').innerHTML = html

Con ello, el combo se carga, pero pierde todas las propiedades de jquery mobile. es decir, obtengo este combo http://sidmaster.net/sid_servicios/json/cbo1.JPG, en lugar de este
http://sidmaster.net/sid_servicios/json/cbo2.JPG

Saben a que se debe esto?

mi función en javascript es la siguiente
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function cargarCboUsuarios() {
				var cmb = "selectmenu1";
			$.getJSON("http://midominio.net/servicios/json/listaUsuarios.php?jsoncallback=?", function(data) {
				$("#selectmenu1").html('');
				var ni = document.getElementById('selectUser');
				var newdiv = document.createElement('div');
				var divIdName = 'selectmenu1';
				newdiv.setAttribute('id',divIdName);
				var html = '<label for="selectmenu1">Usuario:</label><select data-native-menu="false" name="selectmenu1" id="selectmenu1" data-theme="b"><option value="option1">Seleccione</option>';
				$.each(data, function(i, item) {
					html = html + '<option value="'+item.login+'">'+item.login+'</option>';
				});
				html = html + '</select>';
				document.getElementById('selectUser').innerHTML = html;
				ni.appendChild(newdiv);
			});
			}



y mi codigo html es el siguiente:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<body on onLoad="cargarCboUsuarios()">
 
        <div data-role="page" data-theme="b" id="page1">
            <div data-theme="b" data-role="header">
                <h3>
                    Cor Processu Mobile
                </h3>
            </div>
            <div data-role="content">
                <div style=" text-align:center">
                    <img style="width: 410px; height: 100px" src="http://assets.codiqa.com/ps/14440/91e66af46c684ea8MOBILE.JPG" />
                </div>
                <div class="ui-grid-a">
                    <div class="ui-block-a">
                    </div>
                    <div class="ui-block-b">
                    </div>
                </div>
                <div data-role="fieldcontain" id="selectUser">
 
                </div>
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-mini="true">
                        <label for="textinput2">
                            Clave:
                        </label>
                        <input id="textinput2" placeholder="" value="" type="password" />
                    </fieldset>
                </div>
                <a data-role="button" data-transition="fade" href="" class="login">
                    Login
                </a>
            </div>
            <div data-theme="b" data-role="footer" data-position="fixed">
                <div data-role="navbar" data-iconpos="top">
                    <ul>
                        <li>
                            <a href="#page1" data-theme="" data-icon="">
                                home
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
 </body>


Tienen alguna idea de cómo puedo solucionarlo?

Gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder