Придумайте несколько моделей, загрузите модал с помощью входа в AJAX

У меня есть 2 типа пользователей - медсестры и пациенты, и я хочу настроить вход в систему таким образом, чтобы на странице приветствия / посадки были две кнопки, которые открывают модальный загрузчик с формой входа для каждого типа пользователей. Я хотел бы, чтобы форма входа отправляла запрос AJAX, чтобы при наличии ошибок они отображались в самом модале.

Я использую Devise для аутентификации, и у меня есть две модели для медсестер и пациентов. Первоначально я установил модальный, чтобы загрузить URL для new_nurse_session_path при нажатии на кнопку изменил форму входа в систему устройства по умолчанию для отправки запросов AJAX, использовал пользовательский SessionsController для обработки новых сессий и отправки JSON-ответов назад, а затем иметь JS-код, который перехватывает ответ. Это работало (хотя с некоторыми проблемами, как показано ниже) было довольно медленно, так как он загружал всю страницу из nurses/sessions/new.html.erb наряду с заголовком, навигационной панелью и т. д.

Вопросы

  1. Когда код JS перехватывал запрос AJAX, когда вся страница входа была открыта в модальном режиме (согласно приведенному ниже коду), если я открывал страницу напрямую, запрос AJAX не обрабатывался, даже если сервер отправлял правильный JSON назад - есть ли что-то, что я делаю не так, что может быть причиной этой проблемы?

  2. Чтобы избежать загрузки всей новой страницы сеанса в модальном режиме, я следовал приведенным здесь инструкциям https://github.com/plataformatec/devise/wiki/How-To:-Display-a-custom-sign_in-form-anywhere-in-your-app, чтобы поместить форму в модальное. Проблема, с которой я здесь сталкиваюсь, заключается в том, как создать помощника, чтобы он определял ресурс и сопоставления Devise в зависимости от того, пытается ли войти медсестра или пациент. Если я создаю отдельные пользовательские формы и моды для каждого из них, я сталкиваюсь с той же проблемой при обработке запросов AJAX, что и в Q1. Буду очень признателен за помощь в том, что я могу делать здесь не так.

  3. Если я пойду сюда по кроличьей норе, буду очень признателен за предложения по более эффективной реализации вышеуказанных функций! Спасибо!

Код используется

Форма входа, медсестры / сеансы / 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>​

0 ответов

Другие вопросы по тегам