Slick vs. Sizzle: The CSS Selector Engine Battle

Javascript frameworks like MooTools and jQuery are used on most modern websites. CSS selector engines are one of the most useful and widely used features in these frameworks. Because of this, selector performance is extremely important for modern web applications.

Both MooTools and jQuery have built their own stand alone selector engines for use in their respective projects. MooTools uses the Slick selector engine and jQuery uses the Sizzle selector engine.

Surprisingly, there are very few performance comparisons out there for these two engines. Below are the results of a selector engine performance test between MooTools 1.3.2 and jQuery 1.6.2. The original code for this test came from this post and you can check out the source code on jsFiddle.

jQuery seems faster than MooTools for almost any type of selector. The one big exception is the ".note" selector, which also happens to be one of the most commonly used. Given that, the overall performance of a webapp between these two frameworks is somewhat up in the air.

Simple AJAX with jQueryUI and PHP

This will be a short tutorial on how to incorporate AJAX interaction into a PHP site using jQuery and the jQueryUI framework.

Imagine we have a page that lets users manage a list of books that is stored in a database.  We want them to be able to easily edit the books via ajax without having to go to another page. Below is an example of what we want.

Here's the database table we'll use plus a few sample books.

CREATE TABLE `books` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(30) NOT NULL,
  `genre` enum('fantasy','mystery','nonfiction') NOT NULL,
  `description` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE = InnoDB;

INSERT INTO `book` (`id`, `title`, `genre`, `description`) VALUES
(1, 'The Lord of the Rings', 'fantasy', 'The Lord of the Rings is an epic fantasy novel written by philologist and University of Oxford professor J. R. R. Tolkien (from Wikipedia).'),
(2, 'The Maltese Falcon', 'mystery', 'The Maltese Falcon is a 1930 detective novel by Dashiell Hammett, originally serialized in the magazine Black Mask (from Wikipedia).'),
(3, 'Economics in One Lesson', 'nonfiction', 'Economics in One Lesson is an introduction to free market economics written by Henry Hazlitt and published in 1946, based on Frédéric Bastiat''s essay Ce qu''on voit et ce qu''on ne voit pas (English: "What is Seen and What is Not Seen") (from Wikipedia).');

First, let's create the PHP page that pulls these books from the database and displays them to the user. Later, we'll add javascript code to this page to make the edit link use AJAX to interact with the database.

//display.php
<div class='books'>
 <?php
 //connect to database
 mysql_connect('localhost', 'mysql_user', 'mysql_password');
 mysql_select_db('dbname');

 //get all books
 $query = "SELECT * FROM books";
 $result = mysql_query($query) or die("Error selecting books");

 //display books
 while($row = mysql_fetch_assoc($result)) {
 ?>
  <div class='book' id='book_<?php echo $row['id']; ?>'>
   <a class='edit' href='#'>edit</a>
   <h3 class='title'><?php echo $row['title']; ?></h3>
   <p><em class='genre'><?php echo $row['genre']; ?></em></p>
   <p class='description'><?php echo $row['description']; ?></p>
  </div>
 <?php
 }
 ?>
</div>

The next page to create is the edit.php page that the ajax link will call.

//edit.php
<?php
//connect to database
mysql_connect('localhost', 'mysql_user', 'mysql_password');
mysql_select_db('dbname');

//pull info from $_POST and sanitize it
$id = mysql_real_escape_string($_POST['id']);
$title = mysql_real_escape_string($_POST['title']);
$genre = mysql_real_escape_string($_POST['genre']);
$description = mysql_real_escape_string($_POST['description']);

//update in database
$query = 'Update books SET title="'.$title.'", genre="'.$genre.'", description="'.$description.'" WHERE id="'.$id.'"';
mysql_query($query);

//generate json code
echo json_encode(array(
 'id'=>$id,
 'title'=>$title,
 'genre'=>$genre,
 'description'=>$description
));
?>

When the user clicks the edit link for a book, we want a dialog box to pop up with a form that lets the user edit the data. We want the form to submit to the edit.php page via AJAX. Finally, we want the page to update to reflect the changes.

To do this, we first create the html for the dialog box. The submit button will be handled by jQuery, so we don't need to add it here. This goes at the bottom of the display.php page.

<div id='edit_dialog'>
 <form action='edit.php' method='post'>
  <input type='hidden' name='id' />

  Title: 
  <input type='text' name='title' /><br />
  
  Genre:
  <select name='genre'>
   <option value='fantasy'>Fantasy</option>
   <option value='mystery'>Mystery</option>
   <option value='nonfiction'>Nonfiction</option>
  </select><br />
  
  Description:
  <textarea name='description' cols='30' rows='3'></textarea>  
 </form>
</div>

Now we add the jQuery code to the display.php page to tie everything together. This requires jQuery, jQueryUI with the dialog widget, and a jQueryUI theme to be loaded. This goes somewhere on the display.php page.

