Foros del Web » Programando para Internet » Javascript » Frameworks JS »

no funcionan los enlaces ni estilos jquery mobile

Estas en el tema de no funcionan los enlaces ni estilos jquery mobile en el foro de Frameworks JS en Foros del Web. Hola, al crear varias paginas dinamicamente con php, resulta que no funcionan los enlaces ni tampoco los estilos, alguien sabe a que es debido esto? ...
  #1 (permalink)  
Antiguo 27/02/2013, 12:18
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 9 años, 6 meses
Puntos: 10
no funcionan los enlaces ni estilos jquery mobile

Hola, al crear varias paginas dinamicamente con php, resulta que no funcionan los enlaces ni tampoco los estilos, alguien sabe a que es debido esto?

Saludos.
  #2 (permalink)  
Antiguo 27/02/2013, 12:33
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 11 años, 10 meses
Puntos: 36
Respuesta: no funcionan los enlaces ni estilos jquery mobile

Tienes problemas en la sintaxis de php al crear tu elemento html, pega el codigo de php usando el highlight para ver que se te esta escapando.
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #3 (permalink)  
Antiguo 27/02/2013, 12:48
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 9 años, 6 meses
Puntos: 10
Respuesta: no funcionan los enlaces ni estilos jquery mobile

mire el html devuelto y si que me las crea las paginas correctamente, pero los estilos ni los enlaces funcionan.

Reedyseth, lo que quiero creadas con jquery mobile.
  #4 (permalink)  
Antiguo 27/02/2013, 12:55
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 11 años, 10 meses
Puntos: 36
Respuesta: no funcionan los enlaces ni estilos jquery mobile

puedes pegar tu codigo ?
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #5 (permalink)  
Antiguo 27/02/2013, 13:20
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 9 años, 6 meses
Puntos: 10
Respuesta: no funcionan los enlaces ni estilos jquery mobile

Tengo en un array llamado page, que para cada elemento quiero crear una pagina jquery mobile, usando el plugin paginador jquery mobile.

Código PHP:
Ver original
  1. <?php
  2.    
  3.    
  4.     for($i=0;$i<count($page);$i++){
  5.         ?>
  6.         <div data-role='page' id='page<?php echo $i+1;?>'>
  7.             <div data-role='header'>
  8.                 <h1>page<?php echo $i+1;?></h1>
  9.             </div>
  10.             <div data-role='content'>  
  11.             <?php
  12.             echo $page[$i];
  13.             ?>
  14.                 <ul data-role='pagination'>
  15.                    <li class='ui-pagination-next'><a href='#page<?php echo $i+2;?>'>Siguiente</a></li>
  16.                 </ul>
  17.             </div>
  18.         </div>
  19.         <?php
  20.     }
  21.   ?>
  #6 (permalink)  
Antiguo 27/02/2013, 16:45
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 9 años, 6 meses
Puntos: 10
Respuesta: no funcionan los enlaces ni estilos jquery mobile

No se que pasa pero resulta que el paginador funciona en algunos dispositivos y en cambio si creo el codigo directamente en html sin generarlo con php si que funciona en todos los dispositvos, a que se puede deber ese problema.
Un saludo.
  #7 (permalink)  
Antiguo 27/02/2013, 16:46
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 11 años, 10 meses
Puntos: 36
Respuesta: no funcionan los enlaces ni estilos jquery mobile

Por los estilos, ya viste que realmente se cargue el css, inspecciona tu codigo fuente y verifica que se haya cargado.

Tambien inspecciona el codigo que te genera ese bloque de php para segurarte que se creo correctamente, si lo inspeccionas con chrome solo vez el html generador, pero si lo inspeccionas con firebug en FF te aparece con rojo si generaste mal el html, revisalo y nos cuentas.
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #8 (permalink)  
Antiguo 27/02/2013, 17:10
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 9 años, 6 meses
Puntos: 10
Respuesta: no funcionan los enlaces ni estilos jquery mobile

Mañana lo mirare con calma y os comentare, pero entiendo que el codigo esta bien formado, te cuento cuando llamo a la pagina que contiene el php que crea las paginas jquery mobile no funciona pero una vez en la pagina la recargo y si que funciona, debe haber alguna forma para refrescar el documento o por lo menos las librerias js.
Saludos
  #9 (permalink)  
