public
Last active

Reset button not recognizing new form values after AJAX response

  • Download Gist
_edit_row.html.erb
HTML+ERB
1 2 3 4 5 6 7 8
<tr id='event_edit_<%= event.id %>' style='display:none;'>
<%= form_for(event, {:remote => true, :namespace => :blah, :html => {:class => ['blah', 'event']}}) do |f| %>
<td class='edit title'><%= f.text_field :title %></td>
<td class='edit description'><%= f.text_area :description %></td>
<td class='edit submit'><%= f.submit %></td>
<td class='edit cancel'><%= button_tag 'Reset', :type => 'reset' %></td>
<% end %>
</tr>
_view_row.html.erb
HTML+ERB
1 2 3 4 5 6
<tr id='event_view_<%= event.id %>'>
<td class='view title'><%= event.title %></td>
<td class='view description'><%= event.description %></td>
<td class='view modify'><%= link_to 'Edit', edit_event_path(event) %></td>
<td class='view delete'><%= link_to 'Destroy', event, :method => :delete, :data => { :confirm => 'Are you sure?' } %></td>
</tr>
events.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
$(document).ready(function() {
$('td.edit.cancel button').event_form_reset();
});
 
$.fn.event_form_reset = function () {
this.click(function(event) {
var confirmed = confirm('Are you sure you want to discard your changes?');
if (confirmed == true) {
$(this).parents('tr').toggle();
$(this).parents('tr').prev().toggle();
// do default reseting of edit form fields
} else {
event.preventDefault();
}
});
};
index.html.erb
HTML+ERB
1 2 3 4
<% @events.each do |event| %>
<%= render :partial => 'view_row', :locals => { :event => event } %>
<%= render :partial => 'edit_row', :locals => { :event => event } %>
<% end %>
update.js.erb
HTML+ERB
1 2 3 4 5
$('tr#event_view_<%= @event.id %>').replaceWith('<%= escape_javascript render( :partial => 'view_row', :locals => { :event => @event }) %>');
 
$('td.view.modify a').unbind();
$('td.view.modify a').blah_event_form_edit();
$('tr#event_edit_<%= @event.id %>').hide();

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.