$(document).ready(function() {
 //Create dialog
 $edit_dialog = $("#edit_dialog").dialog({
  autoOpen:false, 
  title:"Edit Book", 
  modal:true, 
  buttons:[
   {text: "Submit", click: function() { $('form',$(this)).submit(); }},
   {text: "Cancel", click: function() { $(this).dialog("close"); }},
  ]
 });
 
 //Submit action for dialog form
 $("#edit_dialog form").submit(function() {
  var form = $(this);
  //post form data to form's action attribute
  $.post($(this).attr('action'), $(this).serialize(),function(data) {   
   //get DOM element of updated book
   var book = $('#book_'+data.id);
  
   //update title
   $('.title',book).html(data.title);
   
   //update genre
   $('.genre',book).html(data.genre);
   
   //update description
   $('.description',book).html(data.description);
  
   //close the dialog
   $("#edit_dialog").dialog('close');
  },'json');
  
  //stop default form submit action
  return false;
 });

 //when the edit link is clicked
 function edit_link_action() {
  //get closest book div
  var book = $(this).closest('.book');
  
  //get id from div
  var id = book.attr('id').split('_');
  id = id[id.length-1];
  
  //set id in form
  $('#edit_dialog input[name="id"]').val(id);
  
  //set current title in form
  $('#edit_dialog input[name="title"]').val($('.title',book).html());
  
  //set current genre in form
  $('#edit_dialog select[name="genre"]').val($('.genre',book).html());
  
  //set current description in form
  $('#edit_dialog textarea[name="description"]').val($('.description',book).html());
  
  //open dialog
  $edit_dialog.dialog('open');
  
  //stop default link action
  return false;
 }
 
 //attach action to edit links
 $(".edit").click(edit_link_action);
});

Once all the parts are put together, you should have a fully functioning AJAX site. Below is the complete code for the display.php page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <script type='text/javascript' src='jquery-1.4.4.min.js'></script>
 <script type='text/javascript' src='jquery-ui-1.8.9.custom.min.js'></script>
 <link rel='stylesheet' href='jquery-ui-1.8.9.custom.css' />
 <script type='text/javascript'>
  $(document).ready(function() {
   //Create dialog
   $edit_dialog = $("#edit_dialog").dialog({
    autoOpen:false, 
    title:"Edit Book", 
    modal:true, 
    buttons:[
     {text: "Submit", click: function() { $('form',$(this)).submit(); }},
     {text: "Cancel", click: function() { $(this).dialog("close"); }},
    ]
   });
   
   //Submit action for dialog form
   $("#edit_dialog form").submit(function() {
    var form = $(this);
    //post form data to form's action attribute
    $.post($(this).attr('action'), $(this).serialize(),function(data) {   
     //get DOM element of updated book
     var book = $('#book_'+data.id);
    
     //update title
     $('.title',book).html(data.title);
     
     //update genre
     $('.genre',book).html(data.genre);
     
     //update description
     $('.description',book).html(data.description);
    
     //close the dialog
     $("#edit_dialog").dialog('close');
    },'json');
    
    //stop default form submit action
    return false;
   });

   //when the edit link is clicked
   function edit_link_action() {
    //get closest book div
    var book = $(this).closest('.book');
    
    //get id from div
    var id = book.attr('id').split('_');
    id = id[id.length-1];
    
    //set id in form
    $('#edit_dialog input[name="id"]').val(id);
    
    //set current title in form
    $('#edit_dialog input[name="title"]').val($('.title',book).html());
    
    //set current genre in form
    $('#edit_dialog select[name="genre"]').val($('.genre',book).html());
    
    //set current description in form
    $('#edit_dialog textarea[name="description"]').val($('.description',book).html());
    
    //open dialog
    $edit_dialog.dialog('open');
    
    //stop default link action
    return false;
   }
   
   //attach action to edit links
   $(".edit").click(edit_link_action);
  });
 </script>
</head>
<body>
 <div class='books'>
  <?php
  //connect to database
  mysql_connect('localhost', 'mysql_user', 'mysql_password');
  mysql_select_db('dbname');

  //get all books
  $query = "SELECT * FROM books";
  $result = mysql_query($query) or die("Error selecting books");

  //display books
  while($row = mysql_fetch_assoc($result)) {
  ?>
   <div class='book' id='book_<?php echo $row['id']; ?>'>
    <a class='edit' href='#'>edit</a>
    <h3 class='title'><?php echo $row['title']; ?></h3>
    <p><em class='genre'><?php echo $row['genre']; ?></em></p>
    <p class='description'><?php echo $row['description']; ?></p>
   </div>
  <?php
  }
  ?>
 </div>
 
 <div id='edit_dialog'>
  <form action='edit.php' method='post'>
   <input type='hidden' name='id' />

   Title: 
   <input type='text' name='title' /><br />
   
   Genre:
   <select name='genre'>
    <option value='fantasy'>Fantasy</option>
    <option value='mystery'>Mystery</option>
    <option value='nonfiction'>Nonfiction</option>
   </select><br />
   
   Description:
   <textarea name='description' cols='30' rows='3'></textarea>  
  </form>
 </div>
