1

Rails 3.1 アプリで Twitter Bootstrap を使用しています。私の Timesheet#show ページには、ネストされたレコードを追加するためのフォームを表示するモーダル ボックスがあります。送信時に create.erb.js に対して Ajax 呼び出しが行われ、レコードが作成されて . フォームは 2 つのレコードをデータベースに送信しますが、Ajax が機能せず、フォームがクリアされません。

私からしてみれば:

<button class="btn primary" data-controls-modal="modal-from-dom" data-backdrop="true"     data-keyboard="true">New Run</button>

モーダル (new.html.erb)

<div id="modal-from-dom" class="modal hide fade in">
<div class="modal-header">
<a href="#" class="close">×</a>
<h3>Add a Run</h3>
</div>
<div class="modal-body">
    <%= form_for ([@timesheet, @timesheet.runs.new]), :remote => true do |f| %>
        <fieldset>
            <%= f.label 'Select an athlete'%>
            <div class="input"><%= f.collection_select(:athlete_id, Athlete.all, :id, :name_with_comma, :prompt => 'Choose...' )%></div>
        </fieldset>

    <% @timesheet.eyes.each do |eye| %>

        <%= f.fields_for "splits_attributes[]", Split.new do |s| %>
        <fieldset>
            <%= s.label :time, eye.name %>
            <div class="input"><%= s.text_field :time, :class => 'span2' %></div>
            <%= s.hidden_field(:eye_id, :value => eye.id) %>
        </fieldset>
        <% end %>

    <% end %>
</div>
<div class="modal-footer">
<%= f.submit :class => 'btn primary' %>
<a href="#" class="btn secondary">Secondary</a>
</div>
<% end %>
</div>

コントローラーの RunsController.rb

  def create
    @run = @timesheet.runs.new(params[:run])
    @run.position = @run.athlete.runs.find_all_by_timesheet_id(@run.timesheet).count + 1 # auto increment the run position
    if @run.save
      respond_to do |format|
        format.html {redirect_to @timesheet, :notice => "Run added"}
        format.js
      end
    else
      redirect_to @timesheet, :alert => "Unable to add run"
    end
  end

create.js.erb

$("#splits-table").append("<%= escape_javascript(render(@run)) %>");

$("#run_<%= @run.id %>").effect("highlight", {}, 3000 )

$("#new_run").reset();

最後に、Bootstrap-modal.js が提供するもの:

  $(document).ready(function () {
    $('body').delegate('[data-controls-modal]', 'click', function (e) {
      e.preventDefault()
      var $this = $(this).data('show', true)
      $('#' + $this.attr('data-controls-modal')).modal( $this.data() )
    })
  })

前述のように、フォームに入力して送信すると、2 つの同一のレコードがデータベースに保存され、モーダルはそのままで、値はそのままです。私は何を間違っていますか?

4

0 に答える 0