While creating your jQuery mobile application, you may want to show various records/data on the page. The number of records may be large and may span upto 100s. In such situations it is not at all logical to create 100 static pages using HTML5 divs or sections. But the most intelligent approach here is to dynamically update the content of a single page and show all records on that page only. I will show you how to achieve this in jQuery mobile. See the live demo here.
Here is the approach that I followed:
- Create a JSON file to store the data.
- Update the page content each time a record is requested.
1. First of all let us create the basic layout of our HTML5 page
<!DOCTYPE html>
<html>
<head>
<title>Dynamic page update</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/jquery.mobile-1.0.1.min.css" />
<script src="lib/jquery-1.6.4.min.js"></script>
<script src="lib/jquery.mobile-1.0.1.min.js"></script>
<script src="lib/page_update.js"></script>
</head>
<body>
<!-- The main page -->
<section data-role="page" id="main">
<!-- The header -->
<div data-role="header">
<h1>Dynamic Page Update</h1>
<!-- The navigation bar -->
<nav data-role="navbar">
<ul>
<li><a href="#" id="prev">Prev</a></li>
<li><a href="#" id="next">Next</a></li>
</ul>
</nav>
</div>
<!-- The content area -->
<div data-role="content" id="main-content">
</div>
<!-- The footer -->
<div data-role="footer">
<h4>
<a href="#main" data-role="button" data-icon="home">Home</a>
</h4>
</div>
</section>
</body>
</html>
The Page Layout
2. Next we will create the JSON file to store our data
[
{
"events":
[
{
"venue":"Old Trafford, Manchester",
"date":"14 August 1990"
},
{
"venue":"Sydney Cricket Ground, Sydney",
"date":"6 January 1992"
},
{
"venue":"WACA Ground, Perth",
"date":"3 February 1992"
},
{
"venue":"Sher-e-Bangla National Stadium (3), Mirpur",
"date":"16 March 2012"
}
]
}
]
3. Declaring various global variables
//Initialize global variables
var cur_record = 1;
var UPPER_RECORD_LIMIT = 4;
var LOWER_RECORD_LIMIT = 1;
var HASH = '#';
var TRANSITION_TYPE = 'slide';
var PAGE_ID = 'main';
var PAGE_CONTENT_ID = 'main-content';
var NEXT_BTN_ID = 'next';
var PREV_BTN_ID = 'prev';
var ALL_RECORDS = '';
var EVENTS = '';
4. Now in our JavaScript file we will fetch the data from our JSON file using AJAX.
We will store the data in some global variable.
//Get the records from JSON file
jQuery.getJSON("lib/page_data.json", function(data){
setRecords(data);
});
//Store the records in global variables
function setRecords(data) {
ALL_RECORDS = data;
EVENTS = ALL_RECORDS[0].events;
UPPER_RECORD_LIMIT = EVENTS.length;
updateRecordsData();
}
5. Now we will update the content of the page upon document.ready event of jQuery.
//Update the page content
function updateRecordsData(){
var this_page = jQuery(HASH+PAGE_ID).find(HASH + PAGE_CONTENT_ID);
var venue = EVENTS[cur_record-1].venue;
var date = EVENTS[cur_record-1].date;
var htm = '';
htm += '<ul data-role="listview">';
htm += ' <li>Date: ' + date + '</li>';
htm += ' <li>Venue: ' + venue + '</li>';
htm += '</ul>';
jQuery( HASH + PAGE_ID ).find( HASH + PAGE_CONTENT_ID ).html(htm);
}
6. Show next and previous records
//Go to next record
function gotoNextRecord() {
cur_record++;
if(cur_record > UPPER_RECORD_LIMIT) {
cur_record = LOWER_RECORD_LIMIT;
}
updateRecordsData();
}
//Go to previous record
function gotoPrevRecord() {
cur_record--;
if(cur_record < LOWER_RECORD_LIMIT) {
cur_record = UPPER_RECORD_LIMIT;
}
updateRecordsData();
}
7. Binding the click and swipe events
jQuery mobile provides pre-built touch events for swipe. You can bind these events like this:
//Bind events with next/previous buttons
jQuery(HASH + NEXT_BTN_ID).bind('click', gotoNextRecord);
jQuery(HASH + PREV_BTN_ID).bind('click', gotoPrevRecord);
jQuery(HASH+PAGE_ID).bind('swipeleft', gotoNextRecord);
jQuery(HASH+PAGE_ID).bind('swiperight', gotoPrevRecord);
8. The final code
jQuery(document).ready(function() {
//Initialize global variables
var cur_record = 1;
var UPPER_RECORD_LIMIT = 4;
var LOWER_RECORD_LIMIT = 1;
var HASH = '#';
var TRANSITION_TYPE = 'slide';
var PAGE_ID = 'main';
var PAGE_CONTENT_ID = 'main-content';
var NEXT_BTN_ID = 'next';
var PREV_BTN_ID = 'prev';
var ALL_RECORDS = '';
var EVENTS = '';
//Get the records from JSON file
jQuery.getJSON("lib/page_data.json", function(data){
setRecords(data);
});
//Store the records in global variables
function setRecords(data) {
ALL_RECORDS = data;
EVENTS = ALL_RECORDS[0].events;
UPPER_RECORD_LIMIT = EVENTS.length;
updateRecordsData();
}
//Update the page content
function updateRecordsData(){
var this_page = jQuery(HASH+PAGE_ID).find(HASH + PAGE_CONTENT_ID);
var venue = EVENTS[cur_record-1].venue;
var date = EVENTS[cur_record-1].date;
var htm = '';
htm += '<ul data-role="listview">';
htm += ' <li>Date: ' + date + '</li>';
htm += ' <li>Venue: ' + venue + '</li>';
htm += '</ul>';
jQuery( HASH + PAGE_ID ).find( HASH + PAGE_CONTENT_ID ).html(htm);
}
//Go to next record
function gotoNextRecord() {
cur_record++;
if(cur_record > UPPER_RECORD_LIMIT) {
cur_record = LOWER_RECORD_LIMIT;
}
updateRecordsData();
}
//Go to previous record
function gotoPrevRecord() {
cur_record--;
if(cur_record < LOWER_RECORD_LIMIT) {
cur_record = UPPER_RECORD_LIMIT;
}
updateRecordsData();
}
//Bind events with next/previous buttons
jQuery(HASH + NEXT_BTN_ID).bind('click', gotoNextRecord);
jQuery(HASH + PREV_BTN_ID).bind('click', gotoPrevRecord);
jQuery(HASH+PAGE_ID).bind('swipeleft', gotoNextRecord);
jQuery(HASH+PAGE_ID).bind('swiperight', gotoPrevRecord);
});
