Wardlaw Claims Service Company Blog: HTML 5

Showing posts with label HTML 5. Show all posts

Wednesday, February 16, 2011

Adding HTML Content to Wijmo Tooltip with AJAX

In this post I will demonstrate how the Wijmo Tooltip widget can be used to display HTML content retrieved using AJAX. Wijmo is a JavaScript widget library built on jQuery. Parts of Wijmo, including the tooltip, are free/open-source. This simple demo will display a list of cities. When the mouse is hovered over a city a tooltip containing the temperature will be displayed. The content of the tooltip is populated from HTML queried by jQuery's AJAX functions.

Here is a screen shot of the page viewed in the browser.

Next is the HTML markup, without the JavaScript used for the AJAX calls.

<!doctype html>
<html>
<head>
<title>Wijmo Tooltip AJAX Demo</title>
<link type="text/css" rel="stylesheet" href="jquery.ui.all.css">
<link type="text/css" rel="stylesheet" href="jquery.wijmo-open.1.1.2.css">
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="jquery.wijmo-open.1.1.2.min.js"></script>
</head>
<body>

<h1>Weather Tooltip via AJAX</h1>

<div>
<ul id="cityList">
<li data-zipcode="78701"><span class="x-tooltip">Austin, TX</span></li>
<li data-zipcode="75210"><span class="x-tooltip">Dallas, TX</span></li>
<li data-zipcode="76710"><span class="x-tooltip">Waco, TX</span></li>
</ul>
</div>


</body>
</html>

This is pretty simple markup. Note that I have used HTML 5 data-* attributes to associate a zip code with each list item element. Also note that Wijmo has dependencies on jQuery JavaScript and CSS files which I have referenced in the head section.

Next is the JavaScript that is used to create the tooltips.

jQuery(document).ready(function() {
  jQuery("#cityList>li>span.x-tooltip").each(function() {

   jQuery(this).wijtooltip({

      ajaxCallback: function () {    

      var item = this;  // give this an alias so we can refer to it in scope of Ajax call below

      jQuery.ajax({
       url: "weather.aspx" 
       , data: { zipcode: item.parent().attr("data-zipcode")  } //get the zip code from the li wrapping the span
       , success : function(data) { item.wijtooltip("option", "content", data);  } 
       , dataType: 'html' 
       , type: "GET"
      });                  
                 } 
    });
  });
 });

The selector #cityList>li>span.x-tooltip is used to get the SPAN elements I wish to provide a tooltip for. The ajaxCallback function option of the wijtooltip function is used to specify the AJAX call used to retrieve the HTML content and populate the tooltip content when the tooltipis shown. The data option of jQuery's ajax method gets the desired zip code value from the parent list item's data attribute.

Here is an example of the HTML resulting from a call to the weather.aspx page.

<!doctype html>
<html>
<head>
 <title>Weather</title>
</head>
<body>
Currently <span id="temp">63</span>&deg;
</body>
</html>

References
Wijmo - The Wijmo JavaScript and CSS files are available at the Wijmo website, as are the required jQuery files.
http://www.wijmo.com

Friday, December 17, 2010

Adding jQuery Mobile to a Web Page

In this post I walk through the changes needed to change a simple mobile web page from an XHTML page to an HTML 5 page that uses jQuery Mobile (JQM). This is the second in a series of blog posts in which I am exploring jQuery Mobile using the Alpha 2 release. This first post in the series can be found at: http://wardlawclaims.blogspot.com/2010/12/introduction-to-jquery-mobile_16.html
The page I will be using in this demonstration is a detail view page for a basic contact management web site. The page is used to display the contact information, phone numbers, email address, etc. for a single contact.

Here is a screen shot of the XHTML page in the iPhone 4 Safari browser.

Next is the XHTML for the detail page before I added jQuery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>A Simple Site | Adams, Abel</title>
</head>
<body>
<div>
<a href="index.html">Contact List</a> || <a href="form.html">New Entry</a><br />
</div>

<h1>Adams, Abel</h1>


<p>
Mr. Abel Adams<br />
Organization: Example, Inc.<br /> 
Mobile Phone: <a href="tel:555-555-1111">555-555-1111</a><br />
Home Phone: <a href="tel:555-555-2222">555-555-2222</a><br />
Work Phone: <a href="tel:555-555-3333">555-555-2222</a><br />
E-mail Address: <a href="mailto:adams@example.com">adams@example.com</a><br />
</p>

<p>
101 Example Street<br />
Waco, Texas 76710<br />
<a href="http://www.example.com">http://www.example.com</a><br />
</p>

<p>
Birthday: August 4, 1961<br />
Spouse: Anne<br />
</p>


</body>
</html>

Here is a screen shot of the page after it has been marked up as HTML 5 and the jQuery Mobile resources, JavaScript and CSS, have been added.

Here is the markup for the HTML 5 page.

<!doctype html>
<html>
<head>
 <title>A Simple Site | Adams, Abel</title>

 <!-- CSS and scripts required for jQuery mobile -->
 <link rel="stylesheet" href="jquery.mobile-1.0a2.css" />
 <script type="text/javascript" src="jquery-1.4.4.js"></script>
 <script type="text/javascript" src="custom-mobile-config.js"></script> <!-- this is a custom script file -->
 <script type="text/javascript" src="jquery.mobile-1.0a2.js"></script>
