The Jquery Mobile Multiple titles problem

What is this "Multiple Title" problem? In JQuery Mobile, we have the multi-page structure which causes this problem. In case you want to check out what multi-page structure in Jquery Mobile is, please check out this post.

The problem:
When you load the first page of a jQuery Mobile based site, then click a link or submit a form, Ajax is used to pull in the content of the requested page. Having both pages in the DOM is essential to enable the animated page transitions, but one downside of this approach is that the page title is always that of the first page, not the subsequent page you're viewing.

The solution:
jQuery Mobile automatically parses the title of the page pulled via Ajax and changes thetitle attribute of the parent document to match. For the multi-page documents, we handle this using the data-title attribute which is added to each page container within a multi-page template to manually define a title. The title of the HTML document will be automatically updated to match the data-title of the page currently in view. So your div with data-role="page" would look something as seen below.

</div>

Hope you have followed the post and your title is solved. Do let me know in case you have any issues and I will try to help you with those.

Comments

Recommended for You

Playing with the markers and info window bubbles...

In the last few posts, we have seen some marker examples and some information window examples. Now, lets do something interesting combining these two things. Just writing that "This is an info window" in the information bubble is not very interesting! And I know this...Have gone through the same phase! So, today we will do something interesting! We will display the latitude- longitude co-ordinates of the point that the user clicks on the map! Doing this is not at all complex! Copy paste the following code and you will see for yourself a map coming to life! The output of the above code looks as seen in the result section above! If you have any queries regarding the above code please comment on the blog post or feel free to contact me at my mail ID .

Form info window

Today we will look at a Google Maps API v3 example to add a form in the information bubble! This is usually required when we wish to accept some data/information from the user! This data can be saved to a server in the form of an XML file or a database! The information can then be retrieved back at a later stage, when necessary! In this example we will only look at form in the information bubble! The connectivity part with the server will be discussed in another post! So, today's code snippet is as seen below! <html> <head> <title> Google Maps API v3 - Adding marker and info window on Click and creating a form in the infowindow with the lat-lng information in it. </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map; //When using ev...

Material UI, Google Polymer & Web Components

Google introduced Material UI during the Google I/O a few days back. Since then the web is all abuzz with articles about material UI and what Polymer is and how these 2 fit together. In this article today, I will try and helps us all to get a better understanding of these new concepts. So, let's start with Material UI first. Google has for long been trying to bridge the gap between the Web and the Android worlds with a unified user interface and Google's Material UI is a big step towards this. The new design philosophy is about dynamically adjusting the elements according to screen size, add more white space between elements, provide a lot of user feedback using animations, make use of bold UI colors and be flat and 3D about the design at the same time. Now that sounds really cool, isn't it? Well, actually it is and you will actually appreciate and enjoy it all the more when you watch the following video from this year's Google I/O. ...

Jquery Mobile - Multi-page structure

In this post today, we will have a look at the multi-page Jquery mobile architecture. We have discussed the single page architecture in detail in the previous post . In case you have missed it, I recommend you to have a look at it first, before you proceed to the Jquery Mobile Multi-page architecture. Jquery multi-page architecture is nothing but a collection of DIVs stacked together in a single HTML page linked to each other using the div IDs. Let's take a look at the example below and then discuss it in detail. The example shows a three "page" site built with 3 jQuery Mobile divs navigated by linking to an id placed on each page wrapper. Note that the id's on the page wrappers are only needed to support the internal page linking, and are optional if each page is a separate HTML document. Here is what three pages look inside the body element. You must have observed that each of the page div has an attribute data-r...

Jquery Mobile - Single Page Structure

We have been introduced to Jquery Mobile and have also seen some of the key features of the rich web framework in the previous posts. Today we will take a look at a general page structure using Jquery Mobile. So be ready to start off programming using Jquery Mobile. The Jquery Mobile page structure is optimized to support a single page or local, internally linked multiple pages. What does this mean? Well, single page architecture means, having multiple pages that are linked to each other using the normal process of using the anchor tag. So, each page will have its own header, content and footer. The multiple page structure is basically having multiple pages in one single page within different DIVs. So each page becomes a DIV which is linked to another page using an id for that particular page DIV. The multiple page architecture, though available is not popularly used because it results in a performance issue. The DOM becomes heavy as ...

The UI Dev

Search This Blog