Every once in a while you need to get to an XML element that is tucked within some namespace or another, but you really are not in the mood to deal with namespaces. You really don’t want to mess with XmlNamespaceManager or its ilk; or maybe you only have XPath to work with.

When this comes up, it usually takes me a few moments to remember, but the magic is the local-name() function.

XML

<gw:bookstore xmlns:gw="http://www.moonbats.com/gw">
	<gw:book>
		<gw:title>Warming Up To The New Ice Age</gw:title>
		<gw:author>A. Nother Lemming</gw:author>
	</gw:book>
	<gw:book>
		<gw:title>The Sky Is Falling</gw:title>
		<gw:author>Chicken Little</gw:author>
	</gw:book>
	<gw:book>
		<gw:title>Glaciers Will Burn Us All</gw:title>
		<gw:author>Chicken Little</gw:author>
	</gw:book>
	<gw:book>
		<gw:title>Data: A Cookbook</gw:title>
		<gw:author>Grant Me Money</gw:author>
	</gw:book>
</gw:bookstore>

XPath

//*[local-name()='title']

This basically says to select any element where the local name, i.e. the element name minus the namespace, is equal to ‘title’.

This can be extended with other XPath functions. In the following example we want to get the titles of books by Chicken Little.

//*[ local-name() = 'title' and (../*[local-name() = 'author'
	and contains( text(), 'Chicken Little' ) ]) ]

Here we’re selecting elements with a local name of ‘title’ and a sibling element named author and where that sibling’s value contains ‘Chicken Little’.

