I have page1 which is index.html, it a self-contained website includes header and scripts ect. I have a button on this page that when clicked will load page2 via ajax and insert page2 into page1. Page2 is just the div data-role="page" and html within it, its not a self-contained page. However, the url changes to page2.html and then if I "refresh" the page it doesn't load a complete page because page2 is not a full page, it was only ment to be injected into page1.

I tried setting the data-url="index.html&dashboard" (dashboard is the main id on page2) and in this case the url looks correct as it is still index.html&dashboard so a page refresh reloads page1 even if you were on page2. But now, jquery freaks out and sits on a loading screen forever because it can't find "dashboard" because that content was only added after the user clicked a button.

Danny, there are several tutorials and demos on the jQuery Mobile site that demonstrate the exact functionality you describe, is there not? If you're doing something different than what is in those demos, then why don't you try posting the code you've tried so we have something to work with? Right now, you're asking us to lift dead-weight, which is hard even for the strongest, most knowledgeable people.
–
jmort253May 12 '12 at 5:48

Lots better. Thanks. Can you show the JS code? You have to make sure all code is indented with 4 spaces; otherwise, it won't be formatted correctly.
–
jmort253May 12 '12 at 6:11

@jmort253 Ok code updated. Thanks. And all my code executes and works, so its not a problem of the code not working, its more of a logical issue of how it works.
–
DannyMay 12 '12 at 6:19

Danny, I've provided the long answer, then thought that the short answer might be enough for you. Also, check out the examples on the jQuery mobile site. The best thing to do is view the source of each page so that you can see what's going on under the hood. Good luck!
–
jmort253May 12 '12 at 6:33

Next, what jQuery Mobile essentially does is it uses CSS to hide the DIV element with the id="two" and only show the div with the id="one". When the user clicks on the hyperlink with the `href="#two", there is a listener that intercepts the hashChange event and fires some JavaScript code that hides the DIV with id="one" and shows the DIV with id="two".

This makes the page transitions appear extremely smooth and fast, without needing to make a trip to the server to get the HTML markup.

Dynamically Intected Content:

If your data is more dynamic, then another option is to use the jQuery Mobile Dynamic Page Injection. The general premise to this process is similar to the Multi-Page Templates in that the browser listens for the hashChange event, except in addition to changing pages, it also makes an AJAX request to the server to retrieve JSON content.

When the category "Animals" is clicked on, the id="home" DIV is hidden. Instead of reloading the page, in this example, the HTML is being dynamically generated and populated with the results of a JSON object.

Here is the code that handles displaying the correct content:

// Load the data for a specific category, based on
// the URL passed in. Generate markup for the items in the
// category, inject it into an embedded page, and then make
// that page the current active page.
function showCategory( urlObj, options )
{
var categoryName = urlObj.hash.replace( /.*category=/, "" ),
// Get the object that represents the category we
// are interested in. Note, that at this point we could
// instead fire off an ajax request to fetch the data, but
// for the purposes of this sample, it's already in memory.
category = categoryData[ categoryName ],
// The pages we use to display our content are already in
// the DOM. The id of the page we are going to write our
// content into is specified in the hash before the '?'.
pageSelector = urlObj.hash.replace( /\?.*$/, "" );
if ( category ) {
// Get the page we are going to dump our content into.
var $page = $( pageSelector ),
// Get the header for the page.
$header = $page.children( ":jqmData(role=header)" ),
// Get the content area element for the page.
$content = $page.children( ":jqmData(role=content)" ),
// The markup we are going to inject into the content
// area of the page.
markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
// The array of items for this category.
cItems = category.items,
// The number of items in the category.
numItems = cItems.length;
// Generate a list item for each item in the category
// and add it to our markup.
for ( var i = 0; i < numItems; i++ ) {
markup += "<li>" + cItems[i].name + "</li>";
}
markup += "</ul>";
// Find the h1 element in our header and inject the name of
// the category into it.
$header.find( "h1" ).html( category.name );
// Inject the category items markup into the content element.
$content.html( markup );
// Pages are lazily enhanced. We call page() on the page
// element to make sure it is always enhanced before we
// attempt to enhance the listview markup we just injected.
// Subsequent calls to page() are ignored since a page/widget
// can only be enhanced once.
$page.page();
// Enhance the listview we just injected.
$content.find( ":jqmData(role=listview)" ).listview();
// We don't want the data-url of the page we just modified
// to be the url that shows up in the browser's location field,
// so set the dataUrl option to the URL for the category
// we just loaded.
options.dataUrl = urlObj.href;
// Now call changePage() and tell it to switch to
// the page we just modified.
$.mobile.changePage( $page, options );
}
}

Note that also, when looking at the URL for the Category page and the Animals page, you can see that the HTML document is the same each time. The difference is the hash value.

When the page loads, the hash value is used to represent the state of the page. Since the browser is mostly stateless, the hash is one trick that is available to us to help determine what state a page should be displayed to the user.

Just compare your changePage method call with the URL's that are used in the menu in the Category page:

Note how the only thing that changes when a user clicks a link is the hashvalue, the page is never reloaded. But in your example, you're actually loading an entirely new page:

// this is a new page, not a hash
$.mobile.changePage("dashboard.html", { transition : "slide" });

Logically speaking, you need to rethink your strategy for how you represent your pages. To make the most use of jQuery Mobile, think of your first HTML page as a frame for all of your CSS, JavaScript, and static content.

Afterwards, any resources you request should be identified by a URL with that same page followed by a hashvalue.

For example, if your static page is "index.html", then your dashboard might be "index.html#dashboard". You could also either include the dashboard HTML in an id="dashboard" DIV and dynamically populate it with data from the server, or you could load the HTML and data in via AJAX.

The second point is that anyone accessing your dashboard directly would need to visit "/index.html#dashboard", which would load your original page, fire some JavaScript that would check the hash, recognize it contains "dashboard", and then make the transition to the dashboard page by pulling back in the dynamic data.

Thanks I will look at this a little more to see if that method will work for me. My example was pretty simple in reality there's going to be around 20 different pages each with sets of custom javascript with a lot of functionality involved on each page.
–
DannyMay 12 '12 at 6:38

I might have to just call each page separately and forget about the page transitions, I just like the slide effects between pages so I'll try something like above first but even with that working I need to figure out how to dynamically add/remove and execute javascript files based on that page was loaded as its going to be too large to keep stacking everything in the same dom (and preload all js files). Now if they have a way to do the page transitions on a completely different page that would solve everything I would just make each page self containing. I'll research some more :) Thanks.
–
DannyMay 12 '12 at 6:40

Then you may be better off using the 2nd method. Create a single page template and each time you request another page, just swap out the main DIV in the page template with dynamic data. Think of your JS as a library of functions you preload.
–
jmort253May 12 '12 at 7:39