Rails 3 driver 1.0

A MooTools driver for the Ruby on Rails 3 unobtrusive JavaScript API. Instead on injecting inline JavaScript, Rails 3 adds HTML5 data-* attributes to elements. These hooks are used by JS drivers to create remote forms, links, buttons and PUT/DELETE HTTP requests. This driver picks up all hooks on domready and attaches appropriate event listeners.



Details

Author
Kevin Valdek
Current version
1.0
GitHub
kevinvaldek/mootools-ujs
Downloads
14006
Category
Utilities
Tags
Report
GitHub Issues

Releases


Dependencies

  • core/1.4: *

How to use

Given that you already have included MooTools -core in your app, just put rails.js in your public/javascripts folder and include it in your page head.

    <head> 
      <title>MooTooled Rails App</title> 
      <script type="text/javascript" src="/javascripts/mootools-core-1.4.js"></script> 
      <script type="text/javascript" src="/javascripts/rails.js"></script> 
    </head> 

Example

Sample output from a Rails 3 helper method for a remote form:

    <form action="/posts" id="create-post" method="post" data-remote="true">
      <!-- lots of inputs -->
    </form>

In this case, data-remote="true" is matched by the driver, adding a submit event that prevents the default behavior, and sends the form as a XMLHttpRequest instead.

Antoher case is a link element that is not remote, but needs to use DELETE as HTTP method (not supported by most browsers).

    <a href="/posts/33" data-method="delete">Delete this post</a>

This link is hooked with a click event that returns false. Instead, a hidden form - including an input named _method with value delete - is created and submitted with POST.

All hooks are described in the documentation of Rails 3.


Adding Events To Dynamically Injected Elements

Hooks/events are added by default on domready. If you inject any elements afterwards, you can apply events to a container element by using rails.applyEvents($('elementId')).

Example when events are applied to an element that has been updated by XHR:

    new Request.HTML({
      update: updateElement,
      onSuccess: function() {
        rails.applyEvents(updateElement);
      }
    });

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus