jquery-ujs-extended

Extend usage of html5 data attributes of the jquery UJS gem in the context of Ajax calls. It's just global attributes listeners I find myself often needing to rewrite in my new projects to save time on javascript writing. I extracted it as a gem.

#Prerequisites

This has been tested on Rails 3.2.8 so far. Since it's just a collection of JS listeners, it should work on any version really.

Requires :

• Usage of asset pipeline
• Coffeescript
• jquery-rails

#Installation In your Gemfile assets group, put:

gem 'jquery_ujs_extended'

Then bundle install as usual. Edit application.js to add :

//= require jquery_ujs_extended

Restart your webserver and all should be fine

#Usage

When specifying a target DOM element in custom data attributes, you have to use the jQuery selector syntax. You can modify several elements on the DOM at once this way

##Ajax listeners

This applies to <form>, <a>, <input> and <select> elements. Needs to be used with data-remote from jquery-ujs

• data-update listener that automatically updates the DOM elements

    link_to "Update", url_path, data: {remote: true, update: "#div1"}
    form_for @object, data: {remote: true, update: "#div1"}
  

• data-destroy listener that automatically deletes the DOM elements

    link_to "Destroy", url_path, data: {remote: true, destroy: ".class1"}
    form_for @object, data: {remote: true, destroy: ".class1 .class2"}
  

• data-append listener that automatically appends to the DOM elements

    link_to "Append", url_path, data: {remote: true, append: "#div1 span .class1"}
  

• data-loader. Takes a DOM element. Will show the DOM element before sending the request, and hide it when the request is completed. This is best used to show a spinner image during a request.

    <%= link_to "Loader", url_path, data: {remote: true, loader: ".loader"} %>
    <%= image_tag "/my/image.jpg", style: 'display: none', class: 'loader' %>
  

• data-redirect. Takes a url. Redirects to the url on ajax success.

    link_to "redirect", url_path, data: {remote: true, redirect: "/my/url"}
  

##Behaviour

• data-integer. If specified and applied to a text field, will prevent the field from being anything but an integer.Value: minimum value or range like 1..10000. Leave blank if you don't want one.

    text_field_tag "quantity", 1, data: {integer: 1}
    text_field_tag "quantity", 1, data: {integer: 1..10000}
  

• data-float. If specified and applied to a text field, will prevent the field from being anything but a float.Value: minimum value or range like 1..10000. Leave blank if you don't want one.

    text_field_tag "price", 1, data: {float: 0.01}
    text_field_tag "price", 1, data: {float: 0.01..10000}
  

#Bugs? Thoughts? Ideas to make it better?

Don't hesitate to open an issue here and I'll see what I can do!