Cómo anular ajax = false para que cambie a la página dom cargada si existe

Tengo algunos htmls de elementos, cada uno de los cuales contiene una sola página JQM. También tengo una página de índice. Es un html multi-JQM-paged, con cada página JQM como una categoría que enumera los elementos.Cómo anular ajax = false para que cambie a la página dom cargada si existe

index.html     item1.html   item2.html 
    +------------------+  +--------+--------+ +-------- 
    |+-------+   |  +--|Cat. | Next|->|Cat. 
    ||.cont- |   |  | +--------+--------+ |-------- 
    ||ent |+-------+|<----+ |     | | 
    |+-------+|#cat1 ||  |     | | 
    |   |  ||  |bla bla bla  | |bla bla 
    |   |link1+---------->|     | | 
    |   |link2 ||  |     | | 
    |   +-------+|  +-----------------+ +-------- 
    |+-------++-------+| 
    ||#cat2 ||#cat3 || 
    ||  ||  || 
    ||link4 ||link3 || 
    ||  ||  || 
    |+-------++-------+| 
    +------------------+

Actualmente puedo vincular desde el índice al elemento, con una carga suave de ajax. Sin embargo, me di cuenta de que si quiero vincular el elemento al índice # cat1, necesito usar data-ajax='false' ya que el índice es un html de varias páginas. (No puedo usar data-rel='back' porque la página anterior no siempre es index.html).

Si uso ajax='false', pierdo la transición suave si cambio a menudo entre la lista y los elementos (cada cambio a la lista es una recarga completa). por ejemplo:

-load- Full> N.º cat1 -ajax-load-> elemento2 -Full-carga (de nuevo) -> N.º cat1

Pregunta

Quiero:

-Full-load-> N.º cat1 -ajax-load-> elemento2 -ajax-switch-to-Ya-loaded-> N.º cat1

¿Cómo puedo anular la lógica jQuery Mobile para que cuando se hace clic en el enlace data-ajax='false', se busca primero para ver si esa página de índice # cat1 ya está en el dom? Si es así, simplemente cambie a esa página JQM. Si no existe, realice una carga completa del índice # cat1 sin ajax (como el comportamiento predeterminado).

Tenga en cuenta que un usuario puede comenzar desde item1.html y navegar hasta index.html # cat1.

Sé que necesitaría marcar cada página JQM con algunos atributos personalizados, como data-full-url="index.html#cat1" para facilitar la búsqueda de páginas existentes. Sin embargo, mi principal debilidad es cómo puedo cambiar la lógica de enlace existente de Jquery Mobile.

Fuente

2012-06-27 lulalala

+1 para el dibujo bastante :) –

no puede hacerlo sin http://www.asciiflow.com/ – lulalala

¿Por qué no separar cada pseudo-página en diferentes documentos HTML? ¿Qué estás ganando al crear esta compleja lógica? Si se trata de tiempo de carga percibido, entonces sugiero usar documentos separados y usar el atributo 'data-prefetch' para evitar un retraso de navegación no deseado. – Jasper

He creado su situación en siguientes violines.

página 1) Índice: http://jsfiddle.net/nachiket/RpZW7/
página 2) Artículo detalle: http://jsfiddle.net/nachiket/cHmhW/ (éste ya está vinculada en la página de índice violín)

No he utilizado data =-ajax 'falso', ¿Resuelve ¿tu problema? De lo contrario, actualice estos violines según su situación exacta, por lo que puede ayudarlo mejor.

Fuente

2012-06-27 05:40:05 Nachiket

gracias. Entonces, mi problema es que si mi usuario comienza desde la página del elemento, quiero permitir que vuelva a vincularse al índice # cat1. Mi versión actual está en http://jsfiddle.net/lulalala/nuL6h/2/ – lulalala

, no creo que sea fácil lograr la transición sin Ajax. Lo que hago es mantener solo una aplicación de página, navegar a través de ajax y mantener el historial/actualizar usando cambios de hash. entonces, si es más fácil, cargue item1 y item2 usando solo Ajax. aún puede solicitar el servidor para cargar el contenido del elemento1 y el elemento2, pero proporcionará solo la parte del cuerpo, en lugar de la página HTML completa. – Nachiket

se carga el primer índice de tiempo, obviamente no será una carga de AJAX. Un caso sería: item1 --full-load-> index # cat1 --ajax-load-> item2 --js-switch-> index # cat1 – lulalala

jsfiddle parece estar abajo, ¿está cerca de su ejemplo?

que poner esto en un servidor local

Para el botón atrás del elemento1 se puede poner la url completa: http://localhost/home.html#cat1, también funcionará

home.html:

<!doctype html> 
<html manifest=""> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
<link type="text/css"> 

</link> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
</head> 

<body> 

<div data-role="page" id="home"> 
    <div data-theme="b" data-role="header" data-position="fixed"> 
     <h3>home</h3> 
    </div> 
    <div data-role="content"> 
     hello home 
     <a href="home.html#cat1" type="button">cat1</a> 
     <a href="home.html#cat2" type="button">cat2</a> 
    </div> 
</div> 

<div data-role="page" id="cat1"> 
    <div data-theme="b" data-role="header" data-position="fixed"> 
     <h3>cat1</h3> 
    </div> 
    <div data-role="content"> 
     hello cat1 
     <a href="#home" type="button">home</a> 
     <a href="item1.html" type="button">see item1</a> 
    </div> 
</div> 

<div data-role="page" id="cat2"> 
    <div data-theme="b" data-role="header" data-position="fixed"> 
     <h3>"cat2</h3> 
    </div> 
    <div data-role="content"> 
     hello cat2 
     <a href="#home" type="button">home</a> 
    </div> 
</div> 

    </body> 
</html>

elemento1.html

<!doctype html> 
<html manifest=""> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
<link type="text/css"> 

</link> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
</head> 

<body> 

<div data-role="page" id="item1Home"> 
    <div data-theme="b" data-role="header" data-position="fixed"> 
     <h3>item1's home</h3> 
    </div> 
    <div data-role="content"> 
     hello item1 
     <a href="home.html#cat1" type="button" rel="external">back?</a> 
    </div> 
</div> 


    </body> 
</html>

Fuente

2012-06-29 11:16:27

sí, esta es mi solución actual, pero lo que quiero es evitar recargar toda la home.html si ha sido cargada previamente – lulalala

el navegador usará su caché, más fácilmente si mantiene la navegación ajax –

incluso con la caché es notablemente lenta, ya que mi página de índice es bastante grande . Y tratar de tener navegación ajax es el problema que quiero resolver, no es algo que trate de evitar. – lulalala

Cómo anular ajax = false para que cambie a la página dom cargada si existe

Respuesta

Cuestiones relacionadas