3

I am using Jquery mobile in my application. Earlier, I was using single page and was navigating across the page using hash tags but now I am planning to break it into multiple pages. So which is the better approach,i.e. to use the tags or to make separate files for that ?

And after separating the html file into multiple how will I access the contents of the tags with data-role="page"? As earlier I was using # tag to search within the pages.

Gajotres
  • 57,309
  • 16
  • 102
  • 130
Mitaksh Gupta
  • 1,029
  • 6
  • 24
  • 50

1 Answers1

2

From the point of navigation you will use your file name instead of page #. But this is the only difference.

Which solution is better depend on what are you trying to do. If you are creating hybrid mobile app with Phonegap the go with single HTML file / multiple pages approach. If you are just creating a mobile version of your site the use multiple html approach.

From the point of content access nothing is changing at all. You will still use your page id to access its content.

For example, if you have just made a transition from page index.html to second.html and second.html has a page with an id second. Then you will access its content with:

$('#second [data-role="content"]').....

Basically if you dont count navigation nothing else will change. Your content will still be loaded into the DOM.

EDIT :

I forgot, one thing will change. In case of multiple html files solution, first page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM. So you will need to also worry about this. If you want to find more about it take a look at my other answer: Why I have to put all the script to index.html in jquery mobile

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • But I am unable to access the classes using the #tags after separating it into multiple files – Mitaksh Gupta May 15 '13 at 10:52
  • In the example you gave above : $('#second [data-role="content"]')..... How will I access a particular div inside the data-role="content" ? – Mitaksh Gupta May 15 '13 at 11:00
  • 1
    $('[data-role="content"]').find('#someDIVid')...., if you want to do it a specific page (it must be loaded into the DOM) - $('#index [data-role="content"]').find('#someDIVid')..., or if you want to do it on an active page - $.mobile.activePage.find('#someDIVid').... – Gajotres May 15 '13 at 11:06
  • Feel free, I am always here to help :) – Gajotres May 15 '13 at 11:09
  • How will I handle live() events using this approach ? example code : $("#mainPortal").live("pageshow", function() { var tabShown = $("#mainTabsContent").find(".selTab"); refreshDataDisplays(tabShown, false); }); – Mitaksh Gupta May 15 '13 at 11:27
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/29991/discussion-between-mitaksh-gupta-and-gajotres) – Mitaksh Gupta May 15 '13 at 11:28