Duplicate submission with AJAX and Twitter Bootstrap

I'm using Twitter Bootstrap with my rails 3.1 app. On my Timesheet#show page, I have a modal box that display a form for adding a nested record. On submit, an Ajax call is made to create.erb.js, and the record is created and added to the bottom of a . The form submits two records to the database, but the Ajax isn't working and the form isn't clearing.

In my view:

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

The modal (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>

The controller 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();

and finally, what Bootstrap-modal.js provides:

  $(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() )
    })
  })

As mentioned, when I fill out my form and submit, two identical records are saved to the database and the modal remains in place, with the values still in it. What am I doing wrong?