Tagged: jquery

Links for 11th December 2011

Amber.js

Sproutcore 2.0 lives on as Amber.js, after the Sproutcore team was absorbed by Facebook. The project will be maintained by Tilde, which was setup by Yehuda Katz and Tom Dale, both of whom had left Sproutcore earlier this year.

iTunes-like Coverflow with jQuery

Add interactive sliders, that look like the album-art Coverflow in iTunes.

Windows 8 Metro App Development overview

A look at the architecture and new Technologies involved in the development of apps for Microsoft’s tablet-oriented Metro interface in Windows 8. ‘Contracts’ seem interesting – providing simple hooks into various native APIs, while background tasks seem to be somewhat limited.

Review of Radiant – A Content Management System written in Rails

Seems an interesting alternative to the loads of PHP based CMSs such as WordPress or Drupal. However, most Users might be turned-off by the relatively higher complexity of setting up the app, and the limited options of Hosts geared towards personal use.

jQuery Token-Input fields in Rails (Part 1)

A Token-input field is one which allows your users to select multiple items from a predefined list, visually highlighting each item as they select it.

There are many apps out there, that use a Token Input field – iOS’s mail app for instance (you know, how it shows names in blue bubbles as you add them in an email).

You can easily add a Token Input field in your Rails app, using just jQuery. Let me show you how to do this, using the jQuery Token-input plugin by James Smith.

To get started, make sure you have jQuery. If not, you can use the jQuery-Rails gem to quickly install it.

gem install jquery-rails
rails g jquery:install

Next, setup your controller and routes, to process search queries. In this instance we are searching for Book Names (Book being the Rails model, with attribute Name).

#books_controller.rb

def search
@books = Book.where("name LIKE ?", "%params[:q]%")

respond_to do |format|
format.json
end

end

#config/routes.rb

match '/search' => 'books#search', :as => :search

Notice how the params containing the search term is wrapped with %. That will ensure that results include all matches where the search term is contained in any part of the result string.

The output is in JSON format, as required by the plugin.

Setup the View as follows:

<%= form_tag(search_path, :method => 'get') do %>                           

  <%= text_field_tag(:q, params[:q]) %>                                

<% end %>

Make sure to include this script, either in application.js, or in the layout file. This will load the Token-input plugin on the Text-field with ID ‘q’, the URL parameter being the search URL. Note that while the ID can be anything you want, the query parameter should be ‘q’.

$(document).ready(function () {
$("#q").tokenInput("http://www.yourdomain.com/search.json");
});

Finally, add this single line in your model.

self.include_root_in_json = false

This is required, as the jQuery Token-input plugin should receive only the child nodes i.e ID, Name & other attributes of the book model, in the JSON generated by the controller. If you inspect the default JSON output, it would include the root node also, which is ‘books’.

And with that, you should have auto-complete on your model, in a Text-field. Join me in part-2, where i’ll hopefully take you through using the Token-input field further in your Rails app.

Create Sortable HTML Tables Easily with Tablesorter

Tablesorter is a JQuery plugin that lets your users easily sort all kinds of data contained in tables.

Amongst others you can allow users to sort text, URIs, integers, currency, floats and dates – all without any page refreshes – and also write plugins to support other data types. And all this with just a couple of lines of code!

Check it out here.

Fast Text Search on a Web-Page using Jquery

For a Rails app I was building, I needed a custom search box, where, when the user types in some text, the contents of an ordered list were automatically filtered, and only the matches were shown.

This piece of Jquery code (demo here) from Design Chemical let me do exactly that. Just add the code to your JS file, and you’ll be up & running in no time. In Rails 3, you can add this to the application.js file located in /public/javascripts.

You will of course need Jquery. The Jquery-Rails gem automates the configuration for you, if you’re using Rails.