Unobtrusive JavaScript with jQuery

Simon Willison, 6th May 2008

Links and resources from a three hour tutorial presented at XTech 2008.

SlideShare | View | Upload your own

Download PDF: xtech-unobtrusive-jquery.pdf (3 MB)

Tools:

Demos:

  1. Sidenote popup in JavaScript
  2. Sidenote popup with jQuery
  3. Restaurant map with microformats (accompanying article)
  4. labels.js with jQuery
  5. Inline form help
  6. Head shaking login box

Copy and paste demos:

  1. Ajax enhanced sidenotes

    Paste the following code in to Firebug on the sidenote popup page.

    var $ = jQuery;
    $('a.sidenote').unbind().one('click', function() {
        $('<p />').load(this.href).appendTo(document.body);
        // Make the link stop being a link
        $(this).replaceWith($(this).contents());
        return false;
    });
    var loading = $(
       '<img alt="loading" src="http://simonwillison.net/static/2008/loading.gif" />'
    ).appendTo(document.body).hide()
    loading.ajaxStart(function() { $(this).show() });
    loading.ajaxStop(function() { $(this).hide() });
            
  2. XTech Atom feed news box

    Paste the following code in to Firebug on the XTech schedule page.

    var $ = jQuery;
    var signup = $('div#en_sidebar div#signup.rhsbox'); 
    var news_box = $('<div id="news_feed" class="rhsbox"></div>'); 
    news_box.html(signup.html()); 
    news_box.find('div.box').empty(); 
    var ul = $('<ul />'); 
    var feed_url = jQuery('link[type=application/atom+xml]').attr('href'); 
    jQuery.get(feed_url, function(xml) { 
      var feed = jQuery(xml); 
      feed.find('feed entry').each(function() { 
        var title = $(this).find('title').text(); 
        var link = $(this).find('link').attr('href'); 
        var li = $('<li><a href="' + link + '">' + title + '</a></li>'); 
        li.appendTo(ul); 
      }); 
    }); 
    ul.css('text-align', 'left').appendTo(news_box.find('div.box')); 
    news_box.insertBefore(signup);