ユーザーがデータをテーブルに送信するためにインラインフォームを使用しています (これを実現するために、html テーブルではなく CSS を使用していることに注意してください)。モデルの検証でエラーが返された場合、Bootstrap エラー クラスを使用して入力フィールドを強調表示し、適切なフォーム フィールドの下にエラー メッセージを表示したいと考えています。AJAX を使用してフォームを送信しています。
私は問題を抱えています、これは私がこれまでに持っているものです:
コントローラ:
def create
@travel = Travel.new(params[:travel])
@travel[:user_id] = current_user.id
convert_date # and return
if @travel.save
flash[:notice] = "Successfully saved trip"
@travels = Travel.where("user_id = ?",current_user)
respond_to { |format| format.js }
end
end
JS ビュー:
<% if @travel.errors.any? %>
<% @travel.errors.full_messages.each { |msg| logger.debug(msg) } %>
<% @travel.errors.messages.each do |k,v| %>
<% logger.debug("#tf_#{k}") %>
$(<%= "#tf_#{k}" %>).insertAdjacentHTML("afterbegin","<span class="control-group error"><span class="controls">");
$(<%= "#tf_#{k}" %>).insertAdjacentHTML("beforeend","</span></span>");
$(<%= "#error_#{k}" %>).val("<%= "#{k} #{v}" %>");
<% end %>
<% else %>
$(":input:not(input[type=submit])").val("");
$("#travels_list").html("<%= escape_javascript( render(:partial => "travels") ) %>");
<% end %>
部分的なフォーム:
<%= form_for @travel, :remote => true, :html => {:class => "form-inline", :id => "new-travel-form"} do |f| %>
<div class="row-fluid">
<span id="tf_city"><%= f.text_field :city, :placeholder => "London, UK", :class => "span3" %></span>
<span id="tf_arrive_date"><%= f.text_field :arrive_date, :class => "span2" %> </span>
<span id="tf_leave_date"><%= f.text_field :leave_date, :class => "span2" %> </span>
<span id="tf_notes"><%= f.text_field :notes, :placeholder => "e.g. staying at the Hilton", :class => "span3" %></span>
<%= f.submit "save", :class => "btn btn-primary span1" %>
</div>
<% end %>
<div class="row-fluid error" id="error_expl">
<span id="error_city" class="help-inline span3"></span>
<span id="error_arrive_date" class="help-inline span2"></span>
<span id="error_leave_date" class="help-inline span2"></span>
<span id="error_notes" class="help-inline span3">test</span>
</div>
JS が起動logger.debug
しているので、エラーが JS に渡されていることはわかっていますが、動作してinsertAdjacentHMTL()
いないようです。