@bobanuk

Как реализовать на javascript, что бы после успешной авторизации на странице отображались данные пользователя?

Помогите пожалуйста, знания в js нулевые не могу понять. Как реализовать на javascript, что бы после успешной авторизации на странице application.html.erb отображались данные пользователя? После успешной отправки формы окно сворачивается а обновление не происходит.

<html>
<head>
  <title>Devise</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

  <%= csrf_meta_tags %>
</head>
<body>

<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>

<div class="deviseform">
<% if current_user %>
    <%= "Hello, #{current_user.email}" %>
    <%= link_to "Sign out", destroy_user_session_path, :method => :delete %>
<% else %>
    <%= link_to "Sign in", "#sign_in", "data-toggle" => "modal", :class => 'btn btn-primary btn-lg' %>
    <%= link_to "Sign up", "#sign_up", "data-toggle" => "modal", :class => 'btn btn-primary btn-lg' %>
    <%= render 'shared/sign_in' %>
    <%= render 'shared/sign_up' %>
<% end %>
</div>

<ul>
  <li><%= link_to "Главная",    root_path %></li>
</ul>
<%= yield %>
</body>
</html>


_sign_in.html.erb
<div class="modal fade" id="sign_in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Sign in</h4>
      </div>
      <div class="modal-body">
        <%= form_for(User.new, url: session_path(:user), html:{id: 'sign_in_user', :'data-type' => '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, autocomplete: "off" %>
            </div>

            <% if Devise.mappings[:user].rememberable? -%>
                <div>
                  <%= f.check_box :remember_me %>
                  <%= f.label :remember_me %>
                </div>
            <% end -%>

            <div>
              <%= f.submit "Sign in" %>
            </div>
        <% end %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


_sign_up.html.erb
<div class="modal fade" id="sign_up" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Sign up</h4>
      </div>
      <div class="modal-body">
        <%= form_for(User.new, url: registration_path(:user), html: {id: 'sign_up_user', :'data-type' => '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, autocomplete: "off" %>
            </div>

            <div>
              <%= f.label :password_confirmation %><br />
              <%= f.password_field :password_confirmation, autocomplete: "off" %>
            </div>

            <div><%= f.submit "Sign up" %></div>
        <% end %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


blogs.js
$(function() {
    return $("form#sign_in_user, form#sign_up_user").bind("ajax:success", function(event, xhr, settings) {
        return $(this).parents('.modal').modal('hide');
    }).bind("ajax:error", function(event, xhr, settings, exceptions) {
        var error_messages;
        error_messages = xhr.responseJSON['error'] ? "<div class='alert alert-danger pull-left'>" + xhr.responseJSON['error'] + "</div>" : xhr.responseJSON['errors'] ? $.map(xhr.responseJSON["errors"], function(v, k) {
            return "<div class='alert alert-danger pull-left'>" + k + " " + v + "</div>";
        }).join("") : "<div class='alert alert-danger pull-left'>Unknown error</div>";
        return $(this).parents('.modal-content').children('.modal-footer').html(error_messages);
    });
});
  • Вопрос задан
  • 2780 просмотров
Решения вопроса 1
@bobanuk Автор вопроса
Разобрался сам очень помогли railscasts/136-jquery
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
viktorvsk
@viktorvsk
Вы еще залейте на гитхаб полностью проект, а желательно и с папкой vendor, где будут все зависимости. И попросите разобраться

После успешной отправки формы окно сворачивается а обновление не происходит.

А дебажить кто будет ? Какая ошибка? В blogs.js в разных местах повставляйте console.log() с чем-нибудь, посмотрите, куда выполнение доходит, куда нет.

И вообще, в рельсах для таких вещей придумали *.js.erb - вью в формате JS
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
29 мар. 2024, в 17:14
4000 руб./за проект
29 мар. 2024, в 17:04
5000 руб./за проект
29 мар. 2024, в 17:03
3000 руб./за проект