Antiguo 28/02/2013, 06:15
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 9 años, 6 meses
Puntos: 10
Respuesta: no funcionan los enlaces ni estilos jquery mobile

Hola Reedyseth, estube revisando el codigo html generado por php en firebug y es correcto, esta bien contruido y tiene toda el html bien contruido.

El problema debe venir de otro sitio porque como comente en el post anterior al recargar la pagina funciona correctamente, mencionar que lo que no funciona es el plugin que utilizo (pagination) exactamente este pagination.

aunque haciendo pruebas en un emulador no me funciona y en cambio si no lo genero con php el html osea que lo pongo estatico si que funciona, supongo que habla que recargar dicho plugin, alguien sabe como hacerlo o cual es mi problema.

Saludos
  #10 (permalink)  
Antiguo 28/02/2013, 09:48
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 11 años, 10 meses
Puntos: 36
Respuesta: no funcionan los enlaces ni estilos jquery mobile

podrias pegar todo tu codigo por aqui para analizarlo por favor, desde el primer <html> hasta el ultimo </html>

Recuerda pegarlo con el highlight

Incluyendo PHP
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #11 (permalink)  
Antiguo 28/02/2013, 13:34
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 9 años, 6 meses
Puntos: 10
Respuesta: no funcionan los enlaces ni estilos jquery mobile

Hola Reedyseth, en principio agradecerte el intentar ayudarme, aqui esta el codigo aunque es lo que postee arriba es un codigo algo sencillo.


Código HTML:
Ver original
  1. <!--index.html-->
  2. <!DOCTYPE html>
  3.  
  4.     <meta charset='utf-8'/>
  5.     <meta name="viewport" content="width=device-width"/>    
  6.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  7.     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  8.     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  9. </head>
  10.  
  11. <div data-role='page'>
  12.     <div data-role='content'>
  13.       <a href="detalles.php" data-role='button' >ver detalles</a>
  14.     </div>
  15. </div>
  16. </body>
  17. </html>

Código PHP:
Ver original
  1. <!-- detalles.php-->
  2. <!DOCTYPE html>
  3.  
  4. <html>
  5. <head>
  6.     <meta charset='utf-8'/>
  7.     <meta name="viewport" content="width=device-width"/>    
  8.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  9.     <link rel="stylesheet" href="jquery.mobile.pagination.css"/>
  10.     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  11.     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  12.     <script src="jquery.mobile.pagination.js"></script>
  13. </head>
  14.  
  15. <body>
  16. <?php
  17. //$page es un array que recupero de una base de datos con la informacion que debo mostrar
  18.     for($i=0;$i<count($page);$i++){
  19.         ?>
  20.         <div data-role='page' id='page<?php echo $i+1;?>'>
  21.             <div data-role='header'>
  22.                 <h1>page<?php echo $i+1;?></h1>
  23.             </div>
  24.             <div data-role='content'>  
  25.             <?php
  26.             echo $page[$i];
  27.             ?>
  28.                 <ul data-role='pagination'>
  29.                    <li class='ui-pagination-next'><a href='#page<?php echo $i+2;?>'>Siguiente</a></li>
  30.                 </ul>
  31.             </div>
  32.         </div>
  33.         <?php
  34.     }
  35. ?>
  36. </body>
  37. </html>

Espero que me puedan ayudar, saludos.
  #12 (permalink)  
Antiguo 28/02/2013, 15:08
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 11 años, 10 meses
Puntos: 36
Respuesta: no funcionan los enlaces ni estilos jquery mobile

Mira ya revise tu codigo y todo esta bien aparentemente, si puedo moverme entre links, solo lo unico que tengo duda es en tu arreglo $page, es un arreglo normal o un asociativo? que es la informacion que deberia de traer cada indice ??
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #13 (permalink)  
Antiguo 28/02/2013, 15:20
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 9 años, 6 meses
Puntos: 10
Respuesta: no funcionan los enlaces ni estilos jquery mobile

