My solution is not enterprise and it’s not real time, but it will let me know in a reasonable amount of time (Montastic says it checks every 10 minutes or so, based on load). For me, that’s good enough right now because I mostly want to avoid overnight and weekend-long outages that may occur when I’m not checking my computer regularly.

The first step is to sign up at Montastic and set up a monitor for your web site. There’s no learning curve there … just register, type in a URL and Montastic will start monitoring right away. There’s a video screen cast available showing how easy it is to use. After setting up the monitors, Montastic provides a basic RSS feed — that’s where Yahoo! Pipes comes in.

Yahoo! Pipes Configuration for Montastic

The final step I took was to simply run the pipe, then tell Yahoo! to send me the output of the pipe to my cell phone whenever it changes. Since the pipe updates when there is a new failure item, I won’t get an SMS message every time Montastic checks the servers, but only when there is a new failure item.

I haven’t been running this solution for very long, but so far it looks to be a promising concept for keeping an eye on my servers — particularly when I’m going to be away for a while. I’d love to hear ideas about other ways to use Montastic or suggestions for other free website monitoring tools. What do you use?

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 radio button element in an HTML form can be awkward to manage in Javascript. For example, assume the following form:

<form id="radio_form">
  <fieldset>
    <label><input type="radio" name="color" value="red" checked="checked" />Red</label><br />
    <label><input type="radio" name="color" value="yellow" />Yellow</label><br />    
    <label><input type="radio" name="color" value="blue" />Blue</label><br />
    <label><input type="radio" name="color" value="purple" />Purple</label><br />
  </fieldset>
</form>

Using Javascript to determine the currently selected value of the color radio buttons typically involves looping through all of the input elements to find the checked element. As I’ve said before, if you’re looping through the DOM in jQuery, you’re probably doing it wrong.

The jQuery solution for finding the selected radio button’s value looks like this:

  var the_value;
  the_value = jQuery('#radio_form input:radio:checked').val();
  alert(the_value);

Test it for yourself (if you’re reading this in a news reader such as Google Reader, you’ll have to go to the original post to test the sample):

Setting up event tracking with the Thesis theme and jQuery is a cinch. Here’s how it breaks down:

1. Make sure jQuery is loaded
2. Update appropriate <a> tags to call trackEvent()

Since the Thesis theme provides its own hooks, the code for both of these changes is implemented with two hooks and a few lines of code.

add_action('wp_head', 'add_jquery');
add_action('thesis_hook_footer', 'custom_footer');
 
function add_jquery() {
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<?php
}
 
function custom_footer() {
?>
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('a.track-download').each(function() {
      jQuery(this).bind('click', function() {
        if (pageTracker) {
          pageTracker._trackEvent('Download', jQuery(this).attr('rel'), jQuery(this).attr('title'));
        }
      });
    });
  });
</script>
<?php
}

As you can see, I load jQuery from the Google API content delivery network. I like this method because it uses Google’s servers for delivery (not my bandwidth) and it increases the chance that the browser has already cached the jQuery code.

The actual jQuery code is a very simple method that locates all anchor tags with the class track-download and binds a new click method. The method itself simply calls the analytics method _trackEvent with the parameters:

• ‘Download’ (the category)
• the rel attribute of the anchor tag (action)
• the title attribute of the anchor (optional_label)

In the page that contains the download links, the code looks like this:

<a class="track-download" href="http://www.thewhyandthehow.com/wp-content/uploads/2009/02/building-custom-php-extensions.pdf" alt="Download Building Custom PHP Extensions PDF" rel="PDF" title="Building Custom PHP Extensions">PDF Version</a><br />
<a class="track-download" href='http://www.thewhyandthehow.com/wp-content/uploads/2009/02/building-custom-php-extensions.doc' alt="Download Building Custom PHP Extensions Word Doc" rel="DOC" title="Building Custom PHP Extensions">MS Word DOC version</a><br />
<a class="track-download" href='http://www.thewhyandthehow.com/wp-content/uploads/2009/02/building-custom-php-extensions.odt' alt="Download Building Custom PHP Extensions Open Office odt" rel="ODT" title="Building Custom PHP Extensions">Open Office ODT version</a></p>

As you can see, a very simple change to the <a> tag structure on my pages now provides me with a richer depth of analytic information. Adding new downloadable items with analytics is as easy as adding a class, a rel and a title attribute to the new anchor tag.

The screen grab here shows the event tracking overview page in Google Analytics. You can see that Google Analytics breaks down the event tracking by event by category and action (for me, that’s ‘Download’ and file type). There are sub-reports available for each action as you would expect from Google Analytics.

Notwithstanding the pathetic numbers in my example (I obviously need some marketing help), you can see that event tracking can be a valuable addition to general page view tracking for a web site if you have custom actions that can be triggered using JavaScript.