我有一个模态表单,当它包含验证错误时不会提交。如果提交失败,我会在我的表单中使用 :remote => true 重新加载模式和这个 javascript:
$('#modal-treating').html('<%= escape_javascript(render('treating_form')) %>');
不幸的是,在重新加载模态表单时,我失去了原始模态表单中的所有 css(javascript 只是重新加载相同的模态表单)。我需要在我的 javascript 中添加什么以确保我的样式不会丢失?我听说过 .live() 和 .die() 函数,但我不确定这是如何工作的,或者为什么。
谢谢你。
编辑(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 文件)。
谢谢你