Updating a DIV with partials after remote AJAX form submit in Rails 3

application.js

$(function() {
    /* Convenience for forms or links that return HTML from a remote ajax call.
    The returned markup will be inserted into the element id specified.
     */
    $('form[data-update-target]').live('ajax:success', function(evt, data) {
        var target = $(this).data('update-target');
        $('#' + target).html(data);
    });
});

controller.rb

  def preview
    # ... do something meaningful here ...
    render :partial => 'preview', :content_type => 'text/html'
  end

updatetarget.html

<div id="update-container">
...
</div>

view.html.erb

<%= form_tag({:action => 'preview'}, :remote => true, :'data-update-target' => 'update-container') do %>
    <%= url_field_tag 'url', nil, :class => 'textinput', :placeholder => 'Paste the link URL here'  %>
    <%= submit_tag 'Submit', :disable_with => 'Please wait...', :class => 'submit' %>
<% end %>

PS - if you want your .on listener to continue to work for newly inserted content, as well, change the syntax to the following;

$(document).on('ajax:completed', 'form[data-update-target]', function(evt, data) {

I found this answer in the .on docs in this section, which addresses this specific need => https://api.jquery.com/on/#direct-and-delegated-events

I think, live() was deprecated in the later Ruby versions

PS - if you want your .on listener to continue to work for newly inserted content, as well, change the syntax to the following;
$(document).on('ajax:completed', 'form[data-update-target]', function(evt, data) {
I found this answer in the .on docs in this section, which addresses this specific need => https://api.jquery.com/on/#direct-and-delegated-events

Thank you a lot for this - tested working in Rails 5 without any special gems included. One thing to note it should be ajax:complete not completed

There is no such thing as "ajax:completed". How did you make it work ?

i keep getting data of undefined with the code bellow:

	$(document).on('ajax:success', 'form[data-update-list]', function(evt, data) {
		console.log('this:', this);
		console.log('evt:', evt);
		console.log("data:", data);

		let target = $(this).data('update-list');
		$('div#' + target).html(data);
	});