Tag Archives: AJAX

jQuery: JavaScript That Doesn’t Suck

I hate JavaScript. I mean I really hate JavaScript. Dealing with different implementations of the DOM between browsers is a menace I couldn’t duplicate if I tried. I’ve tried JS libraries from Mootools, script.aculo.us, and so on until recently.

I knew jQuery existed, but I didn’t realize how powerful the language was until recently. When I realized I could select and manipulate DOM elements with CSS selectors then I was off to the races! I love how it’s tailored for designers who already understand that syntax. There is no more getElementById(“search”) or other garbage, because I can write this.

$("search").show();

Now, that is elegant! The only thing more impressive then the way it does selectors is how extensive the API is. Not only is extensive, but it is actually understandable. It’s the perfect balance between extensibility and ease of use. It’s like adding Mootools and script.aculo.us together with better DOM selectors.

Toggle Goodness

I love JavaScript toggles and its variations. It’s much more elegant that simply changing an element from display “none” to “block.” jQuery comes with an easy way to toggle elements, and I recently did something like this at work. 

$(".click").click(function() {
        $(".toggle").slideToggle("fast");
	return false;
});

Ajax With jQuery

jQuery doesn’t stop there. Doing Ajax is simpler than it seems it should be. Here’s a function that onclick will do a GET via Ajax and return a message notifying the user that the request was successful.

$(".ajax").click(function() {
	$.ajax({
    		type: "GET",
    		url: "load.html",
    		dataType: "script"
		})
	$(".successmsg").ajaxSuccess(function(evt, request, settings){
    	        $(this).append("<p>Successful Request!</p>");
	});
});

What if I want to append content into the DOM? Difficult right? Not so much.

$(".append").append("Append some text");

jQuery Plugins

The cool thing for all those effects that jQuery doesn’t provide out-of-the-box then it provides a rich API for users to develop plugins on top of jQuery. For instance, my portfolio utilizes the Coda-Slider jQuery plugin.

At work I was tasked to create some DHTML menus which I believe is a usability nightmare and an IA mistake, but alas I had to. I wanted to maximize the usability, and I found Superfish which is “Suckerfish on ‘roids.” I was able to make sexy menus that had plugins on top of the plugin including the hoverIntent jQuery plugin which is smart enough to know whether you really want the menu or if you’re just trying to move around the page.

Additional Resources

Well, that’s just scratching the surface of what jQuery can do! While learning more about it I’ve found several sites that have helped me.

Tutorials/Blogs
jQuery Plugins
API Documentation
IDE Integration

Leave a reply

De-Mystifying AJAX

I remember when I first learned of AJAX, and I remember thinking: “I’ll never figure that out.” Well, remember when you never thought you’d learn how to remove the underline on your links with CSS? That proved easier than we thought (we later found out that CSS is an amazingly powerful presentation language). We need to cut through the needless language and get to the meat of AJAX. We don’t need to worry about what the XMLHttpRequest object is at this point. Often designers only need to know enough to duplicate an effect and not the nitty-gritty.

What Is AJAX?

I feel as though a clarification needs to be made. JavaScript effects are sometimes confused to be AJAX. If we toggle an element it is an JS effect, but it is not AJAX (although they can be used together). For an example, the popular website Digg uses both. When you show “buried comments” that is a JS toggle and not AJAX, but when you “digg” a story that is AJAX. AJAX is simply processing a request to the server “asychronously” or “at the same time” as viewing the rest of the page (which saves us a full page refresh).

JavaScript Frameworks

There are many good JavaScript frameworks that have an AJAX function built-in. The most notable are mootools, script.acolo.us, and jQuery. All are viable options, but for this tutorial I will utilize the mootools framework.

Processing A Form w/AJAX

This tutorial covers how to process form inputs with AJAX requests. I also decided that I wanted to return a message to the user upon successful submission. The included ZIP file includes all the necessary code, but I will paste it here to walk you through it. First, we need to include the mootools framework.

Framework Include (in the head)

<script src="js/mootools.js" type="text/javascript"></script>

Form Code

The following code is a simple form with three fields (first/last name, RSVP). Notice the “action” is insert.php; the AJAX must process an external page. The “id” is used to connect the JS function with the form, and the “method” is post. Notice also that the onClick event (on the submit button) is what invokes the function.


<form action="insert.php" id="myForm" method="post"> First Name:
<input name="firstname" type="text" /> Last Name:
<input name="lastname" type="text" /> RSVP: <select name="rsvp"> <option>Select</option> <option value="Accept">Accept</option> <option value="Regret">Regret</option> </select> <input value="Submit" onclick="sendForm()" type="button" /></form>

sendForm() Function (for the AJAX Call)

This is our function that must go right after the form itself. The update option is what will be populated on return from the AJAX call (it will be returned in the PHP file). Be sure to replace the text for the db user name, password, and name.

<script type="text/javascript">  function sendForm(){  new Ajax(\'insert.php\',{postBody:$(\'myForm\'), update: \'container\'}).request(); }  </script>

PHP Insert

This opens our connection the database. Replace the connection parameters with your own (username/password/db name). The last echo statement will be what is returned and filled in the “container” div to let our user know that their request was submitted.

$con = mysql_connect("localhost","<dbusername>","<dbpassword>");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}</dbpassword></dbusername>

mysql_select_db("<dbname>", $con);</dbname>

$sql="INSERT INTO RSVP (firstname, lastname, rsvp)
VALUES
('$_POST[firstname]','$_POST[lastname]','$_POST[rsvp]')";

if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}

echo "Thank You $firstname For Your RSVP!";

mysql_close($con)
?&gt;

Updated DIV

So, after processing the form it should return in the container div: “Thank You [FIRST NAME] For Your RSVP!” Feel free to add some JS effects to make it even prettier!

Download Tutorial Code

13 Replies