Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Updating a DIV with partials after remote AJAX form submit in Rails 3
$(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);
});
});
def preview
# ... do something meaningful here ...
render :partial => 'preview', :content_type => 'text/html'
end
<div id="update-container">
...
</div>
<%= 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 %>
@coderberry
Copy link

coderberry commented Nov 14, 2013

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

@milgroma
Copy link

milgroma commented Apr 6, 2014

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.

@milgroma
Copy link

milgroma commented Apr 12, 2014

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

@milgroma
Copy link

milgroma commented Apr 19, 2014

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

@olgavasileva
Copy link

olgavasileva commented Feb 25, 2016

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

@daniel-sullivan
Copy link

daniel-sullivan commented Jul 1, 2016

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

@martinbarilik
Copy link

martinbarilik commented Dec 9, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment