Fortunately Komodo also provides a simple method for creating extensions within the IDE itself, so I gave it a try. Within a few hours I was able to build an extension to do exactly what I needed and configure it on a per-project basis. I’ve made the extension available as an MIT-licensed, open-source project. As always, this project is included on the open source tools page.

For my own sites, I’ve noticed occasional slowdowns while loading Google Analytics. While the analytics are important to me, they’re not important to you (my readers) and if waiting for a component to load causes a bad experience on the site, you assume it’s just a bad site.

Fortunately there is (as always) a jQuery option to help mitigate this problem. I found one solution called the jQuery Google Analyics plugin that does much more than just defer the loading of Google Analytics, but the key feature I was looking for was the deferral. This plugin appears to be a good solution to the problem and if you study the source code, you’ll see that making your own deferred Google Analytics loader shouldn’t be too hard.

I haven’t tried it yet, but it looks like the code will be something like this:

function load_and_track_ga() {
  var account_id = 'UA-XXX-XXX';
  var host = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  var src = host + 'google-analytics.com/ga.js';
    $.getScript(src, function() {
      if (typeof _gat != undefined) {
        pageTracker = _gat._getTracker(account_id);
        pageTracker._trackPageview();
      }
      else {
        throw "_gat is undefined";
      }
    });
  }
}

What are your thoughts? Have you tried this or something like it? Does it improve your site performance?

As with all things jQuery, there is very little required. Just set up a form, add a quick call to jQuery and you’re done. By default, when the datepicker is bound to an edit input, all that is required is to click on the edit (or tab into it) and the calendar control will appear.

<form>
  <fieldset>
    <label>Select a date: <input type="text" id="the_date" name="the_date" /></label>
  </fieldset>
</form>
 
<script type="text/javascript">
  jQuery('#the_date').datepicker();
</script>

Here it is in action (click on the input field):

Personally, I like a little more visual indication on date fields. Providing a calendar icon to the right of the input field has become a de facto standard on the web, so I’ll show how simple it is to add that to a jQuery UI datepicker.

<form>
  <fieldset>
    <label>Select a date: <input type="text" id="the_date" name="the_date" /></label>
  </fieldset>
</form>
 
<script type="text/javascript">
  jQuery('#the_date').datepicker({showOn: 'both', buttonImage: '/wp-content/themes/thesis/custom/images/ical.png', buttonImageOnly: true});
</script>

As you can see, I added a small set of options to the datepicker() method. The showOn option indicates to show the calendar when the button is clicked and when the control has focus. The buttonImage option is the URL to the image and the buttonImageOnly option indicates to display the image alone, not as part of an actual button control. Visit the jQuery UI site for more datepicker control options.

Here it is with the calendar button (download the button image here):

The jQuery UI datepicker provides a great deal of flexibility and control with a minimum required effort. Check it out for yourself!

I really didn’t want to set up a special server for the data and build a database and the connector PHP for retrieving the data via Ajax because that’s a lot of work. The great news is that Google provides a direct solution via Google docs.

To start, I simply created a new spreadsheet and entered the data. Next, using the share button, I selected publish as web page. Finally, to get the data in a format that I can easily consume using Javascript, I clicked the more publishing options link on the publish page to generate the URL to download a CSV version of the spreadsheet.

Within minutes, I had created a Javascript-accessible data store that it easy to update, shareable and hosted via Google. To access the data in the spreadsheet, I now use the URL provided by the sharing dialogs, http://spreadsheets.google.com/pub?key=rocYeX7smxw1E2FFdhwsiiQ&output=csv&gid=0.

Now with just a little bit of jQuery, I can easily access the data in the spreadsheet and use it however I like. For example:

<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery.post('proxy.php', 
                    {uri: 'http://spreadsheets.google.com/pub?key=rocYeX7smxw1E2FFdhwsiiQ&output=csv&gid=0'}, 
                    function(resp){
                      do_somthing_with(resp);
                    });
  });
</script>

Obviously, the do_somthing_with function above would be able to do anything with the result data. Also, notice that I’m using a content proxy (example only) to retrieve the data. For more details about that, read my post about building a simple content proxy in PHP. Below I have written a simple example that retrieves the data and displays it in the following container. The code for the example is identical to the above with the exception of displaying the results.

As you can see, using Google documents as a data store can be a valuable addition to your web site implementation. The advantages include easy, sharable access to updating the data, always-on access to the data, and multiple formats for retrieving the data. Several features supported by Google docs publishing such as filtering and querying data and retrieving JSON results have not be covered here.

For security reasons, Ajax requests are only allowed to domains from which the code originates. For example, if your site is at example.com, and your Javascript is served from that domain, you may only use Ajax to make HTTP requests to the same domain, example.com. If you want to retrieve data from other web services such as financial information or weather from Yahoo!, you cannot make a direct Ajax request to yahoo.com, but you can make a request to a content proxy on example.com that gets the data from Yahoo! and returns it for you.