provastes el codigo?aparentemente yo tambien lo veo bien pero el codigo se genera con php perfectamete pero no funciona el paginador, ahora pregunto yo, que mas dara como sea el array, si los datos los muestra correctamente, as utilizado el plugin paginador del link que postee?
as creado paginas jquery mobile de forma dinamica con algun lenguaje del lado del servidor?
Puedes ayudarme de verdad, yo estoy cansado de googlear sin llegar a una solucion, no se si el problema es que no se deben crear paginas jquery mobile con php, y se deben hacer jquery por ejemplo.
  #14 (permalink)  
Antiguo 28/02/2013, 15:55
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 11 años, 10 meses
Puntos: 36
Respuesta: no funcionan los enlaces ni estilos jquery mobile

Cita:
provastes el codigo?
Ya lo probe y me funciona.

Cita:
as utilizado el plugin paginador del link que postee?
El link que pusiste esta roto el correcto es este: http://filamentgroup.com/lab/jquery_...nation_plugin/

Ese plugin no tiene la gran cienca esta bastante facil de implementar.

Cita:
as creado paginas jquery mobile de forma dinamica con algun lenguaje del lado del servidor?
Claro que las he hecho, llevo anos programando web, las comunicaciones las hago con ajax, o implemento ajax mobile de jQuery para hacer mis cargas.

Cita:
Puedes ayudarme de verdad, yo estoy cansado de googlear sin llegar a una solucion,
De acuerdo a la informacion que me brindas te voy ayudando, recuerda que aqui no te resolvemos la vida, vemos la forma en que te podemos ayudar utilizando nuestro tiempo para cual es tu error y que has hecho para poder intentar solucionarlo.

Tus scripts estan agregados en este orden ? No verdad !!!!

Código Javascript:
Ver original
  1. <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
  2. <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
  3. <script src="../jquery.mobile.pagination.js"></script>

Por lo que vi en tu codigo primero agregas el API de jQuery mobile, como quieres que funcione si ni siquiera estan creados los objetos de jQuery que son los utiliza jQuery Mobile ????
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #15 (permalink)  
Antiguo 28/02/2013, 16:33
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 9 años, 6 meses
Puntos: 10
Respuesta: no funcionan los enlaces ni estilos jquery mobile

Cita:
Iniciado por Reedyseth Ver Mensaje
De acuerdo a la informacion que me brindas te voy ayudando, recuerda que aqui no te resolvemos la vida, vemos la forma en que te podemos ayudar utilizando nuestro tiempo para cual es tu error y que has hecho para poder intentar solucionarlo.

Tus scripts estan agregados en este orden ? No verdad !!!!

Código Javascript:
Ver original
  1. <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
  2. <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
  3. <script src="../jquery.mobile.pagination.js"></script>

Por lo que vi en tu codigo primero agregas el API de jQuery mobile, como quieres que funcione si ni siquiera estan creados los objetos de jQuery que son los utiliza jQuery Mobile ????
Por supuesto que no me vas a salvar la vida pero la verdad que muchos programadores te ayudan y te solucionan problemas que uno mismo no puede resolver y se agradece que los mas tecnicos te ayuden a resolver las dudas, por eso estoy aqui si no, no estaria.

Y referente a la carga de librerias, mirate bien el post que postee el codigo porque esta correcto .
No se si te distes cuenta que son CDN que copie y pege de la misma pagina.

Asin pretendes ayudarme?

Envista del exito solo me queda una solucion, leerme el manual del creador de jquery mobile.
  #16 (permalink)  
Antiguo 28/02/2013, 23:57
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 11 años, 10 meses
Puntos: 36
Respuesta: no funcionan los enlaces ni estilos jquery mobile

Ok pithon ya te tengo la solucion, el problema no era de php si no de jQuery mobile, mira lo que pasa es que lo que hace jQuery mobile es que cada link que haces en vez de haga su secuencia normal, osea llevarte al otro sitio, lo que en realidad de hace es que te carga por ajax el elemento que quieres visualizar sin cargar bien los elementos que usan el plugin para que trabajes con el, hay algunos metodos que probe para evitar que lo hiciera por ajax si no que hiciera completa la redireccion y el unico metodo que encontre que me funciono fue agregarle el atributo

Cita:
data-ajax="false"
en el mismo lugar donde creas tu boton, quedandote el link de esta manera:

Código HTML:
Ver original
  1. <a href="detalles.php" data-role='button' data-ajax="false" >ver detalles</a>

