検証エラーが含まれていると送信されないモーダル フォームがあります。送信が失敗した場合、フォームと次の JavaScript で :remote => true を使用してモーダルをリロードします。
$('#modal-treating').html('<%= escape_javascript(render('treating_form')) %>');
残念ながら、モーダル フォームをリロードすると、元のモーダル フォームにあったすべての css が失われます (javascript は同じモーダル フォームをリロードするだけです)。スタイルが失われないようにするには、JavaScript に何を追加する必要がありますか? .live() および .die() 関数を聞いたことがありますが、これがどのように機能するのか、またはその理由はわかりません。
ありがとうございました。
EDIT(treating_formの部分的なものです。DRYではありませんが、テストしているだけです):
<% if current_user %>
<%= simple_form_for(@treating, :action => 'new', :remote => true) do |f| %>
<% if @treating.errors.any? %>
<div id="modal-treating">
<div class="modal-header">
<h3><%= @user.first_name + " " + @user.last_name[0] + "." %></h3>
<p>
<% if @user.picture_url %>
<%= image_tag(@user.picture_url, :size => "30x30") %>
<% else %>
<%= image_tag('smiley_small.png', :size => "30x30") %>
<% end %>
<%= @user.headline %>
</p>
</div>
<div class="modal-body">
<div class="row-fluid">
<form action="#" class="span12">
<label for="treating-message"><h5>Introduce yourself to <%= @user.first_name %> (sample introductions):</h5></label>
<%= f.hidden_field :requestee_id %>
<div class="control-group">
<%= f.label :intro, "Introduce yourself to " + @user.first_name + ":" %>
<%= f.input :intro, :input_html => { :id => "treating-message", :class => "span12" } %>
</div>
<label for="treating-date-time">When?</label>
<div class="control-group">
<%= f.simple_fields_for :t_date_times_attributes do |t_date_time| %>
<%= t_date_time.simple_fields_for :"0" do |zero| %>
<%= zero.input :date, :input_html => { :class => "input-small datepicker" } %>
<%= zero.input :time, :input_html => { :class => "timepicker input-small" } %>
<% end %>
<% end %>
</div>
<%= f.simple_fields_for :proposed_venues_attributes do |venue| %>
<%= venue.simple_fields_for :"0" do |zero| %>
<%= zero.input :foursquare_id, :input_html => { :class => 'bigdrop', :id => 'e7' } %>
<% end %>
<% end %>
</form>
</div>
</div>
<div class="modal-footer">
<div class="field">
<a href="#" class="btn btn-link" data-dismiss="modal">Close</a>
<%= f.submit "Send", id: "send-button" %>
</div>
</div>
</div>
<% else %>
<div id="modal-treating" class="modal hide fade">
<div class="modal-header">
<h3><%= @user.first_name + " " + @user.last_name[0] + "." %></h3>
<p>
<% if @user.picture_url %>
<%= image_tag(@user.picture_url, :size => "30x30") %>
<% else %>
<%= image_tag('smiley_small.png', :size => "30x30") %>
<% end %>
<%= @user.headline %>
</p>
</div>
<div class="modal-body">
<div class="row-fluid">
<form action="#" class="span12">
<label for="treating-message"><h5>Introduce yourself to <%= @user.first_name %> (sample introductions):</h5></label>
<%= f.hidden_field :requestee_id %>
<div class="control-group">
<%= f.label :intro, "Introduce yourself to " + @user.first_name + ":" %>
<%= f.input :intro, :input_html => { :id => "treating-message", :class => "span12" } %>
</div>
<label for="treating-date-time">When?</label>
<div class="control-group">
<%= f.simple_fields_for :t_date_times_attributes do |t_date_time| %>
<%= t_date_time.simple_fields_for :"0" do |zero| %>
<%= zero.input :date, :input_html => { :class => "input-small datepicker" } %>
<%= zero.input :time %>
<% end %>
<% end %>
</div>
<%= f.simple_fields_for :proposed_venues_attributes do |venue| %>
<%= venue.simple_fields_for :"0" do |zero| %>
<%= zero.input :foursquare_id, :input_html => { :class => 'bigdrop', :id => 'e7' } %>
<% end %>
<% end %>
</form>
</div>
</div>
<div class="modal-footer">
<div class="field">
<a href="#" class="btn btn-link" data-dismiss="modal">Close</a>
<%= f.submit "Send", id: "send-button" %>
</div>
</div>
</div>
<% end %>
<% end %>
<% end %>
そして私のコントローラーから:
def create
@treating = current_user.sent_treatings.build(params[:treating])
@user = @treating.requestee
if params[:treating][:proposed_venues_attributes][:"0"][:foursquare_id] != ""
build_proposed_venue_by_id(@treating,params[:treating][:proposed_venues_attributes][:"0"][:foursquare_id])
end
respond_to do |format|
if @treating.save
format.js { render :js => "window.location.replace('#{url_for(:controller => :treatings, :action => :index)}');" }
else
format.html { render :action => "new" }
format.xml { render :xml => @treating.errors, :status => :unprocessable_entity }
format.js { render 'modal_error' }
end
end
end
(modal_error は、質問の上部にある私の JavaScript ファイルです)。
ありがとうございました