Webmonkey » Ajax

Beautify Broken Links With Catch404

Michael Calore — Wed, 21 Jul 2010 22:47:41 +0000

The 404 error is one of the bitter realities of the web.

“The page you’ve requested does not exist.” So cold and unforgiving. Unlike a bad database connection or an unresponsive server, the 404 Page Not Found error has a finality to it — this link is dead and it’s never coming back.

But now we have Catch404 by Addy Osmani, a jQuery plug in that handles broken links with style. Deploy Catch404 on your site, and instead of seeing a page reporting a broken link, the user is presented with an Ajax modal window (also called a hop-up, or a lightbox) informing them the linked page isn’t there. The windows also offers some alternate destinations they might want to check out.

We’ve been trying to make 404s go down a little easier for years now. The custom 404 page is a popular solution. It’s available on just about every web CMS out there. You can do it yourself, too. Browsers are also taking it upon themselves to beautify the broken link with custom pages, offering suggestions or inviting users to search for the page using a built-in search box.

Catch404 takes both of those ideas — the custom alert and the suggestions of what to do next — and places them into the user experience before the link is even loaded. The plugin, which requires the jQuery framework, sends the link off to Yahoo’s YQL engine to check to make sure it’s alive. It only performs this check for external URLs; local URLs don’t require the check. The check is performed behind the scenes, using an Ajax request. If all is good, the user goes about his or her way. If the check results in a 404, the user sees the modal window.

Here’s a demo.

You’ll notice one obvious downside, which is that your users will have to wait an extra half-second or so while the YQL call completes. So why use it?

When a user is browsing your site and clicks on a link you’ve provided, then sees a 404 error, it’s your problem whether you’re responsible or not. Linking to dead pages makes you look like a sloppy curator, and the user will place some, if not all, of the blame for that error on you. Catch404 is more helpful than an impersonal error.

If the speed hit from the cross-site link checking bothers you, consider adding Catch404 only to legacy content — those years-old pages filled with links that may or may not still be alive.

Activating Catch404 is simply a matter of assigning a class to the link, so you can invoke it only where it makes sense.

[via Delicious]

See Also:

Beautiful Websites: Slippy for Presentations

Michael Calore — Thu, 03 Jun 2010 19:47:44 +0000

Jordi Boggiano has created Slippy, a lightweight library for building animated, browser-based slideshow presentations. Slippy is very simple — check out a short demo and view the source code. Grab the code from github.

It’s written in HTML and it uses JQuery for the interactions (touch the space bar, use the arrow keys, or click the mouse to go to the next slide). It also uses Syntax Highlighter, a bit of JavaScript that pretties up snippets of code — we use Syntax Highlighter for tutorials here on Webmonkey — so it’s especially useful for presentations where you’re showing code examples. Jordi points out that Slippy can run your scripts in pretty alert() boxes (rather than the standard, boring browser alerts) to show your examples in action.

Composing a presentation is simple. Just hack a basic HTML file. Each slide is in its own

, and all the markup beyond that is standard HTML. Bravo!

See Also:

Ajax for Beginners

Webmonkey Staff — Wed, 17 Feb 2010 01:45:47 +0000

JavaScript has had the XMLHttpRequest object for almost a decade now, but it really only started getting wide attention in 2004. All this attention was mostly due to some showoff web applications that made every developer who saw them think, “I want my site to do that!” But it also has to do with the spiffy, spiffy name given to it by the folks at AdaptivePath, who named this asynchronized application Ajax. Maybe you’ve heard of it?

A few high-profile Google applications in particular made a splash with Ajax: Maps and Gmail were first. It also powers some of the core functionality in the user interface of the ever-so-popular photo sharing site Flickr. By now, Ajax has become integral to the fabric of the web, especially in the era of real-time applications like Twitter, Buzz and Wave (all of which use Ajax extensively in their webapp front ends, for the record). Ajax may also lay claim to being the first JavaScript object with its own fan website. Date.com doesn’t count, although I did have a scintillating chat with a lady there once about the getTimeZoneoffset method.

What is Ajax?

So what is this fancy object that everybody wants a piece of? In brief, it’s a solution to one of the big annoyances of web interfaces. Generally, the user inputs some data or makes a choice, and clicks a button that sends the data to the server. The server takes a look at the data and sends back a whole new web page, which is loaded into the browser. Reloading a page every time you want to do something is annoying, disjunctive and time-consuming for the user. XMLHttpRequest moves that browser-server interaction to behind the scenes, so the user can just keep on playing with the same page, even while elements on the page are talking to the server! Go take a look at Google Suggest if I’ve lost you — it’s a nice, eloquent example of this.