</head>
<body>
 
 <div data-role="page" data-theme="b">
    
  <div data-role="header">
   <div data-role="navbar">
    <ul>
     <li><a href="index.html">Contacts List</a></li>
     <li><a href="form.html">New Entry</a></li>
    </ul>
   </div> <!-- end navbar -->

   <h1>Mr. Abel Adams</h1>
  </div><!-- end header -->
 
  <div data-role="content">
   <p>
   Mr. Abel Adams<br />
   Organization: Example, Inc.<br /> 
   Mobile Phone: <a href="tel:555-555-1111">555-555-1111</a><br />
   Home Phone: <a href="tel:555-555-2222">555-555-2222</a><br />
   Work Phone: <a href="tel:555-555-3333">555-555-2222</a><br />
   E-mail Address: <a href="mailto:adams@example.com">adams@example.com</a><br />
   </p> 
  
   <p>
   101 Example Street<br />
   Waco, Texas 76710<br />
   <a href="http://www.example.com">http://www.example.com</a><br />
   </p> 
 
   <p>
   Birthday: August 4, 1961<br />
   Spouse: Anne<br />
   </p>
   
   <p>
   Notes:<br />
   Is senior manager at Example,Inc.<br />
   Hobbies are golf and poker<br />
   </p>

  </div> <!-- end content div -->
  
 </div> <!-- end page div -->
</body>
</html>

Using HTML 5
I started with changing the doctype from the XHTML Basic doctype to the HTML 5 doctype. The jQuery Mobile framework makes use of HTML 5's custom data attributes. These are the attributes "data-*" seen in the markup above and are a feature of HTML 5 intended to allow authors to associate arbitrary data with HTML elements in order to expose that data to custom JavaScript. JQM uses these data attributes to apply styling and behavior to sections of the page. Later in the process when I work on marking up a data entry form I will also be using the new input types introduced in HTML 5.

Adding the jQuery Mobile Resources
In the head element I've added the CSS and JavaScript resources required by the framework. In addition I've referenced an additional custom JavaScript file (custom-mobile-config.js) that contains the settings that I wish to override in the JQM defaults. I plan to cover the contents of this file in a future post.

<!-- CSS and scripts required for jQuery mobile -->
 <link rel="stylesheet" href="jquery.mobile-1.0a2.css" />
 <script type="text/javascript" src="jquery-1.4.4.js"></script>
 <script type="text/javascript" src="custom-mobile-config.js"></script> <!-- this is a custom script file -->
 <script type="text/javascript" src="jquery.mobile-1.0a2.js"></script>

Adding jQuery Mobile to the Markup
The JQM framework includes roles that specify areas of your page as header, content, footer, and navigation. The entire body of the page has been wrapped in a div with the data-role attribute with the value of "page" and a data-theme attribute. The data-role of "page" defines the marked up content as a JQM page and applies CSS. The optional data-theme attribute applies an alternate set of styles. JQM includes some predefined themes. I have not experimented with defining my own theme but I assume that a theme-roller or other customization method does or will exist for creating and modifying themes.

I have wrapped my page heading in a div with a data-role of "header" which I have included a "navbar" in order to create navigation at the top of the page. Navigation items are wrapped in an unordered list and the page's heading is wrapped in an h1 tag.

I have wrapped the rest of the page's markup in a "content" div and it contains the same content as the original XHTML version of the page. JQM takes care of applying the CSS based on the data-role of "content" and the theme that I specified in the "page" div's data-theme attribute. If you inspect the resulting page's DOM with the Chrome browser's development tools you will see that JQM has applied a added an number of styled elements to the basic markup.

References
jQuery Mobile Project
http://jquerymobile.com
HTML 5 Custom Data Attributes
http://www.w3.org/TR/html5/elements.html#embedding-custom-non-visible-data-with-the-data-attributes
XHTML version of the page used in this post
http://www.customdatasys.com/jqm/start/detail.html
The HTML 5 / JQM version of the page used in this post
http://www.customdatasys.com/jqm/v1/detail.html

Thursday, December 16, 2010

Introduction to jQuery Mobile

The jQuery Project team has developed a JavaScript and CSS framework targeted at mobile devices. The jQuery Mobile (JQM) project include a set of JavaScript, CSS, and images to apply style and behavior to a web page that is similar to a mobile application such as an iPhone app. As of time of this post the jQuery Mobile Framework is available in a alpha version.

I have created a simple web site consisting of three XHTML pages that mimic a simple contact management web application. Note that I have only created a bare bones front-end that uses only XHTML markup, it does not contain any JavaScript, images, CSS, or a back-end database. I will demonstrate how JQM and HTML 5 markup has been added to each page to add the JQM framework.

index.html
The home page for the site is list of contacts that displays each contacts phone number, email address and link to more information. Please note that each contact links to the same details page.

detail.html
This page lists detailed information for a contact.

form.html
This page allows entry of a new contact. It is here to demonstrate the styling and behavior that JQM applies to form elements.

References

jQuery Mobile Project
http://jquerymobile.com/

XHTML Contacts Site
http://www.customdatasys.com/jqm/start/

jQuery Mobile Contacts Site
http://www.customdatasys.com/jqm/v1/