1

検証エラーが含まれていると送信されないモーダル フォームがあります。送信が失敗した場合、フォームと次の 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 ファイルです)。

ありがとうございました

4

0 に答える 0