Agile Web Development

Mux-Demux is a ruby on rails plugin that allows you to very easily update multiple sections of a page using a SINGLE Ajax call. Just map rails URLs to HTML element ids or even register a Javascript-Callback to handle the response of every URL.

PRE-REQUISITES

Ruby-JSON -> http://rubyforge.org/projects/ruby-json/

  - You can install by running 'gem install ruby-json'

The JavaScript JSON Library -> http://www.json.org/js.html

  - Download json.js to your project's 'public/javascripts'
  - http://www.json.org/json.js

USAGE

Download the ‘mux-demux’ folder into your project’s ‘vendor/plugins’ folder.

Copy the ‘javascript/mux-demux.js’ file to your projecrs ‘public/javascripts’ folder. Make sure to include both ‘json.js’ and ‘mux_demux.js’ in your views

OK… THE CODE CAN TALK NOW

    new Ajax.MuxDemux([
      {container: 'tag_cloud',       url:'/tags/show_cloud'},
      {container: 'book_details',   url:'/book/details/10?level=3'},
      {container: 'book_header',  url:'/book/header'}
    ])

Yes, that’s all the code you need to write to update the elements ‘book_details’, ‘tag_cloud’ and ‘page_footer’ using their corresponding urls… all in just a SINGLE ajax call.

 Also, the server-side rails actions can be implemented in the usual manner. For Eg:

class TagsController < ApplicationController

  def show_cloud
    @tags = Tags.find_all
    render :partial => 'cloud'
  end

end

Alternatively, instead of updating an element you can register a callback to handle the response from the url, as shown below:

    new Ajax.MuxDemux([
      {container: 'tag_cloud', url:'/tags/show_cloud'},
      {url: '/book/details/10',
        processResult: function(response) { update_book_details(response,3) }
      }])

.…and you can also pass in the usual set of options accepted by prototype’s Ajax.Request class, like:

    new Ajax.MuxDemux([
      {container: 'tag_cloud',       url:'/tags/show_cloud'},
      {container: 'book_details',   url:'/book/details/10?level=3'}
      ],
      {asynchronous: true, onLoading: start_spin_wheel, onLoaded: stop_spin_wheel}
    )

HOW DOES IT WORK ?

The array of requests are first multiplexed into a single URL. They are then processed on the rails server and the results collected into one JSON string. These results are then de-multiplexed to update the various HTML elements in the browser.

HOW IS IT BETTER THAN USING RJS TEMPLATES ?

Honestly, it may not be any better than RJS RJS -> http://rails.techno-weenie.net/tip/2005/11/29/ajaxed_forms_with_rjs_templates

However, we do think it offers one important advantage: Using Mux-Demux, you can afford to have seperate actions on your rails controllers, updating seperate sections of the page. So, it will allow you to add the ability to update these multiple sections with absolutely no change to the controller code, making it more re-usable.

Home: http://rubyforge.org/projects/mux-demux/

Repository: svn://rubyforge.org//var/svn/mux-demux

License: Rails' (MIT)

Category: View Extensions