Alfa Jango Blog Engineering, Software, and Entrepreneurship

Just 6 weeks after the announcement of v0.4, I’m pleased to announce the release of Remotipart v1.0. With this release, AJAX file uploads in Rails 3.0 and 3.1 (building off the standard jquery-ujs driver) are as easy as humanly conceivable. This was possible thanks to a large push from Adam Kerr.

The two major changes for v1.0 are:

• New jQuery 1.6 iframe-transport instead of dependency on form.js
• New rack middleware does away with configuration

With the release of v1.0, the new officially maintained repo for Remotipart has moved from here to the JangoSteve fork on Github.

There is also now a more robust test suite. Read more about that in the Remotipart docs.

New jQuery iframe-transport

Previously, the process of submitting files via an ad-hoc iframe element and inserting the response back into the page (described here) was done by the form.js. For those who aren’t familiar, form.js is an awesome plugin that does a lot of really useful things. However, we weren’t really doing it justice by requiring it as a dependency for only one small part of its capabilities.

(more…)

In my last article, we discussed the difficulties of file-uploads via AJAX, and how the iFrame method works around the issues to provide an AJAX-like interface for uploading files to the server.

So how does this relate to Rails?

Rails 3 uses Unobtrusive JavaScript for remote links and forms (and comes packaged with the jquery-ujs driver via the jquery-rails gem as of Rails 3.1!). However, because jquery-ujs relies on jQuery’s standard .ajax() function, it is incapable of doing AJAX file uploads.

The Remotipart gem

Remotipart to the rescue! The Remotipart gem does two things:

(more…)

In my last article, Rails jQuery UJS: Now Interactive, I talked about my push to make Rails jQuery UJS (aka jquery-ujs) more interactive and easier to customize and extend with third-party plugins. Along those same goals, let’s discuss another recent change: ajax:aborted hooks.

There are now two scenarios where remote forms will not be submitted, and the AJAX submission will instead be aborted. When this happens, jquery-ujs now publishes hooks, to which we can bind handler functions to gracefully handle these situations.

Let’s take a look at each of these scenarios and how we can utilize the event hooks.

Required fields

(more…)

The Rails jQuery UJS adapter (aka jquery-ujs) has undergone some major renovations over the past few weeks. This particular change is one I’m very excited about, as I’ve been wanting to do this for a while. Without further ado, jquery-ujs is now Interactive^TM.

What do I mean by “interactive”? Well, we can now plug into every facet of jquery-ujs, binding to custom events, and even customizing internal functions, without hacking or monkey-patching the rails.js file itself.

We’ll start with a brief explanation of the change and then dive into a few examples.

Feel free to bypass my blabbering and check out the the commit.

Closure style

Previously, rails.js was one big closure.

Before:

This closure design had many advantages. However, the biggest advantage, in this case, happened to be the biggest disadvantage as well: everything inside was self-contained and inaccessible by the outside world.

So, what if we like most of what jquery-ujs does for us, but just want to modify one little function? Before, we’d have to open rails.js in our editor and start hacking away. But no more!

Object literal style

(more…)

A common issue that comes up in the GitHub Issues for the Rails jQuery UJS and the Remotipart gem / jQuery plugin goes like this:

The JavaScript response from my js.erb is being interpreted as text and not being executed.

I usually point to this comment in GitHub Issues, which I posted the first time I came across this problem. But GitHub Issue comments are difficult to link to, and almost useless in search results due to all their ajaxy-ness. So, I’ll repost and explain here for future reference.

(more…)

Continued from Rails 3 Remote Links and Forms: A Definitive Guide.

Since writing the Rails 3 Remote Links & Forms Definitive Guide, one question keeps coming up:

How can we make our remote links and forms retrieve JS.ERB, instead of an HTML partial?

In the last article, we requested an HTML partial to be inserted into the page by our AJAX callbacks. But what if we want JavaScript to be executed? Or JSON or XML to be parsed? Or plain text to be displayed?

Spoiler Alert: this article concludes with a complete working example using js.erb.

Equal parts Rails & jQuery

First, we must understand the :remote => true process in Rails 3. It’s equal parts Rails and jQuery magic. But don’t worry, it’s very little magic, bundled into a 4-step process:

