CODEWITHSUNDEEP
jquery-mobile
Tar
Tar

Reputation: 9025

Where should I put the data-url property and how should the target html page file look like?

If I grasp it correctly, the data-url enables me to change pages and leave other parts (header and footer) as it is, so I can place each page in separate html file.

So where do I put this data-url ? in the button (e.g.) that changes the page to the next one, or in the page div itself ?

And if it's in the page div of each html file, should that html file include the whole boilerplate of <script ... jquery.ver.min.js></script>, <link ... .css ... /> header and footer divs and so on ?

Upvotes: 0

Views: 316

Answers (2)

Meier
Meier

Reputation: 3890

Question 1: you put it in the page div The url is needed by the history or back function to re-visit the page. it is needed because a html file can have several pages.

In the button/link you put the url into the href attribut, like in normal html.

See section Data-url in http://jquerymobile.com/demos/1.1.1/docs/pages/page-navmodel.html

Question 2: It depends. If you think the page can be independently called, you put all the boilerplate. Mobile Jquery will extract your page div.

If the page is more a dialog of an app has has no meaning on its own, than removing the boilerplate is more efficient. There is less data to transfer, and the browser does not need to parse it just to find out what parts it need to throw away.

If you generate it on the server anyway, the best is to find out if it is a normal call or an ajax call, and send the boilerplate or not.

Upvotes: 1

codaniel
codaniel

Reputation: 5253

The data-url attribute is automatically added and used by the JQM framework. This is not something you would actually use. And it is not a way to leave the header and footer as it is. You will want to include the header and footer in each page. That part of the docs is attempting to explain how the framework uses that attribute internally. In a JQM multi page environment you link to the other page using its id attribute, <a href="#page2">Page 2</a> or whatever its id is. Then if you have separate pages you would link to the page like you normally would. i.e. <a href="page2.html">Page 2</a>

I would suggest you include the <head>...</head> section boilerplate stuff for the following reasons.

  1. In case your user hits refresh.
  2. Your user may bookmark or reach a certain page in your app through a link.

In either situation they will be needing the css and javascript. However if you intend on using phonegap you can ignore this because the user can't hit refresh and will not be reaching the page via link or bookmark.

Upvotes: 1

Related Questions