How to implement in javascript so that after successful authorization, the user's data is displayed on the page?

B

bobanuk2015-02-10 12:27:22

JavaScript

bobanuk, 2015-02-10 12:27:22

Help please, knowledge in js zero I can not understand. How to implement in javascript so that after successful authorization on the application.html.erb page the user data is displayed? After a successful form submission, the window is minimized and the update does not occur.

<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);
    });
});

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

B

bobanuk, 2015-02-10
@bobanuk

Figured it out myself helped a lot railscasts/136-jquery

V

Viktor Vsk, 2015-02-10
@viktorvsk

You still upload the entire project to the github, and preferably with the vendor folder, where all the dependencies will be. And ask to understand
And who will debug? What mistake? In blogs.js, put console.log() with something in different places, see where the execution goes, where it doesn't.
And in general, in rails for such things they came up with * .js.erb - view in JS format