JQuery - Problem al cargar pagina la primera vez

   
Vista:

Problem al cargar pagina la primera vez

Publicado por joaquin (5 intervenciones) el 26/10/2015 17:22:24
Hola Amigos,

Vengo a presentar mi primer problema en el foro, agradecer antes que nada a cualquier persona que se moleste en ayudarme.

Lo que intento hacer es añadir <li> a un <ul> mediante jquery. El problema es que la página si me coge la maquetación CSS pero la lista no. Y en cuanto escribo ( hay cambio en el document ) se maqueta tambien la lista.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function init(){
 
        $.getJSON('http://localhost/puntualia/divs/divCategorias.php', function(data){
          console.log(JSON.stringify(data));
 
            var datos;
            var li;
 
            for (var i = 0; i < data.length; i++) {
 
              $('#ulCategorias').append("<li><a href='#page2'>"+ data[i].nombreCategoria + "</a></li>");
 
            }
        });
 
}

La función init() la llamo en onload del body. He probado a llamarla al final en un script y pasa lo mismo.

Así se ve la primera vez que cargo la página:

dcKjWD

Y así como debería verse, y como se ve al escribir en el search

ipTNR7

muchas 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
Imágen de perfil de xve

Problem al cargar pagina la primera vez

Publicado por xve (557 intervenciones) el 26/10/2015 21:42:56
Hola Joaquin, por lo que comentas, entiendo que el problema es de estilos, no¿ el javascript funciona correctamente, verdad? si no, no se visualizaría la lista, no?

Como defines los estilos? nos los puedes mostrar?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Problem al cargar pagina la primera vez

Publicado por jog16889 (5 intervenciones) el 26/10/2015 23:23:42
Tenías toda la razón, me puse a mirar y el problema es porque al añadir los nuevos <li> no les estaba asignando ninguna clase T_T

Añado la linea por si a alguien le ocurriese lo mismo, ojala les pueda servir.

1
$('#ulCategorias').append('<li class="ui-first-child"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r">'+ data[i].nombreCategoria + '</a></li>');
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problem al cargar pagina la primera vez

Publicado por joaquin (5 intervenciones) el 26/10/2015 23:58:24
Aprovechando el tema, una vez tengo creada esta lista, intento aplicar un evento click de la lista, pero no me funciona.

Intente con el ul, ul->li, li y el a

La lista es tal que así

1
2
3
4
5
6
<ul data-role="listview" data-filter="true" data-input="#myFilter"  data-inset="true" id="ulCategorias">
 
<li class="ui-first-child"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r">Elemento1</a></li>
<li class="ui-first-child"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r">Elemento2</a></li>
<li class="ui-first-child"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r">Elemento3</a></li>
</ul>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Problem al cargar pagina la primera vez

Publicado por xve (557 intervenciones) el 27/10/2015 08:16:33
Como generas el evento?? viendo el código HTML únicamente no te se decir...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Problem al cargar pagina la primera vez

Publicado por joaquin (5 intervenciones) el 27/10/2015 09:35:23
En este caso utlizo doument->ready

1
2
3
4
5
6
7
8
$(document).ready(function(){
 
    $('li').click(function(){
          console.log('test');
 
    });
 
  });

He hecho prueba y si creo la lista manualmente me funciona correctamente al clickar los diferentes li, pero en mi caso genero los li mediante este codigo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function init(){
 
        $.getJSON('http://localhost/puntualia/divs/divCategorias.php', function(data){
          console.log(JSON.stringify(data));
 
            var datos;
            var li;
 
            for (var i = 0; i < data.length; i++) {
 
              $('#ulCategorias').append('<li class="ui-first-child"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r">'+ data[i].nombreCategoria + '</a></li>');
 
            }
        });
 
}

y en el body hago esta llamada

1
<body onload="$(document).ready(init());">
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Problem al cargar pagina la primera vez

Publicado por xve (557 intervenciones) el 27/10/2015 10:20:49
Hola Joaquin, cada vez que generas un evento desde jquery o javascript, ese evento solo funciona con el DOM actual de la pagina, si modificas el contenido, tienes que eliminar dicho evento, y volver a crearlo... algo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function init(){
	$.getJSON('http://localhost/puntualia/divs/divCategorias.php', function(data){
		console.log(JSON.stringify(data));
		var datos;
		var li;
		for (var i = 0; i < data.length; i++) {
			$('#ulCategorias').append('<li class="ui-first-child"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r">'+ data[i].nombreCategoria + '</a></li>');
		}
 
		$("li").unbind("click").click(function(){
			console.log('test');
		});
	});
}

con unbind() eliminamos el evento, y posteriormente lo volvemos a generar una vez se ha añadido los nuevos <li>.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Problem al cargar pagina la primera vez

Publicado por joaquin (5 intervenciones) el 27/10/2015 10:39:18
Perfecto ! Me funciono perfectamente, genial estaba estancado con esto. Muchas gracias y perdón se que son cosas básicas seguramente pero ando escaso de conocimientos jQuery.

Una vez más gracias por tu tiempo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar