JQ Touch y AJAX

Soy un poco nuevo en esto, así que me disculpo si soy un poco vago, pero haré lo mejor que pueda.

Estoy intentando crear una versión compatible con iPhone de un sitio usando JQtouch. Entiendo que normalmente esto se haría todo en un archivo HTML con páginas separadas por DIV. Sin embargo, deseo cargar el contenido de las páginas existentes de un sitio web.

La siguiente parte del problema es que mi página iphone.html no se encuentra en el mismo directorio que mi sitio web actual, por lo que el comportamiento normal de JQtouch no parece funcionar.

Hasta ahora he configurado una página de la siguiente manera:

<div id="home">
<div class="toolbar">

<h1>Title</h1></div>

<ul class="rounded">

<li class="arrow"> <a href="#content">HOME</a></li>

<li class="arrow"> <a href="#about">ABOUT US</a></li>

<li class="arrow"> <a href="#gnwr">GNWR</a></li>

<li class="arrow"> <a  href="#gner">GNER</a></li>

<li class="arrow"> <a href="#journal">NEWS</a></li>

<li class="arrow"> <a href="#FAQS">FAQS</a></li>                    

<li class="arrow"> <a href="#contact">CONTACT</a></li>


</ul>
</div>

<div id="content"></div>            
<div id="about"></div>
<div id="journal"></div>
<div id="faqs"></div>
<div id="contact"></div>


</body>
</html>

Entonces tengo:

<script>
$(document).ready(function(){ 
$('#content').load('http://www.mysite.co.uk' + ' #content');
$('#about').load('http://www.mysite.co.uk/about' + ' #content'); 
                  }
</script>

Esto carga el contenido que busco y las animaciones de la página funcionan bien. El único problema es que existen un par de enlaces en el contenido que estoy cargando y cuando se hace clic en ellos, obviamente no funcionan.

¿Hay alguna manera de que pueda verificar el href de un enlace cuando se hace clic en él y si apunta a www.mysite.co.uk/about cambiarlo para que apunte a #about y forzarlo a navegar allí?

Espero que esto tenga sentido si necesita más información, hágamelo saber.

saludos

Chris.

preguntado el 10 de mayo de 11 a las 13:05

1 Respuestas

Está haciendo bastantes preguntas dentro de una sola pregunta ... Realmente debería dividirlas en varias preguntas. Es más fácil para la gente responder. De todos modos, lo intentaré.

En primer lugar, no es necesario que todos los contenidos estén en un solo html; puede cargar contenidos a través de AJAX. Consulte AJAX> "Ejemplo GET" en esta demo, Así como la contenido de página cargado a través de AJAX.

Hasta donde yo sé, las páginas que desea cargar no tienen que estar en la misma estructura de directorio. Las páginas que desea cargar a través de AJAX deben contener una página jQTouch válida, es decir, toda la página está encerrada en un <div>.

¿Hay alguna manera de que pueda verificar el href de un enlace cuando se hace clic en él y si apunta a www.mysite.co.uk/about cambiarlo para que apunte a #about y forzarlo a navegar allí?

Si le entiendo correctamente, esencialmente desea reemplazar todos los enlaces a www.mysite.co.uk/about con #about. Esto debe hacerse con jQuery:

$('a[href="http://www.mysite.co.uk/about"]').attr('href', '#about');

Es posible que desee hacer eso cuando se cargue cada página:

$(document).ready(function(e){
    $('body>div').bind('pageAnimationEnd', function(event, info){
        $('a[href="http://www.mysite.co.uk/about"]').attr('href', '#about');
    })
});

contestado el 11 de mayo de 11 a las 19:05

Gracias por el comentario. Creo que tiene razón sobre el uso de AJAX según el ejemplo de Get, sin embargo, parece que no puedo hacer que funcione con mi sitio web, en cualquier caso, solo quiero cargar información específica de cada sitio web, por lo que parece sensato hacerlo de la manera que estoy . Gracias por el código para enmendar los enlaces. Esto es exactamente lo que estaba buscando, funcionó de maravilla. - Chris

@Chris, ¡de nada! Si cree que mi respuesta es útil, ¿podría darle un voto a favor? - William Niu

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.