JavaScript has always been able to sneakily trigger a server-side script without anything happening in the browser by using a few classic tricks. This one, for example:onSubmit='runascript = new Image(); runascript.src="http://www.wired.com/images/archiveyscript.php?" + this.value'. That sort of chicanery is good, maybe, for caching form data to a file on the server, but it doesn’t return any information to the JavaScript that calls it, so its usefulness is limited. Ajax, on the other hand, can get a full parcel of data back from the script it calls. Hence the “XML” part of the name – which really is just there for looks, kind of like the “Java” part of JavaScript, because the returned data can be plain text or whatever you like, if XML is overkill or just not your cup of tea.

This opens up millions of exciting possibilities. Every form submission, every JavaScript event, and heaven knows what else, can now interact with server-side databases and processing power. Data retrieval, password authentication, image generation – you name it, Ajax can trigger it.

Making Your Own

The potential of Ajax-enhanced web apps is limited only by your imagination – and by browser support. Mozilla-based browsers can do it, and Safari, and newer versions of Explorer, and Opera 8 but not Opera 7. It’s best to incorporate a fallback way of doing things for users who aren’t as cutting edge as you’d like them to be. Also, Explorer does things somewhat differently (of course) from all the other browsers, so it’s necessary to fork the code to account for the irritating little 80-odd percent of the population who use IE.

Let’s build a simple application that accepts input from the user, passes it to some PHP on the server that checks it against a database, and returns the result to the browser. It comes in three parts. First, we need an HTML form. This you’ve seen before:



 

 Report

    



 Welcome, student. Please enter your essay here:

Note that, for users without support for our script (named xhr.js), the form will just submit to the fallback page at fallbackpage.php.

