1

new別のモデルのエントリを「その場で」作成し、ページを更新せずに新しいエントリで選択を更新できるモーダルをページに含めたいと思います。

私が行う最初の試みは次のようなものです：

モーダルを上げたページ (よし、他のモデルのフォームを正しく上げた)

#new.html.erb
<%= simple_form_for(@odl) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">
<%= f.collection_select :client_id, Client.order("LOWER(last_name) ASC"), :id, :last_name_and_name_and_company, :prompt => "Select a client" %>
      <a href="#client_modal" role="button" data-toggle="modal">Create new client</a>

#...some code...
#...and the modal that raise correctly

<div id="client_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="client_modal_label" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="client_modal_label">Create a new client</h3>
  </div>
  <div class="modal-body">
    <% @client = Client.new %>
    <%= render :partial => "clients/form" %>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Create Client</button>
  </div>
</div>

新しいクライアント フォームの一部の入力が間違っている場合は、新しい「クラシック」ページではなくモーダルにオンザフライで表示されることを望みます。

Client.new コントローラーは次のとおりです。

#clients_controller

def create 
#create new client
 if save
   redirect_to to_a_path, :notice => "Client created successfull!"      
 else
      flash[:error] = "Error!"
      render :action => "new"
 end
end

従うことができると思う解決策:
1.上記の例のようにパーシャルをレンダリングしますが、エラーが発生したときにモーダルに「とどまる」方法がわかりません (モーダルにとどまるにはどうすればよいですか? -> 試しましたとclient_validationしかし、それは正しく動作しないようです..)
2.モーダルボディを3<iframe>をロードするとして作成しますnew_client_path
. ...

どれが最高ですか？

4

1 に答える 1

1

いくつかのトリックの後、私は実用的な解決策を見つけました:

モーダル コントローラーのビュー:

<div id="client_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="client_modal_label" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="client_modal_label">Create new client</h3>
  </div>
  <div class="modal-body">
    <%= simple_form_for Client.new, html: {"data-type" => :json}, remote: true do |f| %>
  <div id="error_explanation" style="display:none;">
  </div>

  <div class="form-inputs">
    # the inputs
    # ... and "closing" the modal

client_controller.create：_

def create
 # save the data
 if @client.save
    respond_to do |format|
          format.html { redirect_to anagrafe_index_path, :notice => "Client create!"}
          format.json { render json: @client, status: :created, location: @client }
    end
 else
    respond_to do |format| 
        format.html { render :action => 'new'}
        format.json { render json: @client.errors.full_messages, status: :unprocessable_entity }
    end
 end
end

モーダルが発生する js.coffee:

$ ()->
  $("form.new_client").on "ajax:success", (event, data, status, xhr) ->
    $("form.new_client")[0].reset()
    $('#client_modal').modal('hide')
    # refreshing the select
    $('#error_explanation').hide()

  $("form.new_client").on "ajax:error", (event, xhr, status, error) ->
    errors = jQuery.parseJSON(xhr.responseText)
    errorcount = errors.length
    $('#error_explanation').empty()
    if errorcount > 1
      $('#error_explanation').append('<div class="alert alert-error">The form has ' + errorcount + ' errors.</div>')
    else
      $('#error_explanation').append('<div class="alert alert-error">The form has 1 error.</div>')
    $('#error_explanation').append('<ul>')
    for e in errors
      $('#error_explanation').append('<li>' + e + '</li>')
    $('#error_explanation').append('</ul>')
    $('#error_explanation').show()
于 2013-06-21T13:01:16.980 に答える