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>° </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
No comments:
Post a Comment