Question

I am making a simple static app in HTML5.

What I am doing now is that I have one single long page in which I have thousands of lines of code.

I am currently doing this to go to another page:

<div data-role="content">
    <label for="heading">History</label>
    <a href="#module_a" data-role="button" data-icon="arrow-r" data-iconpos="right" data-transition="flip">History</a>
    <a href="module_b" data-role="button" data-icon="arrow-r" data-iconpos="right">Remote Control</a>
</div>

…and then I have module_a & module_b as follow…

<div id="module_a" data-role="page">
    //content
</div>

…and same for module_b

Both divs are in same page so my page looks very bad.

What I want to is that I need same functionality but I dont want my divs that is module_a and module_b in the same page.

I want to create different pages for that and then load it as I am going so that my main page looks clear.

Answer 1

If I gather what you’re asking correctly you want AJAX. When you click on one of the links/buttons you need a javascript code which will send a request to get the HTML of another page and load it into place on the page.

The best way to do this is to use jQuery. It has this really helpful function called load() which does EXACTLY what you need. http://api.jquery.com/load/

It looks like this:

$('#containerWhereYouWantTheContentToLoad').load('http://url.to/content/you/want/to/load.html');

Hope that helps.