This syntax is not as convenient as something like /*:title, but at least it does the trick.

The English Standard Version (ESV) of the Bible is a literal word-for-word translation from Crossway Bibles, who have made it available via a REST web service. There is no charge for non-commercial applications, such as on a personal or church website, though use is limited to 500 verses per query and 5000 queries per day.

The ESV API is a nice rich interface to the Bible. The basic queries include the following:

• passageQuery – takes a verse reference (or range) and returns the text.
• query – performs a word search or passage lookup on the search criteria and returns the results.
• readingPlanQuery – given a date, starting date, and reading plan, such as one-year-tract or chronological, this returns the passage(s) for the date.

There are a lot of options, result formats, etc. so be sure to visit the API page for more details.

Notes On Making This Work

Getting the examples below to work presented some challenges or required some work-arounds or otherwise might be an interesting bit.

Cross-site Ajax requires the use of a proxy. In this case, I’ve got a PHP proxy using Curl to make the actual web service call to the ESV API. The PHP is something along the lines of the following pseudo code:

<?php
function geturl($url){
	// typical curl get url code
}
function request_cache($url, $dest_file, $timeout=604800){
	// Cache code, modified from yahoo developer code
	//   http://developer.yahoo.com/php/howto-cacheRestPhp.html
	// Essentially, looks for cached requests and returns them
	//  Otherwise, make the request (then cache it)
}
$apikey = "IP"; // use your own ESV API key here
// build $cache_fullpath
// build $v cache file name
// init $options to default
foreach ($_GET as $key => $value){
	// find $cmd and build $options key=value string
}
$url = "http://www.esvapi.org/v2/rest/$cmd?key=$apikey&$options";
$cache_timeout = 604800; // one week, in seconds
$response = request_cache($url, $cache_fullpath .
	"__" . $v, $cache_timeout);
if ($response === false) {
	die('Request failed');
}
echo $response;

Caching of requests is also a good idea in this case, and handled by the PHP proxy. This speeds things up a fair bit and reduces load on the ESV API site, but also helps to keep us below the daily request limit of 5000. It’s probably too short, but I’m caching these requests for a week. If you’re interested, I modified some code I found at Yahoo’s developer center. See above for pseudo code integration with PHP proxy.

Embedded link twiddling is accomplished in the some jQuery Javascript embedded in this post. The ESV API takes a link-url parameter that it uses to build links into the query method results, but since I didn’t want to go to the trouble in this example of building a full ESV search facility, I’m pointing the urls back to the ESV site. The code below is part of the success handler for the query .ajax() call. The first line dumps the HTML result into the #esvtext2 div, then the second line executes the inline function for each anchor tag within the results, monkeying with the href.

$("#esvtext2").html( data );
$("#esvtext2 a").each( function(){
	var link = $(this).attr("href");
	$(this).attr("href", link.replace("/esv/search/?",
		"http://www.esvapi.org/v2/rest/query?") +
		String.fromCharCode(38) + "key=IP");
});

Dealing with ampersands in WordPress was causing severe headaches. Their online support insists that encoding them as & or & makes for perfectly wonderful URLs, but the ESV REST API did not agree and simply hated the resultant URLs I was sending its way. That is, until I used String.fromCharCode(38) to inject them into the URL string (see above).

Styling Scripture returned from the API was handled with a CSS style element embedded within this post. One of the things I really appreciate about the ESV API is that the results are so richly-styled. Footnotes (.footnote and .footnotes), chapter and verse numbers (.chapter-num and .verse-num), search results (.search-result), and the words of Christ (.woc) and all easily styled into something that looks pretty decent. (Yes, my CSS is a little junky. Any suggestions are welcome.)

<style type="text/css">
#esvtext1,#esvtext2,#esvtext3 { border:1px solid #ddd; padding:1em; }
.esv * { font-family:Georgia,serif;margin:0;padding:0; }
.esv h2 { font-size:1.3em;margin:0;padding:0; }
.esv h3 { font-size:1.1em;margin:0;padding:0; }
.esv .woc { color:red; }
.esv-text { font-size:1em; }
.chapter-num{font-weight:bold;font-size:1.2em;}
.verse-num{font-weight:bold;font-size:1.1em;}
.esv .search-result{border-top:1px dashed #ccc;}
.esv .search-result-text-heading{font-weight:bold;}
.esv .search-term-1{background-color:#cc9;}
.esv .footnote a{ vertical-align:top;font-size:.8em;color:#777; }
.esv .footnotes { font-size:.8em; }
</style>

Scrolling the demos after the Ajax call was complete involved using the scrollTo jQuery plugin and simply doing a $.scrollTo( “#demo1″, 500 ) in the Ajax success handler, after sticking the results in the demo results div. This scrolls the corresponding demo intro to the top of the page. Nice.

      success:function(data){
        $("#esvtext2,#esvtext3").html("");
        $("#esvtext1").html( data );
        $.scrollTo( "#demo1", 500 );
      },

Cleaning up results of previous requests is accomplished with an easy jQuery line. In the success handler for each Ajax call, the first thing that happens is setting the results div for each of the other two demos to an empty string. The code above is the Ajax success handler for the first demo.

Examples

The examples below are three forms and an empty div. The three forms are bound to some jQuery (of course), which submits Ajax requests to a PHP proxy, then sticks the results in the empty div. For search results, embedded relative links are changed to point to the ESV site.

The sample below simply requests the passage from the ESV REST interface via the PHP proxy and pops the results into the results div. In the absence of specifying otherwise, we get it back in default format (HTML) with default options. The basic format for a passage is Book Verse:Chapter, but the API supports multiple passages, such as John 14:1-10,gen 1,is 2.

Results

The sample below is similar to the passageQuery except that you can send either a passage or a query word such as Messiah or fisher and get back the results. Paging is supported by the API (though not in this demo), so if the results span multiple pages you can request arbitrary pages as well (page=3, etc.). Other available options include sending your own search URL base for embedded links, number of results per page, and more.

Results

The readingPlanQuery sample simply allows you to select from a few different plans and sends the request. The default date is today, and the default start date is January 1st, so we’ll just use those.

Results

When debugging or poking around in sites where jQuery is not already used, I had been pasting the following code into the multi-line FireBug console and hitting Run. This makes jQuery available for debugging, etc.

j=document.createElement("SCRIPT");
j.src="http://code.jquery.com/jquery-latest.pack.js";
document.getElementsByTagName("HEAD")[0].appendChild(j);

If you use Firebug, this is a handy way to make it even more powerful.

Make it a bookmarklet.

Of course, that whole process got old fast, so I created a bookmarklet to do the same thing, but save me from having to paste and run it in Firebug.

Drag this link: Load jQuery to your Firefox bookmark toolbar, then just click it to inject jQuery into a page.

The bookmarklet code:

javascript:void((function(){j=document.createElement("SCRIPT"); j.src="http://code.jquery.com/jquery-latest.pack.js"; document.getElementsByTagName("HEAD")[0].appendChild(j);})())

And nicely formatted:

javascript:void((function(){
  j=document.createElement("SCRIPT");
  j.src="http://code.jquery.com/jquery-latest.pack.js";
  document.getElementsByTagName("HEAD")[0].appendChild(j);
})())

Then in Firebug, you can use jQuery selectors and so forth to debug the page. Obviously you’ll have to re-inject each time the page (or a new page) is loaded.

Great, I’ve reinvented the wheel.

Of course, a bit of searching revealed that John Resig himself posted a bookmarklet called jQuerify–almost identical to this one–linked in this Ajaxian article.

The bookmarklet envelopes are different, but both do a simple script injection into the DOM.

I wanted the ability to color charts based on their value, giving them red/yellow/green colors based on if they were lower/equal to/higher than a given value. The ability to use gradients instead of solid colors was also a requirement. I basically wanted to do something like this:

The columns below the line are red, on the line are yellow, and above the line are green. The need might arise to do more colors than this, so the code should be flexible

But almost as important as the final look of the graph itself was the ability to re-use the code without having to rewrite parts of it for each implementation. And I wanted to be able to use it in a flex application using only mxml, but still be able to use it in ActionScript if needed.

In the end I wanted to be able to define the threshold or goal as part of the data that the graph used and the code would color the columns based on that data (if it was greater than/less than/equal to). So the code to use the “coloring object” would look something like this (where we define High/Mid/Low colors):

<mx:series>
  <mx:ColumnSeries xField="Month" yField="Income" displayName="Income2">
    <mx:itemRenderer>
      <mx:Component>
        <utils:ColoredSeriesItemRenderer valueField="Income" thresholdField="Goal">
          <utils:thresholdGradients>
            <mx:Object>
              <mx:High><mx:Object gradient="[0x55dd55,0x005500]" /></mx:High>
              <mx:Mid><mx:Object gradient="[0xdddd55,0x555500]" /></mx:Mid>
              <mx:Low><mx:Object gradient="[0xdd5555,0x550000]" /></mx:Low>
            </mx:Object>
          </utils:thresholdGradients>
        </utils:ColoredSeriesItemRenderer>
      </mx:Component>
    </mx:itemRenderer>
  </mx:ColumnSeries>
 
  <mx:LineSeries xField="Month" yField="Goal" displayName="Goal"/>
</mx:series>

But to be flexible I also wanted to be able to define the goal in the code, where I could give it as many ranges with associated colors as I wanted. This code would look something like this:

<mx:series>
  <mx:ColumnSeries  xField="Month" yField="Income" displayName="Income1">
    <mx:itemRenderer>
      <mx:Component>
        <utils:ColoredSeriesItemRenderer valueField="Income">
          <utils:ranges>
            <mx:Array>
              <mx:Object lowerLimit="280" color="0xFF0000" />
              <mx:Object lowerLimit="240" upperLimit="280" gradient="[0xFFFF00,0x55FF55]" />
              <mx:Object lowerLimit="220" upperLimit="240" gradient="[0x5555FF,0x000099]" />
              <mx:Object lowerLimit="200" upperLimit="220" gradient="[0x0000FF,0x00FF00,0xFF0000]" />
              <mx:Object upperLimit="200" color="0xFFFF00" />
            </mx:Array>
          </utils:ranges>
        </utils:ColoredSeriesItemRenderer>
      </mx:Component>
    </mx:itemRenderer>
  </mx:ColumnSeries>
</mx:series>

Creating a custom item renderer allowed me (and now you too) to change the colors of the columns as they were being created. This works so much better than other solutions I saw (laying a filter on top of the columns) because it automatically changes when the column changes.

I created a new object out of it so you can just drop it in the directory where you keep your other library files (and change the package name if needed) and start using it. I have included it along with some sample files in a handy zip file for you…

I hope this saves you all the time it could have saved me (if I would have found something similar).

Download the ColoredSeriesItemRenderer.as object with two full examples that you can compile and try in a handy zip file.

If you are not familiar with including custom made objects into an mxml file then you’ll need to know about packages. In the sample code I used a package name of “utils”, which means that the actionscript object is defined with an “utils” package declaration and is in an “utils” subdirectory. Also, the example files will require you to define the xml namespace in the Application tag. This is done by adding something like this: xmlns:utils=”utils.*”

In form fields where a password is entered, it is usually obscured by asterisks or bullets to prevent someone from seeing what you type. This is a great feature but where a long password is being typed or a remembered password is filled in by the browser, you might want to actually see the actual password itself.

Show Password Bookmarklet

Here is a bookmarklet (a snippet of Javascript that can be pasted into the address bar of your web browser), that will show any passwords on a page that contain password form fields.

javascript: (function() { var s="", F=document.forms,j,f,i; for(j=0; j<f.length; ++j) { f = F[j]; for (i=0; i< f.length; ++i) { if(f[i].type && f[i].type.toLowerCase() == "password") s += f[i].value + "\n"; } } if (s) alert("Password fields:\n\n" + s); else alert("No password fields on this page."); } )();

Just paste the above javascript into the address bar of your browser and press Enter, or create a bookmarklet link with the javascript as the URL. On this page you’ll see the password for the mock sign on form below.

This is nothing new.

This or similar javascript has been around for a while. This particular one was on raymond.cc (via etc.), but it needed to be fixed for some forms where fields have a null type property (an example is the sign on form for LinkedIn). The fix was adding f[i].type && to the if statement inside the inner for loop.

Formatted Javascript Code

If you’re interested in what is happening to make this work the formatted code is below.

Essentially, the variable F is set to the collection of forms on the page, which is looped through, examining every input field in each form testing if it’s of type “password.” If it is a “password” field, its value is appended to the string variable s. Once all the input fields in all the forms on the page have been sniffed, the string value is displayed in an alert.

javascript:
(function() {
   var s="", F=document.forms,j,f,i;
   for(j=0; j<f.length; ++j) {
     f = F[j];
     for (i=0; i< f.length; ++i) {
       if(f[i].type && f[i].type.toLowerCase() == "password")
         s += f[i].value + "\n";
     }
   }
   if (s)
     alert("Password fields:\n\n" + s);
   else
     alert("No password fields on this page.");
 }
)();

But Firefox already…

And yes, we know Firefox will show you passwords in the clear with Tools/Options/Security/Show Passwords.

This javascript, however, is easier to access if you have created a bookmarklet for it, plus it works in other browsers.

John Resig and the jQuery team have been busy releasing jQuery 1.2 and a bugfix version 1.2.1.

jQuery Version 1.2

Version 1.2 is a major update to the popular Javascript library. Many new features were added and a few were removed, so updating existing code may be required to use the new release.

Features Removed

The jQuery team tries to keep the library as small as possible. Unfortunately that means some things have been deprecated or moved into plugins.

A backwards compatibility plugin is available to assist or delay any changes needed to use the new version.

Several XPath selector features were removed, including Descendant (ex. $(“div//p”) ), Child (ex. $(“div/p”) ), Parent (ex. $(“p/../div”) ), Contains Predicate (ex. $(“div[p]“) ), and Attribute (ex. $(“a[@href]“) ). It is recommended that instead of these selectors, the corresponding CSS or other selectors be used. Or use the XPath Compatibility Plugin.

The parametized clone() method (ex. $(“div”).clone(false) ) has been deprecated. .clone() is still supported, but instead of using the false argument, use .clone().empty() instead.

DOM Traversal methods .eq(), .lt(), .gt(), and .contains() have been deprecated in favor of using .slice() and .filter(). Note that 1.2.1 brings back .eq().

The Ajax methods .loadIfModifed() and .getIfModifed() are deprecated. You should use the $.ajax() method with the “ifModified:true” option instead. Also, $.ajaxTimeout is now deprecated in favor of $.ajaxSetup(). .evalScripts() has been removed as it is no longer necessary; all scripts in HTML strings are automatically evaluated when injected into the document.

Features Added

Now for the good stuff.

Besides the new XPath Compatibility Plugin mentioned above, the core now supports :has(selector), :header, and :animated.

New DOM traversal methods include .map(), .prevAll() and .nextAll(), .slice(), .hasClass(), .andSelf(), and .contents().

New DOM manipulation methods include .wrapInner() and .wrapAll(), .replaceWith() and .replaceAll(), and .clone(true) Event Cloning.

New .offset(), .height() and .width() CSS methods were added.

Ajax support was improved with support for partial .load(), Cross-Domain getScript(), JSONP, and disabling caching. Also .serialize() has been reworked.

New effects features support .stop(), % and em animations, color animations, relative animations, queue control, the :animated selector, and custom animation types with the step Function.

Namespaced Events and .triggerHandler() are also new.

jQuery.UI

jQuery now has its own UI, including draggables, droppables, resizables, shadows, sliders, sortables, tabs, accordians, selectables, trees, and modals.

Well, it has a few bugs, but it really is nice. And, of course, they’re hard at work squashing the bugs as fast as possible.

jQuery Version 1.2.1

A bugfix release on September 16th fixes some bugs and adjusts the API in two places.

Due to overwhelming demand, .eq() has returned in version 1.2.1. Also, a problem with the relative animation API has been fixed.

Excellent Upgrade

This is a major step forward for jQuery. The loss of XPath and a few features in the core is a slightly bitter pill, but plugins help with this. The additional features are great, and the new UI library is welcome.

This release addresses bugs, improves performance, adds some functionality, and deprecates some functionality in anticipation of changes upcoming in jQuery version 1.2.

Both standard and packed .js files are available at code.jquery.com.

jQuery Bugfixes

This latest release addresses 53 problem tickets (including those fixed in the 1.1.3.1 emergency release), improving computed styles in Safari, HTML script evaluation, and Ajax settings issues.

jQuery Library Improvements

Besides bugfixes, you can now rename jQuery. This allows multiple instances of jQuery to be included, side-by-side. Further, it allows you to use jQuery within the namespace of another library, such as the Yahoo! UI toolkit.

The new release also includes speed improvements over version 1.1.3 in id and element selectors, and with each() operations.

jQuery New Features

jQuery version 1.1.4 introduces some new functionality as well.

.slice() allows you to grab a “slice” of a selector result vector, and operates like the Javascript array slice method.

:has() allows you to further qualify a selector, as in $(“a:has(img)”) to select all anchors that contain an image element.

Deep .extend() allows objects to be merged without overwriting internal objects.

Deprecations

In preparation for jQuery 1.2, some items are deprecated in version 1.1.4.

Some XPath selectors are being dropped. An XPath plugin is being introduced with 1.2, and in the meantime CSS selector formats must suffice. For example, instead of using the XPath child selector $(“div/p”), you now use the CSS selector $(“div > p”).

The parameterized .clone() method is now deprecated.

DOM traversal methods .eq(), .lt(), and .gt() are deprecated, replaced by the new .slice() method.

Ajax methods .loadIfmodified() and .getIfModified() are deprecated and replaced by the long form .ajax() method. .ajaxTimeout() is deprecated as the long-form .ajaxSetup() will suffice. .evalScripts() is no longer needed since all scripts are evaluated are now automatically evaluated upon injection.

jQuery, John Resig’s Javascript library, makes Ajax easy for beginners and professionals alike. This article dives into using the various jQuery Ajax methods.

Ajax Basics

Asynchronous JavaScript and XML, or Ajax, has become a catch-all term for client-initiated communications with a server. Specifically, Ajax usually refers to requests sent from a web browser to a server. It is even used to refer to non-XML communications, such as Asynchronous HTML and HTTP — AHAH. The rationale being that the first H in AHAH really means XHTML. I think someone just wanted another clever-sounding acronym; it really should be AJAH since it still uses Javascript. But I digress.

Simply put, Ajax allows you to execute a POST or GET request from the browser back to your server to fetch data, save data, execute a method, or what have you, without requiring a refresh of the web page.

jQuery Ajax Methods

jQuery provides several methods to assist with Ajax programming: load, get, post, and ajax.

load() takes a url, parameters, and a callback function. It executes a GET request of the URL and inserts the returned data into the DOM at a location you select. The parameters and callback function are optional. A typical usage would be something like $("address").load( url, {name:"John",id:"100"}, function(){ alert("Ajax call complete.");}).

get() takes a url, parameters, and a callback function. It executes a GET request of the URL and returns the XMLHttpRequest. The parameters and callback function are optional. A typical usage would be something like $.get( url, {name:"John",id:"100"}, function(data){ $("address").html( data ); alert("Ajax call complete.");}).

post() takes a url, parameters, and a callback function. It sends a POST request to the URL and returns the XMLHttpRequest. The parameters and callback function are optional. A typical usage would be something like $.post( url, {name:"John",id:"100"}, function(data){ $("address").html( data ); alert("Ajax call complete.");}).

ajax() takes a set of request properties specified in key-value pairs. It sends the specified request and returns the XMLHttpRequest. The ajax() method is complex but offers much more control over the request than any of the other methods. A typical usage would be something like $.ajax({ type:"GET", url:url, datatype:"html", data:{name:"John",id:"100"}, complete:function( data ) { $("address").html( data ); alert( "Ajax call complete.")}}).

Get Data From A URL

This example is taken from the jQuery Introduction posted here about a month ago. Technically, this is AJAH, since we’re not fetching XML, but the technique is the same.

We need a proxy to fetch data from another domain.

In the diagram below, you can see that the web page in your browser needs to fetch from the same domain from which it was loaded, in this case techrageo.us. From there it can go anywhere. In this example we’re fetching from Yahoo.com.

Ajax is usually limited to connections back to the same domain from which the web page was loaded. To fetch data from another domain, such as from the Yahoo quote server, we need to create a simple URL proxy. The PHP code is below. Basically it takes a URL, fetches it with curl, and returns the output.

Note: due to server restrictions, the curl_exec string below had to be tweaked to get it into this article. Just remove the spaces and you’re good to go.

<?php
// don't cache this page
header("Cache-Control: no-cache");
function geturl($url){
  $ch = curl_init();
  $timeout = 5;
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
  // make this curl_exec, no spaces
  $results = c u r l _ e x e c ($ch);
  curl_close($ch);
  return $results;
}
// get the specified url from the querystring
$theurl = $_GET["url"];
// decode it
$theurl = urldecode($theurl);
// decode forgets the ampersand
$theurl = str_replace( "&#038;", "&", $theurl );
// fetch the url
$v = geturl( $theurl );
// spit out the results
echo $v;
?>

Enter a stock ticker symbol, such as IBM or SBUX, and click Submit. When you do the span with id=”lasttrade” is loaded with data returned from geturl.php?http://finance.yahoo.com/d/quotes.csv?f=l1&s=IBM (assuming you entered IBM).

Update: Yahoo has changed their quote URLs to something like this http://download.finance.yahoo.com/d/quotes.csv?f=l1&s=IBM

Last Trade:

We’re using .load() for this simple example.

The jQuery code is below. As you can see an anonymous function is attached to the submit handler of the form with an id of stockform. The function gets the value of the input field with an id of sym, then appends it to the URL of the Yahoo csv quote server with format specified to return the last trade price. That URL is then escaped and appended to geturl.php?url=, which is a simple PHP proxy that resides here at techrageo.us. The submit handler function then returns false to prevent the browser from trying to continue submitting the form.

// wait till the DOM is loaded
$(document).ready(function() {
  // attach a submit handler to the form
  $("form#stockform").submit(function(){
    // get the ticker symbol and build URL
    var sym = $("input#sym").val();
    var yurl = "http://download.finance.yahoo.com/d/quotes.csv?f=l1&s="+sym;
        //old: "http://finance.yahoo.com/d/quotes.csv?f=l1&s="+sym;
    var furl = "geturl.php";
    // load last trade price from Yahoo and
    // stick it in the #lasttrade span
    $("span#lasttrade").load( furl, {url:escape(yurl)} );
    return false;
  });
});

Now let’s modify the example to use $.get().

jQuery’s $.get() method can be used to send a GET request. For example, the example above can be written as follows.

// wait till the DOM is loaded
$(document).ready(function() {
  // attach a submit handler to the form
  $("form#stockform").submit(function(){
    // get the ticker symbol and build URL
    var sym = $("input#sym").val();
    var yurl = "http://download.finance.yahoo.com/d/quotes.csv?f=l1&s="+sym;
        //old: "http://finance.yahoo.com/d/quotes.csv?f=l1&s="+sym;
    var furl = "/code/geturl.php";
    $.get( furl,
      {url:escape(yurl)},
      function(data){
        $("span#lasttrade").html( data );
      });
    return false;
  });
});

Now let’s modify the example to use $.ajax() for more control.

jQuery’s $.ajax() method can also be used to send a GET request. For example, the example above can be written as follows.

// wait till the DOM is loaded
$(document).ready(function() {
  // attach a submit handler to the form
  $("form#stockform").submit(function(){
    // get the ticker symbol and build URL
    var sym = $("input#sym").val();
    var yurl = "http://download.finance.yahoo.com/d/quotes.csv?f=l1&s="+sym;
        //old: "http://finance.yahoo.com/d/quotes.csv?f=l1&s="+sym;
    var furl = "/code/geturl.php";
    $.ajax({
      url:furl,
      data:{ url:escape(yurl) },
      dataType:"html",
      success:function(data){ $("span#lasttrade").html( data );},
      error:function(xhr,err,e){ alert( "Error: " + err ); }
    }); // $.ajax()
    return false;
  }); // .submit()
});

In part 2 we’ll look at POST requests and other dataTypes.

Javascript Frameworks Abound

Do we really need another Javascript framework?

There’s the Dojo Toolkit. It’s mature and includes the kitchen sink. Then there’s Prototype. It’s wildly popular and several popular UI layers are built on top of it, including script.aculo.us, Rico, and others. Of course, you can’t leave out mootools. It’s UI library, moo.fx, can also sit on top of Prototype if you so desire. There’s Y!UI, the Yahoo! User Interface library. And we’ve got ExtJs, a robust interface framework that can leverage Y!UI, Prototype, or jQuery.

jQuery

Which brings us to… jQuery. Yep, it is yet another Javascript framework (YAJF). jQuery, though, is arguably the fastest and the most elegant of the lot. It supports CSS3, browser detection, method chaining, plugins, Ajax (gotta have that to be cool), flexible selectors, and basic UI effects. All in under 20K.

Simple July 4th jQuery Demo

Okay, so by way of introduction, here’s a simple little jQuery demonstration.

Click this link to turn this article red white and blue and get the lyrics to “God Bless America,” then click again to return to normal.

God Bless America,
Land that I love.
Stand beside her, and guide her
Thru the night with a light from above.
From the mountains, to the prairies,
To the oceans, white with foam
God bless America, My home sweet home.

The code is below, and is doing this: to the anchor tag (“a”) with an id of “redwhiteblue”, toggle between two functions on each click event; the first function loops through all the paragraph elements within divs of class “entry” and assigns a css color style based on the index mod 3 (iteratively assign from an array of red, white, and blue); the second function simply assigns a css color style of black to all paragraphs within divs of class “entry”; both functions return false to short-circuit the link.

Update: The commented section below is replaced by the three lines that follow it, suggested by jQuery’s creator, John Resig (thanks, John). What I was doing with a clumsy for loop, iterating through each paragraph I selected with a cobbled-together XPath, is better done with the each method, applying a simple function along the selected vector. It goes to show just how slick the library really is.

  var rwb=Array("#f00","#aaa","#00f");
  $("a#redwhiteblue").toggle( function() {
    $("p.Godblessamerica").slideDown(300);
//    for(i=0;i<$("div#jqueryintro p").length;i++){
//      $("div#jqueryintro p:nth(" + i + ")").css({color:rwb[i % 3]});
//    } return false;
    $("div#jqueryintro p").each(function(i){
      $(this).css({color:rwb[i % 3]});
    }); return false;
  },
  function(){
    $("p.Godblessamerica").slideUp(300);
    $("div#jqueryintro p").css({color:"#000"});
    return false;
  });

More jQuery Demos

Here are a few other little demos I fiddled up along the way.

Toggle Red Demo

Click this link to toggle the following paragraph between black and red text.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis adipiscing purus eu elit. Quisque feugiat malesuada lectus. Suspendisse potenti. Donec viverra, nisi et lobortis sollicitudin, erat quam condimentum sapien, at volutpat ipsum neque tristique lorem.

   $("a.togglered").toggle(function(){
     $("p.redtarget").css({color:"#AA0000"});
   },function(){
     $("p.redtarget").css({color:"#000"});
   });

Toggle Visibility

Okay click this link to reveal a DIV with some text. Then, click again to re-hide the text.

That’s a toggle tacked onto the DIV. Here’s the code to make that happen.

  $("a.intro").click( function() {
    $("div.introtarget").toggle(100);return false;
  });

Translated into English, that means “select A tags of class intro, then handle click events by executing a function that finds divs of class introtarget and attach a toggle of speed 100 to them; then return false.”

Get Stock Quote With Ajax

Of course, jQuery supports Ajax. Here’s a simple demo that calls a PHP file that merely takes the URL passed in, fetches it, then echos the results.

The jQuery Javascript code takes the output (in this case just a number), and sticks it into the lasttrade span.

Last Trade:

  $("form#stockform").submit(function(){
    var sym = $("input#sym").val();
    var yurl = "http://finance.yahoo.com/d/quotes.csv?" +
       "f=l1&s="+sym;
    var furl = "geturl.php?url=" + escape(yurl);
    $("span#lasttrade").load( furl );
    return false;
  });

Shortest jQuery Tutorial Ever

Hey! Learn jQuery now. Here’s what you do to get your feet wet with jQuery.

1. Start with a basic HTML file.

   <html>
   <body>
     <p>Here is <a href="#" id="clickme">a link</a>.</p>
     <p class="lorem">Lorem ipsum dolor sit amet,
       consectetuer adipiscing elit.</p>
     <p>This text is here to stay.</p>
     <p class="lorem">Phasellus luctus. Suspendisse nisi
     	neque, feugiat eget, ullamcorper at, feugiat ut,
     	tellus.</p>
   </body>
   </html>

2. Link in the jQuery library. You can do this by referencing the code at code.jquery.com or by downloading jquery.js and linking to it.

   Below I’m linking to the packed version of jQuery 1.1.3.1 (the latest at the time of this update).

   <head>
     <script type="text/javascript"
       src="http://code.jquery.com/jquery-1.1.3.1.pack.js"/>
   </head>

3. Add the standard jQuery document ready state handler function. This is a pattern used for most jQuery work, wherein your jQuery code resides.

   <script>
   $(document).ready(function() {
     // your code here
   });
   </script>

4. Flesh it out with some jQuery scripting. See above for examples; the code snippets in the examples can be dropped into the ready function, provided you add the proper elements to the HTML as well.

   <script>
   $(document).ready(function() {
     $("a#clickme").click( function() {
       $("p.lorem").toggle(100);return false;
     });
   });
   </script>

Update and Wrapping Up

Since publishing this article I’ve made a few updates. First was to incorporate John Resig’s suggestion for the July 4th demo. Using each had crossed my mind but I was looking at it wrong and ended up patching an XPath together to get what I wanted.

The second update was to add some additional comments to the Shortest jQuery Tutorial Ever section.

And last, I incorporated today’s update to jQuery itself, now at version 1.1.3.1. Interestingly enough, though the tutorial had you link in version 1.1.3, I had been loading an older (pre-1.1.3) version on this site and was a little disappointed that the demos were a little sluggish. Linking to 1.1.3.1 provided a significant and very noticeable boost to performance. They said 1.1.3 was 800% faster than 1.1.2, and I mostly believed them — but come on, everyone claims they’re latest release of whatever is 800% faster. It’s like marketing boilerplate. I think they make rubber stamps that say that. But I can vouch that the latest release of jQuery is at least, technically speaking, a whole bunch faster.

Creating graphs with Adobe’s Flex 2 is a pretty simple task, just throw together some short XML and you’re done. But like most “easy” technologies things get a little more difficult when you want to do more advanced things like making sections of the graphs stand out or keeping multiple graphs in sync with one another. In this tutorial I will take you through how to give your graphs a little more “flash” and how to make things happen in one graph when you click on another graph.

If you haven’t already you can download the free Flex 2 SDK from Adobe. And you can download a free trial of the Flex 2 charting library.

In your favorite text editor (Eclipse anyone?) start a new file and start with some basic code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
  xmlns:local="*" xmlns:view="view.*">
 
<mx:Script>
  <![CDATA[
    import mx.collections.ArrayCollection;
 
    [Bindable]
    private var profitPeriods:ArrayCollection = new ArrayCollection( [
    { period: "Qtr1 2006", profit: 32 },
    { period: "Qtr2 2006", profit: 47 },
    { period: "Qtr3 2006", profit: 62 },
    { period: "Qtr4 2006", profit: 35 },
    { period: "Qtr1 2007", profit: 25 },
    { period: "Qtr2 2007", profit: 55 } ]);
  ]]>
</mx:Script>
 
  <mx:Panel x="10" y="10" width="100%" height="100%" title="Profit By Period">
 
    <mx:PieChart id="profitPie" dataProvider="{profitPeriods}" showDataTips="true" width="100%" height="100%">
      <mx:series>
        <mx:PieSeries field="profit" nameField="period" labelPosition="callout" showDataEffect="{interpolate}" />
      </mx:series>
    </mx:PieChart>
  </mx:Panel>
</mx:Application>

Getting more advanced

This code basically creates a sample dataset and a pie chart to display it. Nothing fancy and if we were using an XML feed we wouldn’t have any need for ActionScript at all, since we are only using it to create the data in this example.

Now let’s say that your customer (or boss) wants to have the data shown in multiple ways. For our example let’s say that he wants to see a pie graph, a bar graph and a data grid. So he can see the data in whatever way he wants to. No problem there, throwing another chart and grid on the page is just a few more lines of xml, but what if they are to interact? Say your boss wants to be able to click on a piece of the pie chart and have the same record highlighted in the pie chart, the column chart and the data grid. Now we’re going to have to whip out the ActionScript.

We are going to need three methods, one to highlight the pie graph, one for the column chart and a final one for the data grid. Then we can call all three of these methods whenever a chart or grid is clicked on. We are using three methods instead of just one giant method in case we ever want to use them again, in a different circumstance.

import flash.display.DisplayObject;  //The items in the column chart are DisplayObjects
 
private var prevSelectedColumn:DisplayObject;
/*
We want to be able to "unhighlight" whatever column we highlighted last time, so
we'll create a variable to keep it simple. If you are using a graph with
multiple datasets then you'll obviously want to loop through them and reset them
that way instead of using this method.
*/
 
