Follow Us

Skip Navigation LinksHome > Articles > JQuery > jQuery Mobile - Ajax - Dynamic content - Passing parameters (based on A4.1)

jQuery Mobile - Ajax - Dynamic content - Passing parameters (based on A4.1)

This article explains How to pass parameters accross pages in a jQuery Mobile web with Dynamic content and Ajax navigation

By Project 9X   On   Wednesday, 18 May 2011

Page Views : 58520   |   Technologies : JQuery

Rating : Rated :
1
| More..
Overview

I started working on jQuery Mobile web since alpha 2 versions, and then kept upgrading it to newer version. The jQuery mobile framework allows you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms.

I see lot of people have issues about passing parameters to next page, Ajax navigation, and dynamic content, and thought of writing this article that could give some hint to someone struggling with this.

If you are new to jQuery mobile (jqm) then consider demo application at jQuery Mobile site at http://jquerymobile.com/demos/1.0a4.1/

Note that this article is based on version as of Alpha 4.1

Approach

Approach in this article addresses following things:

  1. Page is loaded by jQuery Mobile Ajax navigation model
  2. Dynamic data is loaded by jQuery Ajax and .Net WCF web service.
  3. Query string Parameters can be passed across the page.
  4. URL has “#”, removing that from url will load actual page without Ajax.
  5. Page can be bookmarked. (Even if you remove ‘#’ from URL, next interaction will put Ajax in place; hence # will be added in url. For example click on home button.)

Solves issue: Multiple and needless DOM page elements are created even you visit the same page. This issue can be found on jqm alpha 4.1 demo. This issue has been posted here: http://forum.jquery.com/topic/ajax-navigation-url-and-page-elements .

You can read more about jQuery Mobile Ajax Navigation model, change page method and ‘#’ (hash) on this page http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-navmodel.html

Scenario

To understand 1 and 2 from above list, let’s take live example. Go to http://www.a2zdotnet.com/m/

I had data to be displayed in following hierarchy.

  • URL for above image is as follows in order from left to right.
  • /m/
  • /m/#categories.htm
  • /m/#articles.htm?cat=15
  • /m/#view.htm?id=177

I handled above scenario using pageshow() method. I’m using .Net WCF service architecture and retrieve data using jQuery Ajax. Page is loaded using jqm ajax navigation. So understand the difference here.

HTML elements

Now let’s look at the code.

First we will see the HTML markup, just things to be noticed.

Category.htm : noticeable HTML block

Category page can be referred like this

<li ><a href="#categories.htm">All Articles</a></li>

Page element

<div data-role="page" id="categories" >

Following html should be generated for List View Items on this page using jQuery(later on this page).

<li>
<a data-identity='cat5' data-url='?cat=5' href='javascript:void(0);' >listitem text</a>
</li>

Articles.htm: HTML block

Here I didn’t use ID. This is necessary because if multiple articles are loaded, DOM will have multiple page div elements with same ID. And that doesn’t sound right.

<div data-role="page" >
<li>
<a data-identity='cat[any-id-here]' data-url='?cat=[any-id-here]' href='javascript:void(0);' >listitem text</a>
</li>

View.htm

<div data-role="page" >

Since Category.htm page has id, we can navigate to this page by simply <a href="#categories.htm">

Attaching events and pageshow()

List view Items’ click event

Following jQuery code should be loaded after default script links.

Attach click event for listitem on category page listview.

$('div[id="categories"] ul[data-role="listview"] a').live("click", function() {
    var dataurl = $(this).attr("data-url");
    if (dataurl != null)
        $.mobile.changePage("articles.htm" + dataurl);
});

Attach click event for listitem on articles page listview.

$('div[data-url*="articles.htm?cat"] ul[data-role="listview"] a').live("click", function() {
    var dataurl = $(this).attr("data-url");
    if (dataurl != null)
        $.mobile.changePage("view.htm" + dataurl);
});

Following code uses pageshow method to load data for selected id and put it in desired “jQuery Mobile Page”.

Load categories with specific ‘Li’ format:

$('div[id="categories"]').live("pageshow", function() {

    $.mobile.pageLoading();

    //step 1: Perform   $.ajax and load data from web service

    //step 2: Create jqm listview having following format
    //Listview 'li' HTML Format: "<li><a data-identity='cat[category-id-here]' data-url='?cat=[any-id-here]' href='javascript:void(0);' >listitem text</a></li>"

    //step 3: Perform .listview('refresh');

    $.mobile.pageLoading(true);

});

Attach event to all pages having "cat" parameter in data-url (code below):

//attach event to all pages having "cat" parameter in data-url
$('div[data-url*="articles.htm?cat"]').live("pageshow", function() {

    var Category = getParameterByName("cat", $(this).data("url"));
    var tempdataurl = $(this).attr('data-url');
    if (Category == null || tempdataurl == null) return;
    
    $.mobile.pageLoading();

    //step 1: Perform   $.ajax and load data from web service for selected category

    //step 2: Create jqm listview having following format
    //Listview 'li' HTML Format: "<li><a data-url='?id=[article-id-here]' href='javascript:void(0);' >listitem text</a></li>"

    //step 3: Perform .listview('refresh');

    $.mobile.pageLoading(true);

});

Laod article for selected id (code below):

//laod article for selected id
$('div[data-url*="view.htm?id"]').live("pageshow", function() {

    var articleId = getParameterByName("id", $(this).data("url"));
    var tempdataurl = $(this).attr('data-url');
    if (articleId == null || tempdataurl == null) return;

    $.mobile.pageLoading();

    //step 1: Perform   $.ajax and load data from web service for selected article

    //step 2: Add article content which is received from webservice to jqm page content element.
    //you can use selector like this to target specific page-div among all pages.
    //$('[data-url="' + tempdataurl + '"] [data-role=content] #maincontent')

    //step 3: Perform .listview('refresh');

    $.mobile.pageLoading(true);

});

You can see this in action at live web: http://www.a2zdotnet.com/m/

Open above web and keep firebug open, you will notice that there is no extra DOM created when you visit same page. Pages with parameter passed are loaded separately with different data-url. If page with same data-url is visited, no new DOM loaded via jqm Ajax navigation. Just that page becomes active. This addresses problem as explained here .

Also, URLs are correct Ajax navigation point of view, meaning Hash values created by jQuery Mobile are normalized as full paths relative to the URL of the first "real" page that was loaded. The hash is always maintained as a valid URL, so any "page" in jQuery mobile can be bookmarked or referenced in a link. To retrieve a non-hash-based URL, simply remove the # from the address and refresh the page.

Firebug Screenshot

Let me know if you have any question.

Thanks for reading.

Please share if you like.


Keywords : pageshow()

Tags : jQuery MobileAjaxPassing parametersQuery StringA4.1
Rate This Article :

Comments :

blog comments powered by Disqus
User Login
Username :
Password :
Register Login

Forgot Password


Related Articles