AJAX/JQuery loading whole page instead of div
===

I'm starting to learn mobile app dev and i've already hit a snag. I have the following files:

    1. android.html
    2. index.html
    3. android.js

android.html acts as the loading page and pulls the index.html links into it on page load. when a link is clicked its only meant to load the remote page's data from the #content div into android.html's #container div. but this doesn't appear to work for me.

Here's the code:

**android.html:**

    <!DOCTYPE html>
    <html>
        <head>
            <title>Jonathan Stark</title>
            <meta name="viewport" content="user-scalable=no, width=device-width" />
            <link rel="apple-touch-icon-precomposed" href="myCustomIcon.png" />
            <link rel="stylesheet" href="css/android.css" type="text/css" media="screen" />
            <script src="cordova-1.6.1.js" type="text/javascript"></script>
            <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript" src="android.js"></script>
        </head>
        <body>
            <div id="header"><h1>Test</h1></div>
            <div id="container"></div>
        </body>
    </html>


**index.html:**

    <html>
        <head>
            <title>Jonathan Stark</title>
            <meta name="viewport" content="user-scalable=no, width=device-width" />
            <link rel="stylesheet" type="text/css" href="android.css" media="only screen and (max-width: 480px)" />
            <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />
            <!--[if IE]>
                <link rel="stylesheet" type="text/css" href="explorer.css" media="all" />
            <![endif]-->
    		<script src="cordova-1.6.1.js" type="text/javascript"></script>
            <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript" src="android.js"></script>
        </head>
        <body>
            <div id="container">
                <div id="header">
                    <h1><a href="./">Jonathan Stark</a></h1>
                    <div id="utility">
                        <ul>
                            <li><a href="about.html">About</a></li>
                            <li><a href="blog.html">Blog</a></li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                    </div>
                    <div id="nav">
                        <ul>
                            <li><a href="consulting-clinic.html">Consulting Clinic</a></li>
                            <li><a href="on-call.html">On Call</a></li>
                            <li><a href="development.html">Development</a></li>
                            <li><a href="http://www.oreilly.com">O'Reilly Media, Inc.</a></li>
                        </ul>
                    </div>
                </div>
                <div id="content">
                    <h2>About</h2>
                    <p>Jonathan Stark is a web developer, speaker, and author. His consulting firm, Jonathan Stark Consulting, Inc., has attracted clients such as Staples, Turner Broadcasting, and the PGA Tour. ...</p>
                </div>
                <div id="sidebar">
                    <img alt="Manga Portrait of Jonathan Stark" src="jonathanstark-manga-small.png">
                    <p>Jonathan Stark is a mobile and web application developer who the Wall Street Journal has called an expert on publishing desktop data to the web.</p>
                </div>
                <div id="footer">
                    <ul>
                        <li><a href="services.html">Services</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="blog.html">Blog</a></li>
                    </ul>
                    <p class="subtle">Jonathan Stark Consulting, Inc.</p>
                </div>
            </div>
        </body>
    </html>


I'm pretty much using this as a base page for all the links/remote pages. Just changing the h2 tag titles in the #content div above.


**android.js:**

       $(document).ready(function() {
        loadPage();
    	
    });
    
    function loadPage(url){
    	if (url == undefined){
    	
    		$('#container').load('index.html #header ul',hijackLinks);
    			
    	}
    	else{
    		
    	
    	$('#container').load(url +  '#content',hijackLinks);	
    		
    	}
    	
    	
    }
    
    function hijackLinks(){
    	
    	$('#container').click(function(e) {
          
    		e.preventDefault();
    		
    		loadPage(e.target.href);
        });	
    	
    	
    }


Would somebody be able to tell me why the above code displays the entire page when i click on a link when its meant to only grab the #content div of the remote pages?

thanks!