Las páginas web suelen incluir código javascript y css, bien embebido en el propio código html o en archivos externos. Cada página puede tener sus propios scripts javascript y estilos css o compartirlos con otras páginas html, pero en cada una de ellas hay que incluir el link a los archivos externos o el propio código. Este es el modo de funcionamiento de una página html normal, pero cuando se usa jQueryMobile las cosas cambian y funcionan de otra forma diferente.

En jQuery Mobile la primera página se carga normalmente, el contendido de los tag <head> y <body> se carga en el DOM y permanecerá así salvo que se recargue la página. Pero cuando se navega a las sucesivas páginas mediante enlaces, sólo el contenido del <body>será cargado en el DOM, reemplazando al contenido de la página anterior, exactamente sólo se cargaran  los <div> que contenta el data-role=”page” y el resto del contendido será descartado, incluso el código javascript o css que pudiese estar incluido en el tag <head> o en el propio<body>. La única forma que existe de cargar los archivos o códigos del resto de páginas jQueryMobile,  usando páginas html convencionales, es recargándolas desde el navegador, con esto se fuerza a regenerar el DOM y se incluirá todo su contenido.

Existen varias soluciones para este problema:

  1. Colocar todo el código javascript y css en la primera página html, asp o php. Esto tiene la desventaja que la carga será lenta. Además, si en algún momento se produce un refresco de una página, ya sea debido al navegado o al usuario, que no sea la que contiene el código javascript o css, se generará un nuevo DOM y la aplicación perderá toda su funcionalidad y estilo hasta que no se vuelva a ella desde la página que contiene el código javascript o css.
  2. Otra solución es colocar el código en el <body> dentro de un <div> que contenga el data-role=”page”. Como vimos antes, este es el único contenido que se carga en el DOM
    <body>
        <div data-role="page">
            <script>
                // Your javascript will go here
            </script>
            // And rest of your HTML content
        <div>
    </body>
    .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

    Esto es una solución rápida, pero poco elegante.

  3. Usar rel=”external” en cualquier elemento que se use para cambiar de página, esto fuerza el refresco de la página y por tanto se carga en el DOM todo el contenido de la página y siendo su funcionamiento como el de una página web normal.
    <a href="#siguiente" class="ui-btn-right" rel="external">Siguiente</a>
    .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }
  4. Otra solución es deshabilitar ajax en las peticiones de jQueryMobile, hay que deshabilitarlo antes de cargar el archivo de jQueryMoblie:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script> type="text/javascript">
            $(document).bind("mobileinit", function () {
                    $.mobile.ajaxEnabled = false;
            });
    </script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
    .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

Estas dos últimas  opciones hacen que no se use ajax para cargar el contenido y la página se comportará como una página sin jQueryMobile. Esta no es una buena solución ya que al no usar ajax, se pierde mucha de la funcionalidad que aporta jQueryMobile.