A very simple content proxy in PHP is implemented (using curl) like this:

/**
* perform a remote connection request and return the results
* 
* @param string uri of remote resource
* @param int timeout in seconds
* @param int connection timeout in seconds
* 
* @return string data returned from uri or null
*/
public function remote_load($uri, $timeout = 10, $connect_timeout = 3) {
  $curl_handle = curl_init();
  curl_setopt($curl_handle, CURLOPT_USERAGENT, 'example.com');
  curl_setopt($curl_handle, CURLOPT_URL, $uri);
  curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, $connect_timeout);
  curl_setopt($curl_handle, CURLOPT_TIMEOUT, $timeout);
  curl_setopt($curl_handle, CURLOPT_FOLLOWLOCATION, 1);
 
  $buffer   = curl_exec($curl_handle);
  $curlinfo = curl_getinfo($curl_handle);
 
  curl_close($curl_handle);
 
  if (($curlinfo['http_code'] < 400) && ($curlinfo['http_code'] != 0)) {
    return $buffer;
  }
 
  return null;
}

The above code would be included in a simple page such as:

<?php
  include_once('the_function_above');
 
  // you really should check for and handle errors
  print(remote_load($_GET['uri']));
?>

If the above page is called proxy.php on your site, then you can now make Ajax requests that look like:

jQuery.get('http://www.example.com/proxy.php?uri=http://www.google.com/',
  function(result) {
    do_something_with_result(result);
  });

There are several considerations to make when developing a content proxy that haven’t been shown here. The first two that come to mind are security and caching. Requests to third-party services should be cached locally on your server to ensure that your application doesn’t make too many requests and potentially become blacklisted by the third-party service. Additionally, if you build a content proxy, you should ensure that only requests from your approved callers are satisfied. You don’t want other sites making proxy requests through your servers for many reasons.

The proxy shown above may be used as a starting point for a more secure and robust content proxy, though, and will be the basis for some of my upcoming Ajax articles.

To set up a basic tabbed layout, start with an enclosing container followed immediately by an unordered list containing the tabs and then the containers for the actual tab content. For example:

<div id="example_tabs">
  <ul>
    <li><a href="#example_tab_1">Tab 1</a></li>
    <li><a href="#example_tab_2">Tab 1</a></li>
    <li><a href="#example_tab_3">Tab 1</a></li>
  </ul>
  <div id="example_tab_1">
    <p>Content for tab 1</p>
  </div>
  <div id="example_tab_2">
    <p>Content for tab 2</p>
  </div>
  <div id="example_tab_3">
    <p>Content for tab 3</p>
  </div>
</div>
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('#example_tabs').tabs();
  });
</script>

And here’s the result:

Obvious styling issues notwithstanding, I can’t imagine an easier way to build a tabbed interface for a web page. As always, read the manual for more information and enjoy!

Autocompletion of web-based forms has become so common that it has reached the point of being an expectation. Fortunately (again), there is a jQuery solution that makes this a simple addition to any form.

The first step is to download the jQuery Autocomplete plugin and check out the documentation. Make sure that you include the script and the CSS file, then build your form as normal and add a single call to the autocomplete plugin.

<form>
  <fieldset>
    <label>Type in your favorite color: <input type="text" id="color_input" /></label>
  </fieldset>
</form>
<script type="text/javascript">
  jQuery('#color_input').autocomplete(['black', 'white', 'red', 'green', 'blue', 'yellow', 'purple', 'brown', 'silver', 'magenta', 'cyan', 'gold', 'goldenrod']);
</script>

As you can see, the example above uses a simple Javascript array as the input to the autocomplete method. This implies a local, static list of lookup items. Here is the example:

Now, if you want to make things really interesting, take the above idea and tie it together with an Ajax lookup. That way, the suggested items can be any list that pertains to the specific user and action related to the input. For example, the input box may be a list of counties for a specific state in the US. It may be a list of friends from a social network. It may be a book title or author from Amazon.

The basic code for an Ajax-based lookup is the same, but the parameter to the autocomplete function is a string URL instead of an array of items.

<form>
  <fieldset>
    <label>Type in your favorite color: <input type="text" id="color_input" /></label>
  </fieldset>
</form>
<script type="text/javascript">
  jQuery('#color_input').autocomplete('/relative/path/to/script');
</script>

The path to the script file can be either a relative or absolute URL. When the autocomplete function calls your custom script, it passes two parameters, q and limit. The q parameter is the value that the end-user has typed into the box and the limit is the number of items to return. See the jQuery autocomplete documentation for more details.

For this example, I have written a very simple PHP script that shows how this might work on a typical web site. In the example, I use the Geonames service to lookup place names based on what is being typed. The PHP script looks like this:

  include_once('custom_functions.php');
  $query = array_key_exists('q', $_GET) ? $_GET['q'] : '';
 
  $url = 'http://ws.geonames.org/search?q=' . $query . '&maxRows=10&type=json';
  $result = Helpers::remoteLoad($url, 10, 3, 3, 1, 'geoname-' . md5($url), 20);
  $result = json_decode($result);
 
  $output_items = array();
  foreach ($result->geonames as $item) {
    $output_items[] = $item->name;
  }
 
  print(implode("\n", $output_items));