/*
* This function will highlight a column/bar in a column/bar chart
* @param barName  The name/id of the bar/column chart
* @param barIndex The position of the column you want to highlight
*/
private function barHighlight( barName:String, barIndex:int ):void
{
  if (prevSelectedColumn)  //If we selected something before, unselect it:
  {
    prevSelectedColumn.alpha = .8;
    prevSelectedColumn.filters = [];  //remove the filters
  }
 
  //This gets the individual column that we are looking for
  prevSelectedColumn = this[barName].series[0].getChildAt( barIndex );
 
  if (prevSelectedColumn)  //highlight the new column:
  {
    prevSelectedColumn.alpha = 1;
    prevSelectedColumn.filters = [new GlowFilter(), new DropShadowFilter()];
  }
}
 
/*
* This function will highlight a row in a data grid
* @param dataGridName The name of the data grid that contains the row to highlight
* @param rowIndex   The position of the row in the grid to highlight
*/
private function rowHighlight( dataGridName:String, rowIndex:int ): void
{
  this[dataGridName].selectedIndex = rowIndex;  //the easy one...
}
 
/*
* This function "explodes" a piece of pie from a pie chart
* @param pieName  The name of the pie chart that is to be modified
* @param pieIndex The index of the pie piece that is to be modified
*/
private function pieHighlight( pieName:String, pieIndex:int ):void
{
  var explodeData:Array = [];  //create an empty array
  explodeData[ pieIndex ] = 0.15; //Set the index of our pie piece to > 0
  this[pieName].series[0].perWedgeExplodeRadius = explodeData;
  /*
  The pie's wedges can be "exploded" outward to highlight them. The amount is
  controlled by an array, so we just create a empty array (which would set
  everything to no padding) and add padding for the index that is to be
  highlighted. This has the added bonus of un-highlighting the piece that was last
  highlighted (if any). Sweet!
  */
}