1. Rails tells jQuery, “Hey, bind your ajaxy goodness to this sweet little link/form,” with the :remote => true option.
2. jQuery hi-jacks the element’s click/submit event and binds it to the .ajax() method. Now that element submits via AJAX instead of loading a new page in the browser.
3. Rails receives the AJAX web request when the element is clicked/submitted and responds with some content.
4. jQuery receives the response content with the .ajax() method that hi-jacked our element, and provides callbacks for us to handle the response in the page.

In this article, we’re exploring the different ways we can specify the format of the AJAX response and handle it accordingly, which actually spans all 4 steps above.

(more…)

There is an easy way to track all jQuery AJAX requests in an application. This method could really be used to log our AJAX requests however we wish, but this particular example will log requests to Google Analytics.

The code

This code will automatically log all jQuery AJAX requests in our application, including those using $.ajax(), $.get(), or $.post() (and .load() too).

This will also work for any jQuery plugins using AJAX requests (e.g. lightbox plugins, etc.), as well as for all Rails 3 remote links and forms (provided we’re using the jQuery UJS driver).

In the page layout or in an included js file, we add the following JavaScript:

(more…)

I’ve frequently come across the need to disable remote AJAX links in Rails 3 after the first time they are clicked.

The typical scenario is that we have a link that fetches content from the server and loads it into the page. The problem is that after the first time the user clicks it, and the content is loaded into the page, we don’t want to keep fetching the same content from the server and re-loading it into the page if the user clicks it again.

The ideal solution

Ideally, we could easily just unbind the click.rails event binding to disable the links after we click them. In fact, that’s why I added the .rails namespace to the event bindings in rails.js in the first place.

Unfortunately, jQuery is not able to unbind (aka .die()) .live() bindings for specific elements in this way. See the Problem with .die() section in Exploring jQuery .live() and .die().

The good news is that I’ve rewritten the .die() method in jQuery to go along with the namespacing change to rails.js, so that we can do this. And it looks like the jQuery core team is planning to pull my rewrite into jQuery 1.5 (see discussion).

But until then we’ll have to make do with…

(more…)

This will be a quick post. I just wanted to point out that there is a problem with AJAX response handling for Rails 3 remote links and forms in Internet Explorer. This problem affects applications still using jQuery 1.4.2.

Upon clicking a remote link or submitting a remote form, the following code will work in Firefox, Safari, and Chrome, but nothing will happen in Internet Explorer:

The problem is that IE7 and IE8 do not “bubble” custom events, such as ajax:success, ajax:failure, etc., to the top of the DOM tree.

(more…)

Also see Rails 3 Remote Links and Forms Part 2: Data-type (with jQuery).

Spoiler Alert: If you like magic, stop reading. The Rails 3 UJS driver (rails.js), which powers the remote links, forms, and inputs, is not very magical when you know how it works.

This article uses the jQuery UJS driver, though the Prototype UJS driver does the same thing. UJS, by the way, stands for “Unobtrusive JavaScript”.

If you have any experience with jQuery, take a few minutes to check out the rails.js source. It’s pretty straight forward, and only 147 lines as of this writing. I’ll be here waiting to answer your questions when you get back.

What rails.js does

1. It finds remote links, forms, and inputs, and overrides their click events to submit to the server via AJAX.
2. It triggers six javascript events to which you can bind callbacks to work with and manipulate the AJAX response.
3. It handles the AJAX response from the server

What rails.js does NOT do

Notice that last bit is struck-through. This seems to be the greatest source of confusion when starting with the new Rails 3 remote functionality. Thanks to habits engrained by Rails 2′s link_to_remote and remote_form_for, we expect that Rails 3 would also handle the AJAX response for our remote links and forms. But it doesn’t; it leaves that for you.

Rails will take your luggage up to your room, but it won’t unpack your bags for you. This is by design; why would you want the bellhop going through your stuff? Also, the actual handling of the data is largely unique to each element, and depends on the data you’re working with in each case. So Rails leaves that part up to you. We’ll come back to this.

The role of HTML5

You’ve likely heard that Rails 3 uses HTML5. That’s true, but the actual role that HTML5 plays may be simpler than you suspect.

(more…)