Ruby errors displayed within twitter bootstrap modal window

Question

I'm using the Twitter Bootstrap framework within a Rails app. What I'm trying to work out is how to render the errors within the window and not have a page reloaded.

Below is an example:

#modalEvent.modal.hide
  .modal-header
    %button.close{"data-dismiss" => "modal", :type => "button"} ×
    %h3 Schedule Form
  = form_for(@schedule, :html => { :class => "form-horizontal"})  do |f|
    .modal-body
      - if @schedule.errors.any?
        #notice.alert.alert-error
          %button.close{"data-dismiss" => "alert"} ×
          %strong Error:
          = pluralize(@schedule.errors.count, "error")
          prohibited #{event_display(@schedule.event)} from being
          saved:
          %ul
            - @schedule.errors.full_messages.each do |msg|
              %li= msg
      .widget-content.nopadding
        .control-group
          = f.label :event_type, :class =>'control-label'
          .controls
            = f.select :event, Schedule::EVENT_TYPES
        #3{:style => 'display:none'}
          .control-group
            = f.label :name, :class =>'control-label'
            .controls
              = f.text_field :result_id, :class => "required error"
        .control-group
          = f.label :date_and_time, :class =>'control-label'
          .controls
            = f.text_field :time, :class => "datepicker", :required => :required, :type => :datetime, "data-date-format" =>"dd/mm/yyyy"
        .control-group
          = f.label :duration, :class =>'control-label'
          .controls
            .input-append
              = f.number_field :duration, :placeholder => 'Time in Minutes', :required => :required
              %span.add-on
                %i.icon-time
            %span.help-block Duration of event in minutes
        .control-group
          = f.label :arrival_time, :class =>'control-label'
          .controls
            .input-append
              = f.number_field :arrival_time, :placeholder => 'Time in Minutes', :required => :required
              %span.add-on
                %i.icon-time
            %span.help-block Time in minutes before event
        .control-group
          = f.label :location, :class =>'control-label'
          .controls
            = select("schedule", "location_id", Location.all.collect { |p| [p.name, p.id] }, {:include_blank => 'None'})
        .control-group
          = f.label :players, :class =>'control-label'
          .controls
            = select(:schedule, :selected_players, @players.map { |p| [full_name(p), p.id] }, {:include_blank => false}, "data-placeholder" => 'Add Players to Lineup', :prompt => 'Add Players to Lineup', :multiple => "multiple")
        #1{:style => 'display:block'}
          -if current_user.admin?
            .control-group
              = f.label :team, :class =>'control-label'
              .controls
                = select("schedule", "team_id", Team.all.collect { |p| [p.name, p.id] }, {:include_blank => 'None'})
          - else
            =f.hidden_field :team_id, :value => current_user.team_id
          .control-group
            = f.label :opponent, :class =>'control-label'
            .controls
              = select("schedule", "opponent_id", Opponent.all.collect { |p| [p.name, p.id] }, {:include_blank => 'None'})
          .control-group
            = f.label :home_or_away, :class =>'control-label'
            .controls
              = f.select :home_or_away, Schedule::HOME_OR_AWAY, {:include_blank => 'None'}
    .modal-footer
      = f.submit 'Save Event', :class => 'btn btn-primary'
      %a.btn.btn-danger{"data-dismiss" => "modal", :href => "#"} Cancel

controller

def create
    @schedule = Schedule.new(params[:schedule])
    @user = User.find(current_user)
    @players = User.where(:team_id => current_user[:team_id]).all

    respond_to do |format|
      if @schedule.save
        Notifier.event_added(@user,@schedule).deliver
        format.html { redirect_to(schedules_url,
                                  :notice => "#{event_display_c(@schedule.event)} vs #{@schedule.opponent.name} was successfully created.") }
        format.json { render :json => @schedule, :status => :created, :location => @schedule }
      else
        format.html { render :action => "new" }
        format.json { render :json => @schedule.errors, :status => :unprocessable_entity }
      end
    end
  end

Answer 1

If you want to avoid page reload and still show server provided error messages you have to use AJAX somehow. I think there is still no one right way of doing it. You should start by googling PJAX. Another thing you should learn about is Rails provided unobtrusive JavaScript

Also I would recommend you try out is simple_form gem, which has nothing to do with AJAX but it would simplify your views ;)