用ajax重新加载模态时丢失css

时间:2012-11-28 15:04:05

标签: css ruby-on-rails ajax forms

我有一个模态表单,当它包含验证错误时不会提交。如果提交失败,我会重新加载模式:remote =>我的形式和这个javascript:

$('#modal-treating').html('<%= escape_javascript(render('treating_form')) %>');

不幸的是,在重新加载模态窗体时,我丢失了原始模态窗体中的所有css(javascript只是重新加载相同的模态窗体)。我需要添加到我的javascript中以确保我的样式不会丢失?我听过.live()和.die()函数,但我不确定这是如何工作的,或者为什么。

谢谢。

编辑(treat_form partial。它不是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文件)。

谢谢

0 个答案:

没有答案