Next comes the JavaScript. This is the exciting part, so we’ll take it slow.

 function grade(essay) {

First, we initialize the object. We have to do it two ways, for different browsers.

    // Mozilla version

    if (window.XMLHttpRequest) {

        xhr = new XMLHttpRequest();

    }

    // IE version

    else if (window.ActiveXObject) {

        xhr = new ActiveXObject("Microsoft.XMLHTTP");

    }

Then, we escape the user input to make it URL-safe:

    essay=encodeURIComponent(essay);

and use the open method of the object to open a connection to the PHP script:

    xhr.open("POST","grade.php");

The method requires two arguments:first, the HTTP method (GET or POST); second, the URL of the script.

A quick HTTP header prepares the script for what it’s getting, and then the send method transmits the actual request:

 xhr.setRequestHeader(

      'Content-Type',

      'application/x-www-form-urlencoded; charset=UTF-8'); xhr.send(essay);

This last step isn’t necessary for GET requests, wherein all the data can be contained in the query string of the URL.

Getting Results

Now we’re ready to see if the HTTP request worked. The readyState property counts up from zero during the request, and shows 4 when the server page has loaded successfully.

 xhr.onreadystatechange=function() {

      if (xhr.readyState==4) {

If the request worked, then we can get the output of the server-side script by querying the responseText property, which contains a string. For more complex server script output, a responseXML property, which can hold a full document object of XML data, is also available.

      grade = xhr.responseText;

      alert ("Nice essay. Your grade is " + grade);

    }

    return false;

 }

Want to see all that in a pastable block? Here it is in a separate file.

Finally, the third component is the PHP script, which lives on the server and waits patiently for the JavaScript to pass it some juicy data. This example uses PHP, but any language you like — Ruby, Perl, C, ASP — can do as well. The core of this example script is a natural-language function called grade_essay() that grades student essays from 1 to 100, but I will redact that part to conserve space.

The php://input grabs the POST data, which gets put into a string, decoded and passed to the ingenious grading algorithm. The algorithm returns a numeric grade. Lastly, we just output the grade with echo – ordinarily, this would display in the browser, but since the PHP script is running “behind the scenes,” the string output is simply returned to the JavaScript that called it. If you need structured data, an XML document would be output with an echo statement in just the same way, but the content-type of the output page must be set to text/xml.

What the user sees is this:She types her essay into the text area in the browser, clicks Submit, and within instants an alert box pops up giving her a final grade on the essay. Invisibly, the essay has been sent to the server, read and evaluated by a team of PHP gnomes, and returned with a grade, without ever reloading the page. The user can modify her essay and resubmit it endlessly.

And that’s the gist of the almost magical XMLHttpRequest object! The example is simple, but the uses of the object can be elaborately, multifariously clever. If you need further inspiration and edification, a burgeoning number of examples are dotted around the Web:

Ajax-powered start pages like iGoogle, Pageflakes and Netvibes

Social news site Digg

Movie rentals site Netflix

But what data you send and receive with Ajax is up to you.

Build Ajax Components With Spry

Webmonkey Staff — Tue, 16 Feb 2010 01:45:47 +0000

Apparently, the pro-developer guiding principles of Macromedia continue to survive under the direction of Adobe. Ever since they acquired Macromedia, Adobe, the company that was previously all about PDFs and PSDs, has been releasing a healthy serving of web tools via Adobe Labs. The Adobe Labs site is quickly becoming a vital meeting place on the web where developers can share ideas and experiment with new technologies.

Adobe’s Flash-meets-Ajax framework lets developers create dynamic interfaces and UI elements. Now they’ve unveiled a preview release of their new Ajax framework, Spry.

In this article, I’ll walk you through making a very simple Spry application. I hesitate to even call it an application, because most of the heavy lifting is done in the framework itself. The code we’ll be writing will look an awful lot like HTML and CSS.

Before we get to examples, let’s look at what Spry is and how it compares to the many other Ajax frameworks out there. If you’d like to know a little more about Ajax, read my article about how to build an Ajax dropdown menu.

What is Spry?

In Adobe’s own words, Spry is “a JavaScript library for web designers that provides functionality that allows designers to build pages that provide a richer experience for their users.” That doubles as a pretty good definition of Ajax, too. To provide a richer user experience, we retrieve fewer entire pages from the server. Instead, Spry and other Ajax frameworks let us insert just the content we need into the current web page. This eliminates full page refreshes and greatly increases browser responsiveness. Spry also offers event and transition effects.

Since Spry is focused on designers and not programmers, it uses special tags inside the HTML. The code looks more like what designers and developers see than hard-core scripters. Web pages end up looking a lot like templates, with content holding places kept by special curly brackets like this: {thingname}. This is the same style used in server-side templating engines.

What does Spry do differently?

Unlike Smarty and its ilk, Spry does not require a hefty programming language, special server software, or an over-paid coder. Instead, the framework reads in XML files with JavaScript. Its built-in functions can also dynamically load single items from the XML file and apply the same CSS already declared in your stylesheet.

As I mentioned before, there are plenty of Ajax frameworks to choose from. Other popular choices include Dojo, Prototype, Yahoo User Interface Library, and Google Web toolkit. These other frameworks are more programming-centric. Spry stuffs most of the JavaScript away in a couple include files. At its very basic level, you only need one simple line of JavaScript to tell Spry which XML files to load.

Your JavaScript knowledge can be next to nil and you can still use Spry. Plus, you won’t have to change the way you code up your pages. If you use Dreamweaver, then using Spry should be as easy as writing simple HTML. And if you’re a hand-coder, there’s no need to move to an editor.

Drawbacks to Spry

Many quickly scolded Adobe for using custom attributes to fill in Spry pages with data. If you need pages to pass XHTML validators, Spry isn’t for you. Similarly, if accessibility is important, the pre-release version of Spry will cause all sorts of headaches. Both of these issues seem to be on Adobe’s radar. Keep in mind this is a very early release, so Adobe wants your feedback. I expect we’ll see many changes in later versions of Spry.

Programmers might not like how much Spry does for them. With a few additions to normal HTML, Spry will not only load data from an XML file, but also respond to user clicks and hovers. This could be a little too “auto-magic” to someone who wants to control the technical aspects of a site. This drawback to super-coders will empower designers.

Lastly, Adobe says Spry works with “all modern browsers.” You should be fine with IE6+, Mozilla-based browsers (such as Firefox) and Safari among others. If you’re looking to support older browsers like Netscape 4 or IE 5, you probably should forego all Ajax frameworks.

Now, if Spry is for you, let’s look at a simple example. We’ll load in an XML file and react to user clicks. All without ever leaving a single web page.

Give Spry a Try

As we’ve seen, Adobe’s pre-release of Spry provides an easy way for designers to dynamically load content onto a page from an XML file. All you have to do is include a couple JavaScript files and write one simple line of code to tell Spry where to find your XML. Then, a few custom attributes can be inserted into any HTML elements.

For our example, I’ve altered one of Adobe’s samples: the Spry Product Demo. For our demo, we’ll use an XML feed of Webmonkey’s latest articles. See the raw feed. And check out the working demo.

Click on a story name, and you’ll see its description appear on the right. Though there are only three stories, we could add as many as we want. Our code would still show all of the story names on the left and a description of the first (or the selected story) to the right.

There are three important tasks that the code accomplishes:

Include the Spry code and choose a data source
List the story names
Show the description of the selected story

The fist step is to plug in Spry code and point to a data source:

The Spry code is in the file SpryData.js. Before that, we also include xpath.js because Spry needs XPath to lookup specific items from our XML file. XPath is a simple way, used by other XML-related technologies like XSL, to retrieve data in a way that mimics Unix paths.

The Spry.Data.XMLDataSet loads our data source. As an argument, the function receives an XML file and an XPath. The path we give it, stories/story, tells XPath to look at the root level (named stories) and find every story below it.

This is all the JavaScript you need to write to get the functionality of the demo.

Next, we list the story names:



 



 {name}

Here, we have an unordered list within a single list item. In the attributes to the ul tag, we’ve identified the spryregion (set to the name of our DataSet, dsStories) and told Spry to repeat through that DataSet with spryrepeatchildren="dsStories".

Then, inside the list item, we set CSS classes for spryhover and spryselect. This allows us to use our normal stylesheet to determine how to show our list items when they are hovered over and selected. Also inside the list item, we set the onclick event (a standard JavaScript event) to set the current row. Spry will loop through and create a list item for each of the stories in our XML file. So, each

tag will have an onclick event that tells Spry which item we have selected.

If you have Firefox, you can highlight our list of stories, right-click (Ctrl-click for the fellow Macheads with one-button mouses), and choose “View Selection Source.” This will show the code as it looks after Spry has created all the three list items. You’ll also notice that between the starting and ending

tag is a story name. This is created by the template code, {name}.

Finally, we show the description of the selected story:



 {name}



 {desc}



 Read this article.

This code simply shows the detail of the selected item. If nothing is selected, it shows the first item in the list. This logic is all determined by Spry, which is informed of the selected story from our onclick events.

The rest of driven by the template code, which displays the {name}, {desc} (description), and {storylink} (the URL of the story).

The biggest job that Spry does is grab the data from the XML file and place it on the page with limited direction from us. The CSS we loaded from a separate stylesheet determines how our page looks, including the connecting blue boxes.

Adobe has limited the amount of JavaScript we have to write and, therefore, there is little programming crowding in on our HTML code. The juicy stuff goes on behind the scenes. Even the browser-specific code (for example, IE usually won’t listen to hover styles on non-links) is stuck away where we don’t have to worry about it.

Of course, there is only so much that can be done with Spry in its current state, though Adobe has a pretty impressive demo section. Remember, this is a pre-release version of Spry. Expect Adobe to make significant improvements, such as the addition of user interface elements. This is similar to the way that the Yahoo UI Library blossomed.

If you’re looking for a challenge, there are still a number of ways to improve upon the demo we created. Try adding a few more stories to the XML file and see them automatically incorporated into the stories list. Add more elements to each story (such as a date field or thumbnail image), or do something with the unused category element in our current XML feed.

And if you’re feeling really spry, dig into the DataSet documentation to see what else you can do.

Whatever you create with Spry, let us know!

Did you love this article? Did you hate it? Think you can do better? Send us your Feedback. Feedback submitted here will be considered for publication on Webmonkey or Wired News, so if you don’t want us to print your comments, please say so in your email.

Build an Ajax Dropdown Menu

Webmonkey Staff — Tue, 16 Feb 2010 01:45:47 +0000

If you hang out with designers and developers at all, then you’ve probably heard the term “Ajax” by now. It’s the official buzzword of Web 2.0. But it’s also an extremely useful web development technique.

In the course of this tutorial, we’re going to look at what Ajax can do. Then we’ll use a JavaScript class to simplify your first steps toward the ultimate in speedy user interactivity.

First, what is Ajax? It stands for Asynchronous JavaScript And XML. In simple speak, Ajax allows us to use JavaScript to grab an XML file (or any other text) without reloading the whole web page.

Ajax has been used for a lot of things, but it is most impressive when many small updates are needed in a short period. Think streaming stock quotes or draggable maps.

In our example, we’ll use a pair of dropdown menu boxes (SELECT tags in HTML). A selection in the first box affects our list of choices in the second box. It’s not exactly cutting edge (Thau did something similar using JavaScript), but it’s a proof of concept.

Before we get started, here’s the stuff you’ll want in your toolbag:

1. A love of extremely basic HTML.

2. Willingness to consult Thau’s Javascript Tutorial if you get confused.

3. “Http“, a caching XmlHttpRequest wrapper, which you can download to immediately make your life simpler. Plus, if you get into advanced Ajax programming, you may like the caching that is built into this Javascript class.

But that’s the future. Let’s talk about now, alright? Ajax on three. One, two, three… Ajax!

Before we do any JavaScript Ajax voodoo, let’s setup our HTML.

Here we have created an HTML form containing two dropdown menus. The dropdowns use the SELECT tag, which can contain several options.

The first dropdown has four options: Select country, France, Germany, and Spain. Notice the onChange part of this dropdown:

onChange="handleOnChange(this);"

This will become important later.

The second dropdown has only one option: Select head of government.

What we want to accomplish with our Ajax call is to get the three most recent heads of government for each country and load them into the second dropdown whenever the user changes the first dropdown.

Sounds simple enough, but how are you on recent European presidents and chancellors? One great thing about Ajax is that we can grab content only when we need it. So, we’ll connect ourselves to some sort of feed that will give us the head of government for a particular country when we need it.

For the purpose of this example, our feed will be plain text files stored in the same directory as our web page. So, copy the following lines to their own text files.

France.txt:

Valéry Giscard d'Estaing|François Mitterrand|Jacques Chirac

Germany.txt:

|Helmut Kohl|Gerhard Schröder|Angela Merke

Spain.txt:

|Felipe González Márquez|José María Aznar López|José Luis Rodríguez Zapatero

Notice how the lines contain names separated by vertical lines? Those lines are called “pipes,” and the pipe symbol has its own keystroke on your keyboard. Just hold Shift and look for the backslash (). So, the plan of attack is that whenever Germany is selected (for example), we’ll make an Ajax call to retrieve Germany.txt, get rid of those pipes, and put the names in the second dropdown box.

Now that we’re ready for the Ajax voodoo, let’s get to the nitty gritty on the next page.

Packin’ boxes

If you haven’t downloaded request.js, the Ajax wrapper Javascript class, grab it now and put it in the same directory as the web page with the two dropdowns.

Now, find this line in your document:

And replace it with these lines:

Now that’s a big chunk of code.

This line reads in the Ajax wrapper class that does the heavy lifting:

The handleOnChange function is called whenever the first dropdown is changed. Remember how I said that onChange stuff would be important?

Lastly, the fillPrez function takes the output from the Ajax call and puts the names into the second dropdown.

Let’s look through it a little closer.

This sequence of Javascript looks through the first dropdown, finds which one is selected, and returns the country name into a variable named, appropriately, country:

var idx = dd1.selectedIndex;

var val = dd1[idx].text;

var par = document.forms["frmSelect"];

var parelmts = par.elements;

var prezsel = parelmts["prez"];

var country = val;

Then, if an actual country is selected, an Ajax call is made for the name of the country with .txt at the end. We supply our other function, fillPrez, to be the “callback” function. Whatever comes out of our Ajax call, we want it to go to fillPrez.

if (country != "Select country")

  {

   var directory = ""+document.location;

   directory = directory.substr(0, directory.lastIndexOf('/'));



   Http.get({

		url: "./" +  country + ".txt",

		callback: fillPrez,

		cache: Http.Cache.Get

	}, [prezsel]);

}

We also pass along our second dropdown box, so that fillPrez will know which dropdown to fill.

The first thing that happens in fillPrez is that we make sure that our Ajax call actually found the list of heads of government:

if (xmlreply.status == Http.Status.OK)

If it didn’t, we let the user know there’s an error:

alert("Cannot handle the Ajax call.");

If we’re good to go, then we grab the list of names and split it apart on those pipes:

var prezresponse = xmlreply.responseText;

var prezar = prezresponse.split("|");

We clear out the second dropdown, except for the first option (“Select head of government”):

prezelmt.length = 1;

Then we add each of the names into the dropdown:

prezelmt.length = prezar.length;

    for (o=1; o < prezar.length; o++)

    {

      prezelmt[o].text = prezar[o];

}

You have now successfully created an Ajax call. Your Javascript code made a connection to your server, grabbed a text file, split apart the names in the file, and plopped the resulting data right into your dropdown box.

See it in action and download the code at my website.

There are a number of ways you could expand this code. A few examples:

1. When someone chooses a head of government, you could redirect the user to the politician’s web page.

2. You could show information about the head of government and their time in office. Extra points for using Ajax to grab the selected politician’s bio.

3. You could also give up on the heads of government idea and instead fill the second dropdown with cities, states or provinces. Or maybe you could show fast food chain locations.

You get the idea. There are a plethora of possibilities.

Now, if you aren’t impressed since Thau did this in 1998 and he didn’t need no Ajax, remember this is a proof of concept. Rather than a text file, consider setting up a more dynamic feed using PHP and MySQL.

And if you really want to get more into the back end of providing data to Ajax calls, consider Paul’s article Ajax It’s Good For What Rails You.

Building With Ajax and Rails

Webmonkey Staff — Tue, 16 Feb 2010 01:45:47 +0000

So, since the last time you brushed your teeth, Ruby on Rails has only grown in popularity. The list of web applications using the exciting new web framework has grown to such an enormous size, it has exceeded the 50K per page limit of the wiki used to host it. Lesser languages like Java and PHP are copying the stylish efficiency of Rails with their own frameworks like Trails, Trax and Cake.

In the tutorial Ruby on Rails for Beginners, we went over the very basic basics of Ruby and Rails:what it is, why it’s so mindblowingly cool, which celebrities are using it, and so forth. As soon as the article went live, letters flooded in, offering me book contracts, movie deals and exotic snacks — I haven’t gotten so much attention since my Ajax for Beginners article. In fact, this poll from the redoubtable Lifehacker.com says that Ruby on Rails and Ajax are among the two most popular things in the world, and plainly it pays to follow the trends, so what if we combined the two of them? No, that would be excessive. You don’t want to read about that. You do? Hmmmm, OK, I suppose we can take a quick look.

You Got Ajax In My Rails
Adding Prototype.js
Form Of:A Form!
Moving Onward

You Got Ajax In My Rails

Let me just refresh my memory a little. Ajax (it seems like everyone’s calling it that now rather than my spiffy coinage, “XHR”) is the handy JavaScript technique that allows the browser to communicate with the server without reloading the current page, to do things like validate or save form input, refresh images and heaven knows what else.

In the Ajax for Beginners article, we created those client-side dynamic functions by typing in a bunch of code by hand, but that goes against the make-it-quick-and-easy methodology of Rails. Instead, there are some pleasurably easy, automated ways to incorporate Ajax into a Rails-driven site. Rails ships with the Prototype JavaScript library, which provides a nice high-level toolkit for working with Ajax functions, and with Script.aculo.us, which builds additional bells and whistles onto Prototype. These two can be downloaded separately and used in non-Rails projects as well.

Adding Prototype.js

Let’s revisit the example site from the Ruby on Rails for Beginners article. Maybe you’ve still got a copy of it lying around on your web server, or maybe you’d like to create it again from scratch. I’ll wait here.

You’ll notice that the public/javascripts directory contains a file called “prototype.js” — that’s our friend Prototype! There isn’t much documentation for it, but if you read JavaScript fluently you can look at the file and see the basic methods it defines. In order to use the methods, first and foremost we need to activate them. That can be done one Ruby block at a time or for a whole page; let’s choose the latter. In the rHTML file that contains the page layout, namely app/views/layouts/bookmarks.rhtml, insert the line

<%= javascript_include_tag :defaults %>

right before the closing /head¢ tag.

Then we can get right down to creating our Ajax snazz. In our last session, we looked at HTTP links that used the Ruby function link_to(). Remember that? They looked like this (an example from app/views/bookmarks/list.rhtml):

 <%= link_to 'Destroy', {:action => 'destroy', :id => bookmark}, :confirm => "Are you sure?" %>

Well, link_to() has a buddy called link_to_remote(). It works in a similar fashion, except it takes an additional parameter, besides the name of the link and the action or URL it points to:a DOM element ID. The Ajax action will place any content it retrieves from the server into that element. So, if we wanted to rewrite our function above, so we could delete a bookmark from our list without reloading the whole page, we’d say:

<%= link_to_remote 'Destroy', {:action => 'ajaxdestroy', :id => list, :update => 'bookmarks'}, :confirm => "Are you sure?" %>

Notice the :update parameter – that’s the one that’s new. Now, when we click the Destroy link, it calls the ajaxdestroy action to delete the bookmark in question from the database, but instead of a page reload in the browser, the server will do the work behind the scenes and just return a new bookmark listing, which will be placed in the list DOM object. That DOM object corresponds to the list of bookmarks on the page. Now, that xhrdestroy action doesn’t exist yet. We have to create it, in app/controllers/bookmarks_controller.rb:


 def ajaxdestroy



  Bookmark.find(@params[:id]).destroy



  render :partial => "bookmarks"



 end

The first line does the deleting:it looks at the @params array sent by the browser, which contains the ID of the bookmark to be deleted; finds the corresponding row in the database; and destroys it. Simple enough, I hope. The second line returns the response, using the very handy render() method. This method can be used to create and send a “partial,” or chunk of a web page, which it does here:the rendered list of bookmarks is returned and displayed without a full reload. It’d be wise to include fallback options for browsers that don’t support Ajax, but I leave that to you, my intelligent reader.

Form Of:A Form!

In our Ajax for Beginners lesson, we wrote a PHP/JavaScript function that would automatically grade essays and return the numeric grade in an alert window. To do the same with Rails, we’d use a method called form_remote_tag(), which submits a form to a server-side handler via XMLHTTPRequest. This is an Ajax version of the more familiar form_tag().


 <%= form_remote_tag(:url => {:action => 'grade'}, :update



 => result) %>



        Enter your essay here:



        <%= text_area_tag "essay" %>



        <%= submit_tag "What's my grade?" %>



        Result:



        <%= text_field_tag "result" %>



      <%= end_form_tag %>

The user types their little essay into the text area created by text_area_tag. The form content is submitted to the controller action “grade,” which we will define in a minute. That action grades the essay and sends a numeric grade back to the form, which displays it in the “result” text field — all without reloading the page. (I know, it’s less and less thrilling every time I say that. Still a little cool though, right?) The grading action, which lives in the app/controllers directory, looks like this. Feel free to substitute your own more-rigorous, essay-grading algorithm:




 def grade



  puts params[:essay].strip.squeeze.split(/s/).size



 end

OK, that “grading” function really just does a word count, using Ruby’s redoubtable string methods. I’ve used it to grade my students’ papers though and it seems to work just fine.

puts is the Ruby equivalent of echo or print. Ruby, unlike some languages you may know, doesn’t need values to be explicitly returned from its methods. Instead, the final output of the method is automatically returned to the method’s caller. params is the array containing the entire submitted form, params[:essay] is the essay, strip removes leading and trailing white space, squeeze removes multiple repeating characters so double spaces aren’t counted twice, split breaks the string at every remaining space into an array, and size returns the number of elements in that array, i.e. the word count.

Moving Onward

Those two methods give you plenty to work with, Ajax-on-Rails-wise (“Rajax”? Would that catch on, you think?) There are a dozen or so more, though, documented here. observe_field and observe_form create event handlers that make Ajax calls when a field changes. Very handy for autocompletion. draggable_element makes a DOM object draggable. It can then be dropped on an element specified with drop_receiving_element. For flashier stuff, you can check out some of the demos at script.aculo.us.

Now that it’s so easy to create snazzy Ajaxy database-driven websites, the next step is for some of you to go out there and actually make good ones. I look forward to clicking your buttons and dragging your elements!

Ajax Essay Grader

Webmonkey Staff — Tue, 16 Feb 2010 01:45:47 +0000

This automatic essay grader is a simple example of an Ajax (XMLHttprequest) interaction from Paul Adams’ Ajax for Beginners tutorial on Webmonkey.

function grade(essay) {



	// Mozilla version



	if (window.XMLHttpRequest) {



		xhr = new XMLHttpRequest();



	}



	// IE version



	else if (window.ActiveXObject) {



		xhr = new ActiveXObject("Microsoft.XMLHTTP");



	}



	essay=encodeURIComponent(essay);



	xhr.open("POST","grade.php");



	xhr.setRequestHeader(



		'Content-Type',



		'application/x-www-form-urlencoded; charset=UTF-8');



	xhr.send(essay);



	xhr.onreadystatechange=function() {



		if (xhr.readyState==4) {



			grade = xhr.responseText;



			alert ("Nice essay. Your grade is " + grade);



		}



	}



	return false;



}

Ajax Drop-down Menu

Webmonkey Staff — Tue, 16 Feb 2010 01:45:47 +0000

This code, which was written by Adam Duvander, will create a simple Ajax drop-down menu.

First, the JavaScript. Copy this code and save is as request.js

/*

	XmlHttpRequest Wrapper

	Version 1.2.2

	29 Jul 2005

	adamv.com/dev/

*/



var Http = {

	ReadyState: {

		Uninitialized: 0,

		Loading: 1,

		Loaded:2,

		Interactive:3,

		Complete: 4

	},



	Status: {

		OK: 200,



		Created: 201,

		Accepted: 202,

		NoContent: 204,



		BadRequest: 400,

		Forbidden: 403,

		NotFound: 404,

		Gone: 410,



		ServerError: 500

	},



	Cache: {

		Get: 1,

		GetCache: 2,

		GetNoCache: 3,

		FromCache: 4

	},



	Method: {Get: "GET", Post: "POST", Put: "PUT", Delete: "DELETE"},



	enabled: false,

	logging: false,

	_get: null,	// Reference to the XmlHttpRequest object

	_cache: new Object(),



	Init: function(){

		Http._get = Http._getXmlHttp()

		Http.enabled = (Http._get != null)

		Http.logging = (window.Logging != null);

	},



	_getXmlHttp: function(){

	/*@cc_on @*//*@if (@_jscript_version >= 5)

		try { return new ActiveXObject("Msxml2.XMLHTTP"); }

		catch (e) {}

		try { return new ActiveXObject("Microsoft.XMLHTTP"); }

		catch (e) {}

	@end @*/

		try { return new XMLHttpRequest();}

		catch (e) {}



		return null;

	},



/*

	Params:

		url: The URL to request. Required.

		cache: Cache control. Defaults to Cache.Get.

		callback: onreadystatechange function, called when request is completed. Optional.

		method: HTTP method. Defaults to Method.Get.

*/

	get: function(params, callback_args){

		if (!Http.enabled) throw "Http: XmlHttpRequest not available.";



		var url = params.url;

		if (!url) throw "Http: A URL must be specified";



		var cache = params.cache || Http.Cache.Get;

		var method = params.method || Http.Method.Get;

		var callback = params.callback;



		if ((cache == Http.Cache.FromCache) || (cache == Http.Cache.GetCache))

		{

			var in_cache = Http.from_cache(url, callback, callback_args)



			if (Http.logging){

				Logging.log(["Http: URL in cache: " + in_cache]);

			}



			if (in_cache || (cache == Http.Cache.FromCache)) return in_cache;

		}



		if (cache == Http.Cache.GetNoCache)

		{

			var sep = (-1 < url.indexOf("?")) ? "&" : "?"

			url = url + sep + "__=" + encodeURIComponent((new Date()).getTime());

		}



		// Only one request at a time, please

		if ((Http._get.readyState != Http.ReadyState.Uninitialized) &&

			(Http._get.readyState != Http.ReadyState.Complete)){

			this._get.abort();



			if (Http.logging){

				Logging.log(["Http: Aborted request in progress."]);

			}

		}



		Http._get.open(method, url, true);



		Http._get.onreadystatechange =  function() {

			if (Http._get.readyState != Http.ReadyState.Complete) return;



			if (Http.logging){

				Logging.log(["Http: Returned, status: " + Http._get.status]);

			}



			if ((cache == Http.Cache.GetCache) && (Http._get.status == Http.Status.OK)){

				Http._cache[url] = Http._get.responseText;

			}



			if (callback_args == null) callback_args = new Array();



			var cb_params = new Array();

			cb_params.push(Http._get);

			for(var i=0;i|Valery Giscard d'Estaing|Francois Mitterrand|Jacques Chirac

Save this one as Germany.txt

|Helmut Kohl|Gerhard Schroder|Angela Merke

And save this one as Spain.txt

|Felipe Gonzalez Marquez|Jose Maria Aznar Lopez|Jose Luis Rodriguez Zapatero

Finally, the HTML to tie it all together. Copy and paste this code and save it as an HTML document, then place all five files into the same directory and run the HTML file in your browser to see it work.

Google Ajax Search

Webmonkey Staff — Mon, 15 Feb 2010 20:45:47 +0000

Here is some code you can use to add Google’s search functionality to your website. You can add both a standard Google search box that will search the web at large (the first example) or a site-specific search box that will search only pages within a specific URL (the second example). If you want to restrict searches to your own site, use the second example and provide your site’s URL as the searchable domain.

You’ll need an API key from Google. They are freely available for non-commercial applications.

General Google Search:









		My GAjax Search

Site Specific Google Search:








	

		My GAjax Site Search

JQuery Celebrates 4 Years on the Web With New Release

Scott Gilbertson — Tue, 19 Jan 2010 11:46:26 +0000

Popular Ajax library jQuery is celebrating its fourth birthday with a major new release — JQuery 1.4.

JQuery has long had a devoted following among interface designers. Proponents tout its speed and lightweight structure which make it easy to integrate complex effects with only a few lines of code. Google, Microsoft, Amazon and independent web developers everywhere have turned to jQuery to handle Ajax, JavaScript animations and other hallmarks of the modern web.

The latest version of jQuery boasts some impressive speed gains and represents a ground up refactoring of much of jQuery’s underlying code. According the jQuery’s developers this release is significantly faster across browsers and eliminates much of the redundancy in jQuery’s internal functions.

Other nice changes in this release include support for HTML5 elements in serialization calls, the ability to test for specific rendering engines (for example, target WebKit with jQuery.browser.webkit) and support for per-property easing in your animations.

For full details on everything that’s new, check out the jQuery blog post and be sure to look over the backwards-incompatible changes before you attempt to upgrade any of your jQuery projects.

As always you can grab both the minified and full source versions of jQuery from the download page or simply include the Google hosted version in your projects by including the URL, http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js, in your projects.

See Also:

Webmonkey » Ajax

Beautify Broken Links With Catch404

Beautiful Websites: Slippy for Presentations

Ajax for Beginners

What is Ajax?

Making Your Own

Getting Results

Build Ajax Components With Spry

Give Spry a Try

Build an Ajax Dropdown Menu

Packin’ boxes

Building With Ajax and Rails

Contents

You Got Ajax In My Rails

Adding Prototype.js

Form Of:A Form!

Moving Onward

Ajax Essay Grader

Ajax Drop-down Menu

Google Ajax Search

JQuery Celebrates 4 Years on the Web With New Release