Home/ Questions/Q 8211507
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T10:26:58+00:00

I’m starting to learn mobile app dev and i’ve already hit a snag. I

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    http://api.jquery.com/load/

    If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

    In other words, you need a space between url and #content in your second .load() call or jQuery thinks it’s part of the url.

    Change:

    $('#container').load(url +  '#content',hijackLinks);

    To:

    $('#container').load(url +  ' #content',hijackLinks);

    Also, your click listener should be called in your document ready callback. The function passed in to the load callback is actually a success callback, executed when the ajax call succeeds. Granted it is still getting called on document ready since it is run when the first load completes, but it isn’t exactly clear that way and it’s not necessary to put it there. You can remove hijackLinks from your calls to .load().

    $(document).ready({ hijackLinks(); loadPages(); });

    P.S. If hijackLinks is supposed to be executed on a link click, change the selector in your .click method from #container to #container a.

    • 0