Extend usage of html5 data attributes of the jquery UJS gem
JavaScript CoffeeScript Perl Ruby
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
test
.gitignore
MIT-LICENSE
README.md
jquery_ujs_extended.gemspec

README.md

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!