Con eso evitas que jQuery Mobile te lo cargue por ajax y te lleve en realidad al sitio, ya lo probe y esta funcionando, te paso unos links a mi sitio para que veas como funciona, y tambien aqui te pego el sitio que utilize para trabajar

http://behstant.com/downloads/forums/sliderMobil.html

lo que tiene sliderMobil.html
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3.     <meta charset='utf-8'/>
  4.     <meta name="viewport" content="width=device-width"/>    
  5.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  6.     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  7.     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  8. </head>
  9.  
  10. <div data-role='page'>
  11.     <div data-role='content'>
  12.       <a href="detalles.php" data-role='button' data-ajax="false" >ver detalles</a>
  13.     </div>
  14. </div>
  15. </body>
  16. </html>
Lo que tiene detalles.php
Código PHP:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5.     <meta charset='utf-8'/>
  6.     <meta name="viewport" content="width=device-width"/>
  7.     <link rel="stylesheet" href="css/jquery.mobile.pagination.css"/>    
  8.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />    
  9.     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  10.     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  11.     <script src="js/jquery.mobile.pagination.js"></script>
  12. </head>
  13.  
  14. <body>
  15. <?php
  16. $page = array("1.jpg","2.jpg","3.jpg");
  17. //$page es un array que recupero de una base de datos con la informacion que debo mostrar
  18.     for($i=0;$i<count($page);$i++){
  19.         ?>
  20.         <div data-role='page' id='page<?php echo $i+1;?>'>
  21.             <div data-role='header'>
  22.                 <h1>page<?php echo $i+1;?></h1>
  23.             </div>
  24.             <div data-role='content'>  
  25.             <?php
  26.             echo '<img src="img/'.$page[$i].'" />';
  27.             ?>
  28.                 <ul data-role='pagination'>
  29.                    <li class='ui-pagination-next'><a href='detalles.php#page<?php echo $i+2;?>'>Siguiente</a></li>
  30.                 </ul>
  31.             </div>
  32.         </div>
  33.         <?php
  34.     }
  35. ?>
  36. </body>
  37. </html>

De aqui pudes bajar el codigo fuente: http://behstant.com/downloads/forums/files/code_001.rar
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #17 (permalink)  
Antiguo 01/03/2013, 11:14
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 9 años, 6 meses
Puntos: 10
Respuesta: no funcionan los enlaces ni estilos jquery mobile

Hola Reedyseth, veo que has podido solucionar mi problema, gracias.

De todas formas probe tu codigo desde un dispositivo movil y no funciona los enlaces, solo la pantalla tactil, en cambio probe el original y funciona todo, sabes porque puede estar pasando eso.

Saludos
  #18 (permalink)  
Antiguo 01/03/2013, 12:13
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 11 años, 10 meses
Puntos: 36
Respuesta: no funcionan los enlaces ni estilos jquery mobile

Mira a veces es latoso batallar con el touch, puedes usar el touch de jQuery Mobile pero la verdad no lo he probado, en cambio uso un plugin para que detecte el touch que se llama jQuery UI Touch Punch, lo use en una aplicacion que la ibana usar en una tablet y funciono:

jQuery UI Touch Punch: http://touchpunch.furf.com/

Saludos.
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #19 (permalink)  
Antiguo 01/03/2013, 13:16
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 9 años, 6 meses
Puntos: 10
Respuesta: no funcionan los enlaces ni estilos jquery mobile

Reedyseth, vale gracias por la informacion, ya que estamos conoces algun plugin tipo galeria de imagenes para jquery mobile que sea facil de implemntar.
Saludos.
  #20 (permalink)  
Antiguo 03/03/2013, 15:54
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 11 años, 10 meses
Puntos: 36
Respuesta: no funcionan los enlaces ni estilos jquery mobile

Checate estos:

http://tympanus.net/codrops/2010/05/...llery-web-app/

http://neteye.github.com/touch-gallery.html

http://www.photoswipe.com/

Y estos que tiene costo pero yo creo con lo tres anteriores tienes para rato:
http://www.digicrafts.com.hk/compone...bilePhotoAlbum

http://www.tn3gallery.com/
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.

Etiquetas: enlaces, estilos, funcion, funcionan, jquery, mobile, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:31.