When I started my new job, I had to make the transition from YUI to jQuery. I’d seen some jQuery code before (in fact, its terseness and use of $ as both an object and a function were easy to spot), but I wasn’t familiar with it. I actually thought that the query part of jQuery meant there was some kind of Standard Query Language interface. There isn’t, but there is a really cool CSS3 selector instead.

Turns out, I was a little disappointed; I wanted to use something query-based. So, I started to throw this script together. I call it JSQL. Below are some quick examples of what it looks like in action:

<br /> var results = JSQL(’SELECT * FROM #ft WHERE nodeName = “LI”);<br />

JSQL always returns an object with an error property that’s either Boolean false or a String stating what error occurred (for example, “Unknown command UPDAT3″). If it successfully retrieves or operates on elements, it returns a count:Number property with the number of elements and an elements:Array property with those elements.

Here are some interactive examples:

Example 1: Checkboxes

<br /> JSQL(’UPDATE #jsql-example-1 SET checked = true WHERE type = “checkbox”‘);<br />

Set Checked

<br /> JSQL(’UPDATE #jsql-example-1 SET checked = false WHERE type = “checkbox”‘);<br />

Uncheck

Example 2: Form Validation

<br /> JSQL(’UPDATE #jsql-example-2 SET parentNode.className = “error” WHERE value = “”‘);<br />

Highlight empty fields

<br /> JSQL(’UPDATE #jsql-example-2 SET parentNode.className = “” WHERE value = “”‘);<br />

Reset

Example 3: Removing Elements

<br /> JSQL(’DELETE FROM #jsql-example-3 WHERE nodeName = “STRONG”‘);<br />

Remove strong tags

In the spirit of jQuery, I also stuck in a quick each method which you can use to iterate through the returned elements immediately instead of setting up your own loop. The context is the current element (like jQuery) and the return value is still the same:

Example 4: Selecting Elements

<br /> JSQL(”SELECT * FROM #jsql-example-4 WHERE nodeName = ‘EM’”).each(function() {<br /> this.style.background = ‘#ffff00′;<br /> });<br />

Select & Operate

<br /> JSQL(”SELECT * FROM #jsql-example-4 WHERE nodeName = ‘EM’”).each(function() {<br /> this.style.background = ”;<br /> });<br />

Undo

I started coding this several months ago, and just recently decided to revisit it. I found the code hard to read myself when making some modifications before publishing it here. That typically means it’s poorly written. And I’m admittedly lousy at writing parsing code… so there’s that. I also doubt it’s realistic for any real-world websites (other libraries handle those jobs quite well), but I thought it would be fun to play with.

Some noticeable features lacking are equivalents to ALTER and INSERT INTO. I’ve also got it up on GitHub, so feel free to fork it, and maybe add those methods yourself!

• [Download jsql.js] (11k)
• [Download jsql-min.js] (3,661 bytes)

Say you’ve got a fancy user interface. You’re leveraging AJAX well, you’re making good use of best practices, and you’ve got fast servers that respond quickly.
But your user actions still aren’t quite as fast as you’d like. What else can you do?

If you’ve done things correctly, you’ve got a user interface that reacts positively to successful flows, but will also handle errors gracefully.
Even though you’re “doing it right,” consider restructuring your application: assume success. Normally, your server is up and running and operations
will be completely successfully. The edge case (hopefully) is the error case. Assuming this, we can create a slightly faster user interface.

Let’s begin with a basic voting mechanism. You’ve got a control on your page that lets a user vote on an object, and a small bit of text to represent the state of said control.
It may look something like this:

This example is meant to be easy and functional; hopefully your controls are prettier.
Regardless, here’s a common flow for this request and its callback states:

1. Listen for the click event on the control.
2. Send the request.
3. Display a “loading” message or a typical spinner image.
4. If the call comes back successfully, provide “success” feedback to the user and update the control.
5. If the call throws an error, provide an error message.

This flow is extremely common in today’s web. But we want something more immediately responsive, so let’s restructure the flow:

1. Use onmousedown because it will fire off just slightly sooner than onclick would.
   (This might not suit all user interfaces but in this case it’s fine, and it wins us a few milliseconds.)
2. Provide “success” feedback to the user and update the control.
3. Send the request.
4. If the call throws an error, reset the controls and provide an error message.

This structure might seem a little off. Indeed, the error case even “lies” to the user for a few milliseconds if the request fails.
But it covers all of its bases; none of the previous flow is omitted.
Keep in mind that the error case is the edge case, and a very large majority of the time it’s fine to assume success at first.

Using jQuery, here’s what the code might look like:

<br /> // Attach the mousedown event listener<br /> $(’#snappier-1-btn’).mousedown(function(e) {</p> <p> var el = $(this);</p> <p> // Go ahead and assume things went smoothly<br /> el.attr(’disabled’, true);<br /> el.next().html(’Voted!’);</p> <p> // Send the XHR<br /> $.ajax({<br /> error : function() {</p> <p> // Undo the success message and allow the user to repeat<br /> el.attr(’disabled’, false);<br /> el.next().html(”You haven’t voted yet”);</p> <p> // Let the user know what happened<br /> alert(”Sorry, an error occurred! Please try again.”);</p> <p> },<br /> type : ‘GET’,<br /> url : ‘/feed/’<br /> });</p> <p>});<br />

And here’s this flow working right here on the page: