Skip to main content

Posts

Showing posts with the label ajax

jQuery Mobile and Duplicated Page IDs

In the previous post, I touched upon how browsers safely handle duplicate IDs in a html file. Things seem to work fine for the three main uses of element IDs, i.e. linking to fragments, styling and referencing the element in javascript. The first element with matching ID is picked up and styling is done for all matches.


Now let us extend this test to the jQuery Mobile framework. You can launch the below multi-page code here.


Launch


<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Mobile Duplicate IDs</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />      <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>     <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>   </head>
  <body>

jQuery Mobile Page Transitions with data-ajax=false

In my earlier post here, I outlined the various page transitions that are available in jQuery Mobile. 


In single-page template documents, jQM uses Ajax to smoothly transition between pages and when not possible, the framework does a simple HTTP request to pull in the page. Situations where Ajax transitions are not used are:


When a page loaded is:

from an external domaindata-ajax="false" attribute is usedrel="external" is specifiedtarget attribute is specified
This is also well documented (with examples).


In multi-page template documents, jQM needs Ajax to transition between the multiple page containers. Now lets play with this a bit. Let us try to override this with the data-ajax attribute and see what happens.


Consider below code, you can click on the link below to launch it in a separate browser tab:
Launch


<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Mobile Transitions Demo with data-ajax="false"</title>
    <meta name="v…

jQuery Mobile single-page vs multi-page template

[Updated 2012/02/09]
In my recent posts I mentioned about jQuery Mobile single-page and multi-page templates, so what exactly are the differences between them?


Single Page Template:

Launch- example from previous post, notice the address shown as you navigate
Lighter and cleaner. Each page is a separate html file and more modular. Better fallback if JavaScript is not supported. So works well on more platforms, you could even target grade C browsers On first load, the start page is loaded into the DOM. An internal reference is always held to this. Any new page loaded is added to the DOM. Any previously shown page is removed from the DOM. The start page is always in the DOM.The DOM size is relatively smallerOptional to use the "page" data-role element in the codeCan turn off Ajax Navigation between pages using data-ajax="false"Recommend to use the <title> tag for page titlesThe <title> tag always gets precedence during page loadsConsumes more bandwidth as each…

jQuery Mobile Recommendations for Page Title

In my previous two posts, I outlined how page titles are picked up in jQuery Mobile in a single-page and in a multi-page template scenario.


Read them here: 
jQuery Mobile data-title behavior with multi-page template
jQuery Mobile data-title behavior in single-page template


Though its a very trivial thing, it is important that the right titles are shown on your pages as you navigate through your mobile HTML5 app.


So we see that there are 3 options available to set the page title, 

The <title> tagThe data-title attribute of the page containerThe header text in the header container
Now the question is which one to use? 
And here are my recommendations,

For the landing page for any app, use the <title> tag, that always is the primary one to use. The document.title gets populated first and use the same.For multi-page template, use data-title for every page container, including the first container in the document. After first load, every subsequent Ajax transition uses this attribute.For…

jQuery Mobile data-title behavior in single-page template

In my previous post, I had visited the behavior of the jQuery Mobile library data-title attribute under different scenarios when using a multi-page template. In this post, I will outline the behavior when using a single-page template.
Consider the below single-page template code. Click here to launch the below code in a separate browser. Launch

mainpage-title.html



<!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />      <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>     <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>   </head>   <body>     <div id="page1" data-role="page" data-title="Mainpage…