JQ Touch and AJAX

I am a little new to this so apologies if I am a little vaugue but I will do my best.

I am attempting to create an iphone friendly version of a site using JQtouch. I understand that normally this would be done all in one HTML file with pages seperated by DIV's. However, I am wanting to load the content from exisitng pages of a website.

The next part to the problem is that my iphone.html page does not sit in the same directory as my current website, so the normal behaviour of JQtouch doesnt seem to work.

So far I have set up a page as follows:

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

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

<ul class="rounded">

<li class="arrow"> <a href="#content"&开发者_JS百科gt;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>

I then have :

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

This loads the content I am after and the page animations work fine. The only problem is that a couple of links exist in the content I am loading and when clicked they obviously dont work.

Is there a way I can check the href of a link when clicked and if it points to www.mysite.co.uk/about change it to point to #about and force it to navigate there?

Hope this makes sense if you need more info let me know.

Regards

Chris.

You are asking quite a few questions inside a single question... You should really break them up into several questions. It's easier for people to answer. Anyways, I'll give it a shot.

First of all, you don't have to have all contents in one html; you can load contents via AJAX. See the AJAX > "GET Example" in this demo, as well as the page content loaded via AJAX.

As far as I know, the pages you want to load do not have to be in the same directory structure. The pages you want to load via AJAX need to contain a valid jQTouch page, i.e. the whole page is enclosed in a <div>.

Is there a way I can check the href of a link when clicked and if it points to www.mysite.co.uk/about change it to point to #about and force it to navigate there?

If I understand you correctly, you essentially want to replace all the links to www.mysite.co.uk/about with #about. This has to be done with jQuery:

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

You may want to do that when each page loads:

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