</body>
</html>

Fixing jQuery UI Autocomplete

jQuery UI 1.8 was recently released and it included a much needed autocomplete widget. For the most part, this widget works fine, but there is an annoying bug that makes it not quite ready for a production environment. Basically, if a user clicks on an option and doesn't release the mouse button fast enough, the option is not selected. You can see the bug in action on the jQuery UI autocomplete demo.

Thankfully, there is a workaround.

Here is what we would like to be able to do:

$("#autocomplete").autocomplete({
   source: 'search.php',
   select: function(event, ui) {
      alert(ui.item.id);
   }
});

Here is the bug-fixed version I came up with:

//global variable that stores the last focused option
var search_option = false;

$("#autocomplete").autocomplete({
   source: 'search.php',
 
   //when an item is focused, store item in the global variable
   focus: function(event, ui) {
      search_option = ui.item;
   },
 
   //when an item is selected with the keyboard, trigger
   //the mouse down event for consistency
   select: function(event, ui) {
      search_option = ui.item;
      $("#autocomplete").autocomplete('widget')
      .trigger('mousedown.choose_option');
   }
})

//bind the select event to mousedown
.autocomplete('widget').bind('mousedown.choose_option',function() {
   //immediately closes autocomplete when option is selected
   $("#autocomplete").autocomplete('close');
 
   //perform desired action
   alert(search_option.id);
});

Obviously, this isn't a very elegant solution, but I didn't want to mess around with the actual autocomplete code. Hopefully, this is fixed in the next release. Until then, this will have to do.

My Experience with JQuery

I had a project recently where I needed to make an online contact management website with similar functionality to Outlook and ACT!.

I wrote all the javascript from scratch for the first version of the site. I ended up writing over 1000 lines of code to add various features, such as ajax search, autocomplete, input masking, and security.

The code was getting too complex to manage so I decided to look for an alternative. I came across several javascript libraries, including mootools and YUI. I tried each of these, but the learning curve was too steep. I would spend hours just trying to implement a simple feature. This ended up being worse than my custom code.

The next library I tried was jQuery. At first this looked just as bad as the others, but after fooling around with it for a few hours, I fell in love. The language is very simple to understand. It all consists of a single $() function that replaces and improves document.getElementById(). Here are some examples.

//Select the element with id "test"
$("#test")
//Select elements with a class of "style1"
$(".style1")
//Select all <p> and <blockquote> tags
$("p, blockquote")
//Select all input fields inside of a form
$("form input")

Most selections that works in CSS work with the $() function. All jQuery functions start with a selection like this. Different functions are chained together after this to perform tasks. For example:

//Change the color of all <p> tags to red and 
//add the word "hello" to the end of each.
$("p").css('color','red').append('hello');

In the previous example, this paragraph would turn into:

In the previous example, this paragraph would turn into:hello

The built-in functions can acomplish a lot, but the real power of jQuery comes from the plugins. jQuery is one of the few frameworks that completely supports 3rd part plugins. Some common ones add things like tabs, accordions, autocomplete, tooltips, rich text editing, and so on.

All you need to use one of these plugins is to include the script. Here's an example using the tooltips plugin.

<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='jquery.tooltips.js'></script>
<script type='text/javascript'>
//Add a tooltip to every element with class 'tooltip'
$(".tooltip").tooltip();

//Add a tooltip with custom options
$(".custom").tooltip({ 
    track: true, //follow the mouse
    delay: 0, //show tooltip instantly
    fade: 250 //fade tooltip out
});
</script>

Here's a list of the plugins I used for my contact management site:

• Meio Mask - This conforms entered input to a specified format or "mask". For example, if you enter a phone number, no matter how you enter it, it will always look like "(123) 456 - 7890". I used this to standardize entered data and to make searching easier.
• Tooltip - This plugin lets you add tooltips to any element. They can be anywhere from simple text to advanced layouts with images. I used this on any icons to provide a nice user interface.
• Autocomplete - Provides an easy way to add autocomplete fields to your site. I used this for my ajax search and to suggest city and country names to reduce misspellings and standardize data.
• Editable Combo Box - This lets you type your own value in a select box. I used this along with some server side scripting to allow users to easily add options to drop down menus.
• Date Picker - This creates pop-up calendars for entering dates. I used this on all my date fields to provide an alternate way to enter data.
• Tabs - This creates an element with tabs containing different content. I used this to fit more information in a single place.

The uncompressed jQuery framework with these plugins is close to 200kb. This is a little much to load for every page. Luckily, there are ways to reduce the size by more than half. The easiest way is to use the Javascript Minifier. This removes all comments and unnecessary spaces and linefeeds.