Rails 3: Make "link_to :remote => true" replace HTML elements with jQuery

Updated . Posted . Visible to the public.

In Rails 2, you could use link_to_remote ... :update => 'id' to automatically replace the content of $('#id').

To do the same in Rails 3, include usual rails-ujs JavaScript Show archive.org snapshot , and put this into your application.js:

$(function() {
  $('[data-remote][data-replace]')
    .data('type', 'html')
    .live('ajax:success', function(event, data) {
      var $this = $(this);
      $($this.data('replace')).html(data);
      $this.trigger('ajax:replaced');
    });
});

Use with

link_to 'Do something', path_returning_partial, :remote => true, :"data-replace" => '#some_id'

If you need to do something after replacing, you can listen to the ajax:replaced event on the link.

.unobtrusive version

In case you are using our unobtrusive JavaScript helper, use the following code instead:

$.unobtrusive(function() {
  $('[data-remote][data-replace]')
    .data('type', 'html')
    .live('ajax:success', function(event, data) {
      var $this = $(this);
      $($this.data('replace'))
        .html(data)
        .activateUnobtrusiveJavascript();
      $this.trigger('ajax:replaced');
    });
});
Profile picture of Tobias Kraze
Tobias Kraze
Last edit
Michael Leimstädtner
License
Source code in this card is licensed under the MIT License.
Posted by Tobias Kraze to makandra dev (2011-07-20 15:07)