I am using bootstrap-sass 2.1.1.0 with rails 3.2.9. I have a ajax form inside modal. like this:
section#avatars_form_edit
= simple_form_for [user, avatar], html: { class: 'edit-avatar' }, remote: true do |f|
- %w(x y w h).each do |attribute|
= f.hidden_field "crop_#{attribute}"
a.btn href='#' data-dismiss='modal' = t '.cancel'
= f.button :submit, value: t('.confirm')
After submit successful I would like to hide modal and replace element in the page under the modal: (update.js.erb)
<% if @avatar.errors.any? %>
<% error = @avatar.errors[:image].first %>
$('#avatars_form').
find('.modal-body').prepend('<%= j render "shared/embedded_notify", key: "alert", msg: error %>');
<% else %>
$('#avatars_modal').modal('hide');
$('#avatars_avatar_medium').
replaceWith('<%= j render "avatar_medium", avatar: @avatar, user: @user %>');
$('#avatars_avatar_medium').
on('hover', function() { $(this).find('.edit-bar').toggleClass('invisible'); });
<% end %>
The question is: Sometimes(90% times it work), the replaceWith($('#avatars_avatar_medium'). replaceWith('<%= j render "avatar_medium", avatar: @avatar, user: @user %>');) seems not work. It does not update my page. I am not good at javasript can you tell the problem? Thanks!
