CODEWITHSUNDEEP
javascriptjquery-mobile
Thomas
Thomas

Reputation: 4719

How to handle common elements in jquery mobile

Just started with jquery mobile andI understand the notion of data-role page. My app will consist of single pages instead of multiple ones within one HTML file

These pages, when rendered as a traditional website, contain a lot of common markup (header, menu, footer) Ideally, I would like each new page to just modify the content of the page and not load all of the extra markup. This I can handle just fine server side and return just the HTML fragment without the rest of the elements. However, jqm will display only the response and all common bits are hidden. Someone could argue, to just return everything, but some of the common elements (the menu for instance) has client side logic which makes an AJAX request upon page load to display user specific data and there is no need to do this for every page.

I believe this to be a very common scenario and I am interested in how you all have dealt with this situation?

Thanks

Upvotes: 0

Views: 95

Answers (1)

frequent
frequent

Reputation: 28503

Check the latest JQM 1.4 demos. Header, Footer, Panels and Popup can be created outside of a JQM page, so the only thing left is 

 <div data-role="page" id="your_page_id">
    <div class="ui-content">

    </div>
  </div>

Only the page with content will change on changePage calls. The rest will persist.

NOTE: Be sure to call 

 $(document).enhanceWithin()

before showing your page, because JQM will not enhance elements outside of a page afaik.

Upvotes: 1

Related Questions