no funcionan los enlaces ni estilos jquery mobile

pithon · #1 (**permalink**) 27/02/2013, 12:18

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.

Reedyseth · #2 (**permalink**) 27/02/2013, 12:33

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.

pithon · #3 (**permalink**) 27/02/2013, 12:48

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.

Reedyseth · #4 (**permalink**) 27/02/2013, 12:55

puedes pegar tu codigo ?

pithon · #5 (**permalink**) 27/02/2013, 13:20

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<?php
    
    
    for($i=0;$i<count($page);$i++){
        ?>
        <div data-role='page' id='page<?php echo $i+1;?>'>
            <div data-role='header'>
                <h1>page<?php echo $i+1;?></h1>
            </div>
            <div data-role='content'>  
            <?php
            echo $page[$i];
            ?>
                <ul data-role='pagination'>
                   <li class='ui-pagination-next'><a href='#page<?php echo $i+2;?>'>Siguiente</a></li>
                </ul>
            </div>
        </div>
        <?php
    }
  ?>

pithon · #6 (**permalink**) 27/02/2013, 16:45

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.

Reedyseth · #7 (**permalink**) 27/02/2013, 16:46

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.

pithon · #8 (**permalink**) 27/02/2013, 17:10

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

pithon · #9 (**permalink**) 28/02/2013, 06:15

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

Reedyseth · #10 (**permalink**) 28/02/2013, 09:48

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

pithon · #11 (**permalink**) 28/02/2013, 13:34

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<!--index.html-->
<!DOCTYPE html>
 
<html>
<head>
    <meta charset='utf-8'/>
    <meta name="viewport" content="width=device-width"/>    
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
 
<body>
<div data-role='page'>
    <div data-role='content'>
      <a href="detalles.php" data-role='button' >ver detalles</a>
    </div>
</div>
</body>
</html>

Código PHP:

Ver original<!-- detalles.php-->
<!DOCTYPE html>
 
<html>
<head>
    <meta charset='utf-8'/>
    <meta name="viewport" content="width=device-width"/>    
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" href="jquery.mobile.pagination.css"/>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script src="jquery.mobile.pagination.js"></script>
</head>
 
<body>
<?php
//$page es un array que recupero de una base de datos con la informacion que debo mostrar
    for($i=0;$i<count($page);$i++){
        ?>
        <div data-role='page' id='page<?php echo $i+1;?>'>
            <div data-role='header'>
                <h1>page<?php echo $i+1;?></h1>
            </div>
            <div data-role='content'>  
            <?php
            echo $page[$i];
            ?>
                <ul data-role='pagination'>
                   <li class='ui-pagination-next'><a href='#page<?php echo $i+2;?>'>Siguiente</a></li>
                </ul>
            </div>
        </div>
        <?php
    }
?>
</body>
</html>

Espero que me puedan ayudar, saludos.

Reedyseth · #12 (**permalink**) 28/02/2013, 15:08

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

pithon · #13 (**permalink**) 28/02/2013, 15:20

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.

Reedyseth · #14 (**permalink**) 28/02/2013, 15:55

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<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<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 ????

pithon · #15 (**permalink**) 28/02/2013, 16:33

Cita:

Iniciado por Reedyseth

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<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<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.

Reedyseth · #16 (**permalink**) 28/02/2013, 23:57

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<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<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta charset='utf-8'/>
    <meta name="viewport" content="width=device-width"/>    
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
 
<body>
<div data-role='page'>
    <div data-role='content'>
      <a href="detalles.php" data-role='button' data-ajax="false" >ver detalles</a>
    </div>
</div>
</body>
</html>

Lo que tiene detalles.php

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta charset='utf-8'/>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="css/jquery.mobile.pagination.css"/>    
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />    
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script src="js/jquery.mobile.pagination.js"></script>
</head>
 
<body>
<?php
$page = array("1.jpg","2.jpg","3.jpg");
//$page es un array que recupero de una base de datos con la informacion que debo mostrar
    for($i=0;$i<count($page);$i++){
        ?>
        <div data-role='page' id='page<?php echo $i+1;?>'>
            <div data-role='header'>
                <h1>page<?php echo $i+1;?></h1>
            </div>
            <div data-role='content'>  
            <?php
            echo '<img src="img/'.$page[$i].'" />';
            ?>
                <ul data-role='pagination'>
                   <li class='ui-pagination-next'><a href='detalles.php#page<?php echo $i+2;?>'>Siguiente</a></li>
                </ul>
            </div>
        </div>
        <?php
    }
?>
</body>
</html>

De aqui pudes bajar el codigo fuente: http://behstant.com/downloads/forums/files/code_001.rar

pithon · #17 (**permalink**) 01/03/2013, 11:14

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

Reedyseth · #18 (**permalink**) 01/03/2013, 12:13

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.

pithon · #19 (**permalink**) 01/03/2013, 13:16

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.

Reedyseth · #20 (**permalink**) 03/03/2013, 15:54

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/