Отображение встроенных ошибок с помощью simple_form в модале Bootstrap Ajax
Я нашел похожие вопросы StackOverflowВот а такжеВот но все еще не могу заставить это работать.
Я использую Rails 3.2.8, SimpleForm 2.0.4 и Twitter Bootstrap 2.1.1 (с помощью самоцвета bootstrap-sass 2.1.1.0).
Пользователь должен иметь возможность добавить контакт из модального всплывающего окна. Если есть ошибки проверки, они должны отображаться встроенными, как если бы пользователь использовал немодальную версию формы (красная рамка вокруг поля, сообщение об ошибке рядом с полем).
Я загружаю модал так:
<a data-toggle="modal" data-target="#new-contact-modal">Go modal!</a>
Вот модальный Bootstrap, который вызывает тот жеcontacts/contact_fields
частично используется в немодальной версии.приложение / просмотров / контакты / _new_modal.html.erb:
<div id="new-contact-modal" class="modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="new-contact-modal-label"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h3 id="new-contact-modal-label"><%= t("contacts.new.header") %></h3>
</div>
<%= simple_form_for(@contact,
:remote => true,
:html => {:class => "form-horizontal",
"data-type" => :json }) do |contact_form| %>
<div id="new-contact-body" class="modal-body">
<%= render 'contacts/contact_fields', :f => contact_form %>
</div>
<div class="modal-footer">
<%= contact_form.submit :class => "btn btn-primary",
:"data-loading-text"=> ('simple_form.creating') %>
<%= t('simple_form.buttons.or') %>
<a data-dismiss="modal" aria-hidden="true">
<%= t('simple_form.buttons.cancel') %>
</a>
</div>
<% end %>
</div>
приложение / контроллеры / contacts_controller.rb (намеренно закомментировалformat.json
строка, так как я пытаюсь отправить весь модальный обратно с помощью JavaScript):
def create
@contact = Contact.new(params[:contact])
<...some additional processing...>
respond_to do |format|
if @contact.save
format.html { flash[:success] = "Contact added."
redirect_to @contact }
format.json { render json: @contact, status: :created, location: @contact}
else
format.html { render action: "new" }
#format.json { render json: @contact.errors, status: :unprocessable_entity }
format.js { render 'new_modal_error' }
end
приложение / просмотров / контакты / new_modal_error.js.erb
var modal = "<%= escape_javascript(render :partial => 'contacts/new_modal', :locals => { :contact => @contact.errors }) %>";
$("#new-contact-modal").html($(modal));
приложение / активы / JavaScripts / contacts.js Некоторые JQuery для сброса формы и закрытия модальных при успехе.
$(function($) {
$("#new_contact")
.bind("ajax:success", function(event, data, status, xhr) {
// http://simple.procoding.net/2008/11/22/how-to-reset-form-with-jquery :
$(this).each(function(){
this.reset();
});
$("#new-contact-modal").modal("hide");
})
});
Хорошая новость заключается в том, что это работает, когда в форме нет ошибок: контакт добавлен, а модальный скрыт. Однако если естьнаходятся ошибки проверки, я получаю сообщение «JSON.parse: неожиданный символ». Это происходит из jquery.js, строка 515, которая являетсяreturn
утверждение в этом фрагменте:
// Attempt to parse using the native JSON parser first
if ( window.JSON && window.JSON.parse ) {
return window.JSON.parse( data );
}
Если я проверяюdata
Я вижу, что это содержание моегоnew_modal_error.js
файл, полностью раскрытый с ошибками формы и экранированный для JavaScript. Но это не JSON.
Чего мне не хватает? Как мне получить страницу для обработкиnew_modal_error.js
как файл JavaScript, а не переменная JSON? Или есть более простой способ справиться с этим вообще?