I haven’t included the full include file source, but obviously there is a class which does remote URL loading. This portion is not important to the example. The relevant information is that the script looks up a list of place names by calling out to the remote service and then prints a carriage-return delimited list of names.

The autocomplete plug-in takes care of all the rest. Here is the resulting form. For example, type in London or New York to see how it works:

There are many other options to the autocomplete plugin that you should explore on the documentation page, however you can see how quickly and simply a basic autocomplete field can be created using the defaults.

For example, you might display a list of items in a shopping cart with a delete link for each. On delete, the item is removed from the current session’s cart (the Ajax portion) and the item is also removed from the display. In some cases the approach might be to perform the Ajax data update and return the entire list as the result of the call, thus performing the entire two-step process at once. For my recent implementation, I didn’t want to regenerate the list on the hosting server each time, so I opted for the two-step process.

In the process, I learned a new jQuery method and selector option that are so cool that I had to share. The HTML for my list looked something like the following:

<ul>
  <li>
    <img ...>
    <dl>
      <dt>Title</dt>
      <dd>Some additional meta data</dd>
      <dd><a href="updateDB(); ???; return false;">delete</a></dd>
    </dl>
  </li>
  <li>
    <img ...>
    <dl>
      <dt>Title</dt>
      <dd>Some additional meta data</dd>
      <dd><a href="updateDB(); ???; return false;">delete</a></dd>
    </dl>
  </li>
  <!-- more list items in the same format -->
</ul>

The containers inside the list items provide all of the layout (via CSS), so they’re necessary to make everything look right. The click handler for the delete link calls updateDB which is the Ajax function that performs the actual server update. In place of the ??? I added the following code which removes the entire list item from the view:

  jQuery(this).parents('li:eq(0)').fadeOut();

The parents() method returns all of the parents of an element that match the selector. Simply calling parents(’li’) for the anchor tag in the example above may have worked, but if the list happened to be embedded within another list, it’s possible that I would have inadvertently removed a series of parent items instead of just the immediate parent that I wanted. To ensure that I only acted on the immediate parent, I included the basic filter, eq(0) to the selector to ensure that the subsequent calls (fadeOut) only act on the first item found.

The final code looks like this:

<ul>
  <li>
    <img ...>
    <dl>
      <dt>Title</dt>
      <dd>Some additional meta data</dd>
      <dd><a href="updateDB(); jQuery(this).parents('li:eq(0)').fadeOut(); return false;">delete</a></dd>
    </dl>
  </li>
  <!-- more list items in the same format -->
</ul>

jQuery again solves the cumbersome process of traversing the DOM searching for parent elements manually by providing rich electors, methods and filters.

The Javascript method works well, but it’s a little inconvenient when I’m copying and pasting several addresses, the JS code and the resulting geolocations in one session. Today I was doing this again and it struck me how convenient it would be to have a browser button that would do what the Javascript does. So I set that up.

In Firefox, I simply added a custom bookmark to my Bookmarks toolbar (View, Toolbars, Bookmark Toolbars). To do this, assuming the Bookmark toolbar is visible, right click (or control click for Mac users) on it and select New Bookmark. In the properties box, enter this Javascript into the location field:

javascript:void(prompt('',gApplication.getMap().getCenter()));

Now you have a button that will display the latitude and longitude of the current map (on the Google maps site) in a convenient Javascript prompt box. Like I said, this isn’t going to change your life, but it might save you a few cycles … and that’s worth something.

jQuery and jQuery UI provide an overlay-based approach to solving this problem that is both visually appealing and functionally complete. And, as with all things jQuery, it is very simple to implement.

Click here to see the popup (unless you’re reading this in a news reader, then you’ll need to view the post on site).

This sample is very simple to code in HTML and jQuery. Basically I provide a hidden DIV element containing the message to display and then initiate the dialog on page load. The link for the popup is also shown:

<div id="dialog" title="Example dialog">
	<p>Some text that you want to display to the user.</p>
</div>
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#dialog").dialog({
      bgiframe: true, autoOpen: false, height: 100, modal: true
    });
  });
</script>
<a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Click here to see the popup</a>

There are many more options describe on the jQuery UI dialog pages. One of the reasons that I prefer the jQuery UI dialog to any of the other overlay dialog/tooltip solutions is that the jQuery UI version is so easy to implement and has very good defaults. By default the dialog is draggable, sizeable and includes the appropriate control element for closing the dialog. Surprisingly many other solutions don’t have these features by default.

*Footnote: Yes, IE does have a modal popup window option, I know. It’s extremely non-standard and only supported in IE, so it’s not a reasonable solution in most cases.