Придумайте несколько моделей, загрузите модал с помощью входа в AJAX
У меня есть 2 типа пользователей - медсестры и пациенты, и я хочу настроить вход в систему таким образом, чтобы на странице приветствия / посадки были две кнопки, которые открывают модальный загрузчик с формой входа для каждого типа пользователей. Я хотел бы, чтобы форма входа отправляла запрос AJAX, чтобы при наличии ошибок они отображались в самом модале.
Я использую Devise для аутентификации, и у меня есть две модели для медсестер и пациентов. Первоначально я установил модальный, чтобы загрузить URL для new_nurse_session_path
при нажатии на кнопку изменил форму входа в систему устройства по умолчанию для отправки запросов AJAX, использовал пользовательский SessionsController
для обработки новых сессий и отправки JSON-ответов назад, а затем иметь JS-код, который перехватывает ответ. Это работало (хотя с некоторыми проблемами, как показано ниже) было довольно медленно, так как он загружал всю страницу из nurses/sessions/new.html.erb
наряду с заголовком, навигационной панелью и т. д.
Вопросы
Когда код JS перехватывал запрос AJAX, когда вся страница входа была открыта в модальном режиме (согласно приведенному ниже коду), если я открывал страницу напрямую, запрос AJAX не обрабатывался, даже если сервер отправлял правильный JSON назад - есть ли что-то, что я делаю не так, что может быть причиной этой проблемы?
Чтобы избежать загрузки всей новой страницы сеанса в модальном режиме, я следовал приведенным здесь инструкциям https://github.com/plataformatec/devise/wiki/How-To:-Display-a-custom-sign_in-form-anywhere-in-your-app, чтобы поместить форму в модальное. Проблема, с которой я здесь сталкиваюсь, заключается в том, как создать помощника, чтобы он определял ресурс и сопоставления Devise в зависимости от того, пытается ли войти медсестра или пациент. Если я создаю отдельные пользовательские формы и моды для каждого из них, я сталкиваюсь с той же проблемой при обработке запросов AJAX, что и в Q1. Буду очень признателен за помощь в том, что я могу делать здесь не так.
Если я пойду сюда по кроличьей норе, буду очень признателен за предложения по более эффективной реализации вышеуказанных функций! Спасибо!
Код используется
Форма входа, медсестры / сеансы / new.html.erb:
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name),
:html => {:id => "sign_in_nurse"}, :format => :json,
:remote => true) do |f| %>
<div><%= f.label :email %><br />
<%= f.email_field :email, :autofocus => true %></div>
<div><%= f.label :password %><br />
<%= f.password_field :password %></div>
<% if devise_mapping.rememberable? -%>
<div><%= f.check_box :remember_me %> <%= f.label :remember_me %></div>
<% end -%>
<div><%= f.submit "Sign in" %></div>
<% end %>
<%= render "nurses/shared/links" %>
Coffeescript для обработки ответа AJAX, nurses.js.coffee:
$("form#sign_in_nurse").bind "ajax:success", (e, data, status, xhr) ->
if data.success
window.location.replace(data.redirect)
else
alert('failure!')
SessionsController:
class SessionsController < Devise::SessionsController
def create
resource = warden.authenticate!(:scope => resource_name, :recall => "sessions#failure")
return sign_in_and_redirect(resource_name, resource)
end
def sign_in_and_redirect(resource_or_scope, resource=nil)
scope = Devise::Mapping.find_scope!(resource_or_scope)
resource ||= resource_or_scope
sign_in(scope, resource) unless warden.user(scope) == resource
return render :json => {:success => true, :redirect => stored_location_for(scope) || after_sign_in_path_for(resource)}
end
def failure
return render :json => {:success => false, :errors => ["Login failed."]}
end
end
Код для генерации модальных:
<li><%= link_to image_tag('i_am_nurse.png', :size => "130x130"),
new_nurse_session_path , :data => { :target => "#ajax-modal", :toggle => "modal"} %></li>
Bootstrap модальный div:
<div id="ajax-modal" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="modal-body-content"></div>
<div class="ajax-loader"></div>
</div>
<div class='modal-footer'>
<button type="button" data-dismiss="modal" class="btn">Close</button>
</div>
</div>