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 %>

To get this working for me, I had to make a few changes

$(function() {
    $('form[data-update-target]').on('ajax:completed', function(evt, data) {
        var target = $(this).data('update-target');
        $('#' + target).html(data.responseText);
    });
});

Thank you so much for posting this. It was the most clear and concise explanation for doing this that I could find.
For whatever reason, my 'target' response already contained the '#', so it was creating a target the was ##my_target_div. However, when I was checking this, it didn't show that way, but my div wasn't updating and my 'data' and 'data.responseText' just contained 'undefined'.
I was finally able to get the whole response to output to the console.log and that returned an error with my '##my_target_div'. Once I removed the "'#' + ", my 'data' contained the correct response, was output in the log, and then everything worked correctly, using just the line '$(target).html data' to update my div.
Thank you.
Hope this helps someone who comes looking in the future.

On further investigation, I found;
for ('ajax:completed', function(evt, data) {
i needed $('#' + target).html
for $("a[data-update-target]").on
i needed $(target).html

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);
	});