CODEWITHSUNDEEP
jquerymobilejquery-mobile
Ashley
Ashley

Reputation: 5947

jquery mobile keep fixed content and only load content

I have a page which the layout is fixed (ie, header, footer, navigation etc). Jquery mobile does a good job of loading via ajax but it re-loads the entire page, ideally I would like to load only the content area.

I thought adding a div with the data-role="page" would tell jquery which content area to refresh, but this seems to do nothing, just acts a storage container for history.

I can't find an attribute in the docs to set which div should be the container. Can it be done simply?

Upvotes: 1

Views: 1912

Answers (2)

sgliser
sgliser

Reputation: 2071

To your idea of "... ideally I would like to load only the content area." The "best practice" for creating pages is to be sure that you are including everything that page needs in order to run. That means it should include whatever header, footer, and be linked to the jquery and jquery mobile libraries and assets. There's a very good reason why.

As of release candidate 2 (latest as of the time of this writing) the system will use URL rewriting to clean up the displayed URLs in the address bar. This allows for easier viewing of source, easier bookmarking, and in the event of a refresh (which anyone could do at any time, and trust me, they do). The page will load from a refresh to the latest page without having loaded what you had thought of as your initial page. If the situation you've outlined above, that would lead to a page with no header, footer, navigation, etc.

Being sure that each page can stand alone also ensures that if your users are using some corporate controlled devices where they're security policy is forcing them to turn off JavaScript, that they can still view the page in it's basic form (no ajax, no frills) and still get done what they need to. Writing the pages this way also makes it so that people stuck in the cellular stone age (feature or flip phones) could actually get use of your pages. It might not be pretty in either of these cases but it would work and that's the most important thing.

Upvotes: 1

Cymbals
Cymbals

Reputation: 1174

Two answers to your questions:

1) Multiple "pages" can be loaded in one HTML page, which is ideal for web apps. The page div is assigned an id, and you can then jump back and forth between pages without it having to go back to the server. You could eliminate the page header and footer on the additional page divs....or keep it the same and don't use a page transition.

OR 2) Use JQuery to to update the div. This is also easy because JQuery Mobile already uses JQuery in its script references.

<script> 
function loadcontent() { 
var strNewHtml;
strNewHtml = '<p>My New Text</p>';
$('#my-content-id-name').html(strNewHtml);
}
</script>
 add a link:  <a href = "#" onclick="loadcontent();">Click here</a>

...and that should do it!

Upvotes: 0

Related Questions