Adding events

Of course, this is using inline ActionScript. If you want to separate it into another file you’ll have to use “Application.application” instead of “this” (see the downloadable GraphHighlighting.as file below). That should give us a snazzy little effect every time we click on an item in any of the charts or in the grid. But they won’t be doing any effects unless we add event handlers to our objects. Let’s do that now.

So change the xml for your pie chart and add this to the PieChart tag:

itemClick="pieChartClick(event, 'profitGrid', 'profitBar');"

And then you can add the ActionScript to handle that event (which, of course, will call our handy three functions):

/*
* This is run when the pie chart is clicked on
* @param event    The click event
* @param dataGridName The string name of the data grid that should be highlighted
* @param barName  The string name of the column chart that should be highlighted
*/
private function pieChartClick( event:ChartItemEvent, dataGridName:String, barName:String ):void
{
  pieHighlight( event.currentTarget.id , event.hitData.chartItem.index );
  rowHighlight( dataGridName, event.hitData.chartItem.index);
  barHighlight( barName, event.hitData.chartItem.index );
}

Then do this for the other chart and the datagrid and you’ll be set.

Conclusion and downloads

So, if you did your calculations correctly, remembered to carry the one and crossed your fingers you probably ended up with something like this:

Actually, it probably won’t look like that, but the sample code download does (see below).

It is more likely that you’ll probably be making the charts communicate using different data (click on one part of a chart and get detailed information in another chart), but this should at least get you started in the right direction.

Download the complete inline ActionScript example: This file is the complete example and you should be able to save it and compile it with the mxml compiler that came with the Flex 2 SDK (assuming you have the charting library, or the charting trial library).

Download the “external” ActionScript methods: This file is what you can use if you want to keep these functions in your library for future use. I put this in the FlexAS.GraphHighlighting package, so if you don’t change the package name you should put this into a “FlexAS/GraphHighlighting/” subfolder off of your main flex directory.