在twitter引導模式窗口中顯示Ruby錯誤

Question

我在Rails應用程序內使用Twitter Bootstrap框架。我試圖解決的是如何在窗口內渲染錯誤，而不是重新加載頁面。

下面是一個例子：

#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 

控制器

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

如果你想避免重新加載頁面，並仍然顯示你必須以某種方式使用AJAX服務器所提供的錯誤信息。我認爲目前還沒有一個正確的做法。你應該開始搜索PJAX。你應該學會的是Rails的另一件事提供unobtrusive JavaScript

此外，我會建議你嘗試是simple_form gem，這無關與AJAX，但它可以簡化您的意見;）

Answer 2

我做的非常相似，這東西儘管使用PHP/CodeIgniter而不是Rails，但我在模態窗口中使用了bootstrap。

我做的是，在表單提交後，我將表單數據ajax到一個流程腳本，然後驗證數據 - 如果驗證失敗，它將返回（通過JSON對象）包含錯誤的控制組類一個可選的錯誤信息顯示。如果驗證成功，它將執行您希望執行的任何操作，並簡單地返回一個「成功」標誌，通知程序顯示成功消息並關閉模式。

讓我知道這個樣本是否對您有任何用處。如果是這樣，我可以提供我執行的服務器端驗證和輸出的示例，但它不會處於紅寶石狀態。

下面是一個示例的形式，在引導模式格式：

<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">&times;</button> 
    <h3>Add Something</h3> 
</div> 
<div class="modal-body"> 
    <form id="your_form"> 
     <fieldset class="control-group id-group"> 
     <label>Some ID:</label><input type="text" name="SomeID" /><div class="clear"></div> 
     <label>Another ID:</label><input type="text" name="Another ID" /><div class="clear"></div> 
     </fieldset> 
     <fieldset class="control-group category-group"> 
     <label>Category 1:</label><input type="text" name="Cat1" /><div class="clear"></div> 
     <label>Category 2:</label><input type="text" name="Cat2" /><div class="clear"></div> 
     </fieldset> 
     <fieldset class="control-group description-group"> 
     <label>Description:</label><input type="text" name="Description" /><div class="clear"></div> 
     </fieldset> 
     <div class="clear"></div> 
    </form> 
    <div class="clear"></div> 
    <div class="alert alert-error" id="addError"> 
    </div> 
    <div class="alert alert-success" id="addSuccess"> 
    </div> 
</div> 
<div class="modal-footer"> 
    <a href="#" class="btn" data-dismiss="modal">Cancel</a> 
    <a href="#" class="btn btn-primary" id="saveSomethingButton" data-loading-text="Please Wait...">Save</a> 
</div> 

這是我在形式JavaScript調用的樣品提交：

$("#saveSomethingButton").click(function() { 

    //hide any previous errors should this be a second submit 
    $(".alert").hide(); 
    $(".control-group").removeClass('error'); 
    $("input").blur(); 
    //set the save button to a "please wait" state to prevent double submission 
    $("#saveSomethingButton").button('loading'); 

    //post to the validation script - if 
    $.post("<?php echo base_url();?>somecontroller/processfunction", $("#your_form").serialize(), function(data) { 

    //if we were successful, show the happiness message and close the modal 
    if (data.success == 1) { 

     $("#addSuccess").html("<strong>Success! </strong> Something successfully added to database."); 
     $("#addSuccess").fadeIn(300, function() { 

     setTimeout(function() { 

      $("#someModal").modal('hide'); 
     }, 2000); 
     }); 
    //otherwise, highlight the problem fields and display the error 
    } else { 

     $("#addError").html("<strong>Error: </strong> "+data.message); 
     $("."+data.fieldset).addClass("error"); 
     $("#addError").fadeIn(300); 
     $("."+data.fieldset+":first input:first").focus(); 
    } 
    //reset the button state so that they can correct errors and submit again 
    $("#saveSomethingButton").button('reset'); 
    }, "json"); 

    //return false to prevent default form submission, which would reload the page 
    return false; 
});