German (Deutsch) translation by Valentina (you can also view the original English article)

Ein unauffälliges Anmeldesystem ist eines, das dem Benutzer aus dem Weg geht. Dadurch wird Ihre Anwendung schöner und ausgefeilter. Dieser Artikel führt Sie durch den Prozess des Einrichtens von Benutzeranmeldungen und anschließendem Bestätigen des Prozesses, indem Sie das Formular in eine modale Box verschieben, die mit dem Server kommuniziert. Darüber hinaus zeigt Ihnen dieser Artikel, wie Sie das Setup mit jQuery und Prototype erstellen, damit Sie Ihre Lieblingsbibliothek auswählen können. In diesem Artikel wird davon ausgegangen, dass Sie Erfahrung mit Rails und jQuery oder Prototype haben.

Sie können Adman65/nettuts für eine erfolgreiche Anmeldung verwenden. Stellen Sie sicher, dass Sie schlechte Anmeldeinformationen verwenden, damit Sie sehen können, wie alles funktioniert.

Was machen wir?

Anfangen

Zunächst erstellen wir eine Dummy-Anwendung mit einer öffentlichen und einer privaten Seite. Die Root-URL ist die öffentliche Seite. Auf der öffentlichen Seite befindet sich ein Anmeldelink. Wenn sich der Benutzer erfolgreich anmeldet, wird er auf die private Seite umgeleitet. Wenn nicht, werden sie zurück zum Anmeldeformular weitergeleitet. Die private Seite zeigt den Benutzernamen. Wir werden dies als Ausgangspunkt für die Ajaxifizierung der Website verwenden.

Der erste Schritt besteht darin, mit dem Befehl Rails eine neue Anwendung zu generieren und dann authlogic zu installieren und einzurichten.

1	$ cd into-a-directory
2	$ rails unobtrusive-login

authlogic hinzufügen.

1	# /config/environment.rb
2	config.gem 'authlogic'

Installieren Sie nun die gems.

1	$ sudo gem install gemcutter
2	$ sudo gem tumble
3	$ sudo rake gems:install

Erstellen Sie als Nächstes ein Benutzermodell und fügen Sie der Migration die erforderlichen authlogischen Spalten hinzu.

$ ./script/generate model User
exists  app/models/
exists  test/unit/
exists  test/fixtures/
create  app/models/user.rb
create  test/unit/user_test.rb
create  test/fixtures/users.yml
create  db/migrate
create  db/migrate/20100102082657_create_users.rb

Fügen Sie nun die Spalten zur neuen Migration hinzu.

class CreateUsers < ActiveRecord::Migration
  def self.up
    create_table :users do |t|
      t.string    :login,               :null => false
      t.string    :crypted_password,    :null => false
      t.string    :password_salt,       :null => false
      t.string    :persistence_token,   :null => false
      t.timestamps
    end
  end

  def self.down
    drop_table :users
  end
end

Migrieren Sie die Datenbank.

1	$ rake db:migrate

Authlogic in das Benutzermodell aufnehmen.

1	# /app/models/user.rb
2	class User < ActiveRecord::Base
3	acts_as_authentic
4	end

Jetzt können wir einen Benutzer erstellen. Da es sich um eine Demo-App handelt, sind keine webbasierten Funktionen zum Anmelden erforderlich. Öffnen Sie also die Konsole und erstellen Sie einen Benutzer:

1	$ ./script/console
2	>> me = User.create(:login => 'Adman65', :password => 'nettuts', :password_confirmation => 'nettuts')

Jetzt haben wir einen Benutzer im System, aber wir haben keine Möglichkeit, uns anzumelden oder abzumelden. Dazu müssen wir die Modelle, Controller und Ansichten erstellen. Authlogic hat eine eigene Klasse zum Verfolgen von Anmeldungen. Wir können den Generator dafür verwenden:

1	# create the user session
2	$ ./script/generate UserSession

Als nächstes müssen wir den Controller generieren, der Benutzer an- und abmeldet. Sie können Sitzungen wie jede andere Ressource in Rails erstellen.

1	# create the session controller
2	$ ./script/generate controller UserSessions

Stellen Sie nun den Inhalt auf:

# /app/controllers/user_sessions_controller.rb
class UserSessionsController < ApplicationController  
  def new
    @user_session = UserSession.new
  end

  def create
    @user_session = UserSession.new(params[:user_session])
    if @user_session.save
      flash[:notice] = "Login successful!"
      redirect_back_or_default user_path
    else
      render :action => :new
    end
  end
end

Es sieht genauso aus wie ein Controller, der über ein Gerüst generiert wurde. Erstellen Sie nun den Benutzer-Controller mit öffentlichen und privaten Inhalten. Generieren Sie einen Benutzer-Controller. Innerhalb des Controllers verwenden wir einen Vorher-Filter, um den Zugriff auf die privaten Bereiche zu beschränken. Die Indexaktion ist öffentlich und die Show ist privat.

1	# create the users controller
2	$ ./script/generate controller users

Aktualisieren Sie den Inhalt:

# /app/controllers/users_controller.rb
class UsersController < ApplicationController
  before_filter :login_required, :only => :show

  def index
  end

  def show
    @user = current_user
  end

  private
  def login_required
    unless current_user
      flash[:error] = 'You must be logged in to view this page.'
      redirect_to new_user_session_path
    end
  end
end

Sie sollten beachten, dass current_user an dieser Stelle eine undefinierte Methode ist. Definieren Sie diese Methoden in ApplicationController. Öffnen Sie application_controller.rb und aktualisieren Sie den Inhalt:

# application controller
class ApplicationController < ActionController::Base
  helper :all # include all helpers, all the time
  protect_from_forgery # See ActionController::RequestForgeryProtection for details

  # From authlogic
  filter_parameter_logging :password, :password_confirmation
  helper_method :current_user_session, :current_user

  private
  def current_user_session
    @current_user_session ||= UserSession.find
  end

  def current_user        
    @current_user ||= current_user_session && current_user_session.user
  end
end

Zu diesem Zeitpunkt sind die Modelle und Steuerungen vollständig, die Ansichten jedoch nicht. Wir müssen Ansichten für ein Anmeldeformular und den öffentlichen und privaten Inhalt erstellen. Wir werden gem der raffinierten Generatoren verwenden, um ein grundlegendes Layout zu erstellen.

1	$ sudo gem install nifty-generators
2	$ ./script/generate nifty_layout

Zeit, um das Anmeldeformular zu erstellen. Wir werden hierfür einen Teil verwenden, da wir in Zukunft den Teil verwenden werden, um nur das Anmeldeformular im modalen Feld zu rendern. Hier ist der Code zum Erstellen des Anmeldeformulars. Es ist genau so, als würden Sie einen Blog-Beitrag oder ein anderes Modell erstellen.

# create the login views
# /app/views/user_sessions/_form.html.erb
<% form_for(@user_session, :url => user_session_path) do |form| %>
  <%= form.error_messages %>

  <p>
    <%= form.label :login %>
    <%= form.text_field :login %>
  </p>

  <p>
    <%= form.label :password %>
    <%= form.password_field :password %>
  </p>

  <%= form.submit 'Login' %>
<% end %>

Rendern Sie den Teil in der neuen Ansicht:

1	# /app/views/user_sessions/new.html.erb
2	<% title 'Login Please' %>
3	<%= render :partial => 'form' %>

Erstellen Sie einige grundlegende Seiten für den öffentlichen und privaten Inhalt. Die Indexaktion zeigt öffentlichen Inhalt und show zeigt privaten Inhalt an.

# create the dummy public page
# /app/views/users/index.html.erb
<% title 'Unobtrusive Login' %>

<p>Public Facing Content</p>

<%= link_to 'Login', new_user_session_path %>

Und für die private Seite:

# create the dummy private page
# /app/views/users/show.html.erb
<% title 'Welcome' %>
<h2>Hello <%=h @user.login %></h2>

<%= link_to 'Logout', user_session_path, :method => :delete %>

Löschen Sie die Datei /public/index.html und starten Sie den Server. Sie können sich jetzt bei der Anwendung an- und abmelden.

1	$ ./script/server

Hier sind einige Screenshots der Demo-Anwendung. Die erste ist die öffentliche Seite.

Nun das Anmeldeformular

Und die private Seite

Und schließlich wird der Zugriff verweigert, wenn Sie versuchen, http://localhost:3000/user zu besuchen

Der AJAX-Anmeldevorgang

Bevor wir fortfahren, müssen wir verstehen, wie Server und Browser zusammenarbeiten, um diesen Prozess abzuschließen. Wir wissen, dass wir JavaScript für die Modalbox und den Server verwenden müssen, um die Anmeldungen zu überprüfen. Lassen Sie uns klarstellen, wie dies funktionieren wird. Der Benutzer klickt auf den Anmeldelink. Anschließend wird ein modales Feld mit dem Anmeldeformular angezeigt. Der Benutzer füllt das Formular aus und wird entweder auf die private Seite umgeleitet oder das modale Feld wird mit einem neuen Anmeldeformular aktualisiert. Die nächste Frage ist, wie Sie die Modalbox aktualisieren oder dem Browser mitteilen, was zu tun ist, nachdem der Benutzer das Formular gesendet hat. Rails hat reply_to-Blöcke. Mit reply_to können Sie den Controller anweisen, unterschiedliche Inhalte zu rendern, wenn der Benutzer XML, HTML, JavaScript, YAML usw. angefordert hat. Wenn der Benutzer das Formular sendet, kann der Server JavaScript zurückgeben, um es im Browser auszuführen. Wir verwenden dieses Rendering für ein neues Formular oder eine Weiterleitung. Bevor wir tiefer tauchen, gehen wir den Vorgang der Reihe nach durch.

Benutzer geht zur öffentlichen Seite
Der Benutzer klickt auf den Anmeldelink
Das modale Feld wird angezeigt
Der Benutzer füllt das Formular aus
Das Formular wird an den Server gesendet
Der Server gibt JavaScript zur Ausführung zurück
Der Browser führt das JavaScript aus, das die Modalbox entweder umleitet oder aktualisiert.

Das ist das hohe Niveau. Hier ist die Implementierung auf niedriger Ebene.

Benutzer besucht die öffentliche Seite
Die öffentliche Seite enthält JavaScript, das ausgeführt wird, wenn das DOM bereit ist, das JavaScript an den Anmeldelink anfügt. Dieses Javscript führt eine XMLHTTPRequest (XHR von nun an) an den Server für etwas JavaScript durch. Das JavaScript setzt den Inhalt der Modalbox auf das Formular HTML. Das JavaScript macht auch etwas sehr Wichtiges. Es bindet die Übermittlungsaktion des Formulars an eine XHR mit POST-Daten an die Aktion des Formulars. Auf diese Weise kann der Benutzer das Anmeldeformular weiterhin in der Modalbox ausfüllen.
Die Modal Box hat jetzt das Formular und das erforderliche JavaScript
Der Benutzer klickt auf "Anmelden".
Die Funktion submit() wird aufgerufen, die einen POST XHR für die Aktion des Formulars mit seinen Daten ausführt.
Der Server generiert entweder das JavaScript für das Formular oder die Umleitung
Der Browser empfängt das JavaScript und führt es aus. Der Browser aktualisiert entweder die modale Box oder leitet den Benutzer über window.location weiter.

Am AJAX Ready Controller einen Peak nehmen

Schauen wir uns die neue Struktur für den UserSessions-Controller an.

class UserSessionsController < ApplicationController
  layout :choose_layout

  def new
    @user_session = UserSession.new
  end

  def create
    @user_session = UserSession.new(params[:user_session])

    if @user_session.save
      respond_to do |wants|
        wants.html { redirect_to user_path(@user_session.user) }
        wants.js { render :action => :redirect } # JavaScript to do the redirect
      end
    else
      respond_to do |wants|
        wants.html { render :new }
        wants.js # defaults to create.js.erb
      end
    end
  end

  private
  def choose_layout
    (request.xhr?) ? nil : 'application'
  end
end

Wie Sie sehen können, ist die Struktur anders. Innerhalb von if save, else bedingt, wird reply_to verwendet, um den richtigen Inhalt zu rendern. want.xx wobei xx ein Inhaltstyp ist. Standardmäßig fordern Prototype und jQuery Text/JavaScript an. Dies entspricht wants.js. Wir sind kurz davor, mit dem AJAX-Teil zu beginnen. Wir werden keine Plugins außer denen für Modalboxen verwenden. Wir verwenden Facebox für jQuery und ModalBox für Prototype.

Prototyp

Rails hat Unterstützung für Prototype eingebaut. Die JavaScript-Helfer von Rail sind Ruby-Funktionen, die JavaScript generieren und Prototype verwenden. Diese Technik ist als RJS (Ruby JavaScript) bekannt. Ein Beispiel ist remote_form_for, das wie der Standard for_for funktioniert und einige an onsubmit gebundene JS hinzufügt, die das Formular unter Verwendung seiner Methode mit seinen Daten an seine Aktion senden. Ich werde in diesem Artikel kein RJS verwenden, da ich Vanilla JS demonstrieren möchte. Ich denke, durch die Verwendung von reinem JS und die Eliminierung der JS-Helfer wird der Artikel für weniger erfahrene Entwickler zugänglicher. Abgesehen davon können Sie diese Schritte problemlos mit RJS/Prototype-Helfern ausführen, wenn Sie dies wünschen.

Das Hinzufügen eines Prototyps zur Anwendung ist sehr einfach. Wenn Sie den Befehl Rails verwenden, werden der Prototyp und die scriptaculous-Dateien in/public/JavaScripts erstellt. Sie einzuschließen ist einfach. Öffnen Sie /app/views/layouts/application.erb und fügen Sie diese Zeile in das Head-Tag ein:

1	<%= JavaScript_include_tag :defaults %>

JavaScript_include_tag erstellt Skript-Tags für Standarddateien in/public/JavaScripts, vor allem prototype.js, effects.js und application.js. effects.js ist scriptaculous. application.js ist eine Datei, mit der Sie anwendungsspezifisches JS behalten können. Jetzt brauchen wir ein Modal Box Plugin. Wir werden dies nutzen. Es ist ein sehr schönes Modal Box Plugin, das von OSX inspiriert ist. Die Quelle wird auf GitHub gehostet, daher müssen Sie die Dateien in Ihrem Projektverzeichnis klonen und verschieben. Zum Beispiel:

$ cd code
$ git clone git://github.com/okonet/modalbox.git
$ cd modalbox
# move the files in the correct directories.
# move modalbox.css into /public/stylesheets
# move modalbox.js into /public/JavaScripts
# move spinner.gif into /public/images

Fügen Sie nun die Stylesheets und JavaScript in Ihre Anwendung ein.


  <%= stylesheet_link_tag ‘application’ %>
  <%= stylesheet_link_tag ‘modalbox’ %> 
  <%= JavaScript_include_tag :defaults %>
  <%= JavaScript_include_tag ‘modalbox’%>

Lassen Sie uns jetzt unseren Login-Link öffnen, um eine Modalbox zu öffnen. Dazu müssen wir JavaScript hinzufügen, das ausgeführt wird, wenn das DOM bereit ist, das die Modalbox an unseren Link anfügt. Wenn der Benutzer auf den Anmeldelink klickt, führt der Browser ein GET zu/user_sessions/new durch, das das Anmeldeformular enthält. Der Login-Link verwendet den Selektor #Login-Link. Aktualisieren Sie den Anmeldelink, um die neue ID in /app/views/users/index.html.erb zu verwenden. Ändern Sie die Funktion link_to folgendermaßen:

1	<%= link_to 'Login', new_user_session_path, :id => 'login-link' %>

Das gibt uns einen #Login-Link. Nun soll das JavaScript eine Modalbox anhängen. Fügen Sie diese JS in /public/JavaScripts/application.js hinzu

document.observe('dom:loaded', function() {
    $('login-link').observe('click', function(event) {
        event.stop();
        Modalbox.show(this.href,
            {title: 'Login', 
            width: 500}
        );
    });
})

Es gibt einige einfache JS, wenn der Benutzer auf den Link klickt, wird ein modales Feld mit der href des Links geöffnet. Weitere Informationen finden Sie in der Modalbox-Dokumentation. Hier ist ein Screenshot:

Beachten Sie, dass das Innere der Modalbox unserer Standardseite sehr ähnlich sieht. Rails verwendet unser Anwendungslayout für alle HTML-Antworten. Da unsere XHRs HTML-Fragmente möchten, ist es sinnvoll, ohne Layouts zu rendern. Beziehen Sie sich auf die Beispielsteuerung. Ich habe eine Methode zur Bestimmung des Layouts eingeführt. Fügen Sie dies zu UserSessionsController hinzu, um das Layout für XHRs zu deaktivieren.

class UserSessionsController < ApplicationController  
  layout :choose_layout

  def new
    @user_session = UserSession.new
  end

  def create
    @user_session = UserSession.new(params[:user_session])
    if @user_session.save
      flash[:notice] = "Login successful!"
      redirect_to user_path
    else
      render :action => :new
    end
  end

  def destroy
    current_user_session.destroy
    flash[:notice] = "Logout successful!"
    redirect_to root_path
  end

  private
  def choose_layout
    (request.xhr?) ? nil : 'application'
  end
end

Aktualisieren Sie die Seite und klicken Sie auf den Link, um Folgendes zu erhalten:

Füllen Sie das Formular aus und sehen Sie, was passiert. Wenn Sie das von mit schlechten Informationen ausfüllen, werden Sie außerhalb des Modalfelds umgeleitet. Wenn Sie sich korrekt anmelden, werden Sie normal umgeleitet. Entsprechend den Anforderungen sollte der Benutzer in der Lage sein, das Formular immer wieder in der Modalbox auszufüllen, bis er sich korrekt anmeldet. Wie können wir das erreichen? Wie zuvor beschrieben, müssen wir AJAX verwenden, um Daten an den Server zu senden, und dann JavaScript verwenden, um die modale Box mit dem Formular zu aktualisieren oder eine Umleitung durchzuführen. Wir wissen, dass die Modalbox ein GET für HTML ausführt. Nach dem Anzeigen der anfänglichen Modalbox müssen wir JS schreiben, damit sich das Formular im AJAX-Stil selbst übermittelt. Dadurch kann sich das Formular innerhalb der Modalbox einreichen. Das einfache Hinzufügen dieses Codes nach dem Aufruf der Modalbox funktioniert nicht, da die XHR möglicherweise noch nicht fertig ist. Wir müssen den AfterLoad-Rückruf von Modalbox verwenden. Hier ist der neue Code:

document.observe('dom:loaded', function() {
    $('login-link').observe('click', function(event) {
        event.stop();
        Modalbox.show(this.href,
            {title: 'Login', 
            width: 500,
            afterLoad: function() {
                $('new_user_session').observe('submit', function(event) {
                    event.stop();
                    this.request();
                })
            }}
        );      
    });
})

Form #request ist eine bequeme Methode zum Serialisieren und Senden des Formulars über Ajax.Request an die URL des Aktionsattributs des Formulars - genau das, was wir wollen. Jetzt können Sie das Formular innerhalb des Modals ausfüllen, ohne es zu schließen. Die Client-Seite ist jetzt abgeschlossen. Was ist mit der Serverseite? Der Client sendet einen POST, in dem JS zurückgegeben werden soll. Der Server muss entweder JavaScript zurückgeben, um das Formular zu aktualisieren, oder eine Umleitung rendern. Im UserSessionsController verwenden wir reply_to, um die JS-Anforderung zu verarbeiten, und eine Bedingung, um das richtige JS zurückzugeben. Beginnen wir mit der Behandlung des fehlgeschlagenen Anmeldefalls. Der Server muss JS zurückgeben, das das Formular aktualisiert, und das neue Formular anweisen, es über Ajax zu senden. Wir platzieren diese Vorlage in /app/views/users_sessions/create.js.erb. Hier ist die Struktur für die neue Erstellungsaktion:

def create
  @user_session = UserSession.new(params[:user_session])
  if @user_session.save
    flash[:notice] = "Login successful!"
    redirect_to user_path
  else
    respond_to do |wants|
      wants.html { render :new }
      wants.js # create.js.erb
    end
  end
end

Füllen wir nun create.js.erb aus:

$('MB_content').update("<%= escape_JavaScript(render :partial => 'form') %>");
Modalbox.resizeToContent();
$('new_user_session').observe('submit', function(event) {
    event.stop();
    this.request();
});

Zuerst aktualisieren wir den Inhalt, um das neue Formular aufzunehmen. Dann ändern wir die Größe der Modalbox. Als nächstes ajaxifizieren wir das Formular wie zuvor. Voilla, Sie können das Formular so oft ausfüllen, wie Sie möchten.

Als nächstes müssen wir den Umleitungsfall behandeln. Erstellen Sie eine neue Datei in /app/views/users_sessions/redirect.js.erb:

1
2	window.location=”<%= user_path %>”;

Aktualisieren Sie jetzt die Erstellungsaktion, um den Umleitungsprozess zu handhaben:

def create
  @user_session = UserSession.new(params[:user_session])
  if @user_session.save
    respond_to do |wants|
      wants.html do 
        flash[:notice] = "Login successful!"
        redirect_to user_path
      end

      wants.js { render :redirect }
    end
  else
    respond_to do |wants|
      wants.html { render :new }
      wants.js # create.js.erb
    end
  end
end

Und das ist es! Versuchen Sie nun, sich mit den richtigen Anmeldeinformationen anzumelden, und Sie werden zur privaten Seite weitergeleitet. Versuchen Sie zum weiteren Lernen, einen Drehfeld und eine Benachrichtigung hinzuzufügen, die dem Benutzer mitteilen, dass das Formular gesendet wird oder dass er umgeleitet wird. Die Anwendung funktioniert weiterhin, wenn für den Benutzer auch JavaScript deaktiviert ist.

jQuery

Da ich den Prototyp-Prozess bereits behandelt habe, werde ich nicht mehr auf die gleichen Details wie zuvor eingehen. Stattdessen werde ich schnell das alternative JavaScript beschreiben, das der Anwendung hinzugefügt werden soll. Die jQuery-Version hat genau die gleiche Struktur wie die Prototype-Version. Alles, was wir ändern müssen, ist, was in application.js, create.js.erb und in JavaScript/css enthalten ist.

Als erstes müssen wir jQuery und Facebox herunterladen. Verschieben Sie jQuery als jquery.js in/public/JavaScripts. Verschieben Sie für Facebox die Bilder in/public/images /, Stylesheets in/public/stylesheets und schließlich die JS in/public/JavaScripts. Aktualisieren Sie nun /app/views/layouts/application.html.erb, um die Änderungen widerzuspiegeln:

<head>
  <title><%= h(yield(:title) || "Untitled") %></title>
  <%= stylesheet_link_tag 'facebox' %>
  <%= stylesheet_link_tag 'application' %>    
  <%= JavaScript_include_tag 'jquery' %>
  <%= JavaScript_include_tag 'facebox' %>
  <%= JavaScript_include_tag 'application' %>
</head>

Facebox wird mit einem Standard-Stylesheet geliefert, das davon ausgeht, dass Sie Ihre Bilder in/facebox haben. Sie müssen diese Selektoren in facebox.css folgendermaßen aktualisieren:

#facebox .b {
  background:url(/images/b.png);
}

#facebox .tl {
  background:url(/images/tl.png);
}

#facebox .tr {
  background:url(/images/tr.png);
}

#facebox .bl {
  background:url(/images/bl.png);
}

#facebox .br {
  background:url(/images/br.png);
}

Jetzt hängen wir die Facebox an den Login-Link an. Öffnen Sie /public/JavaScripts/application.js und verwenden Sie Folgendes:

$(document).ready(function() {
    $('#login-link').facebox({
        loadingImage : '/images/loading.gif',
    closeImage   : '/images/closelabel.gif',
    });
});

Ich überschreibe die Standardeinstellungen für die Bilder, um den neuen Bildpfad wiederzugeben. Starten Sie den Server und gehen Sie zur Indexseite. Sie sollten eine schöne Facebox mit dem Anmeldeformular sehen:

Als nächstes müssen wir das Formular so einstellen, dass es sich über AJAX selbst übermittelt. Wie zuvor müssen wir Rückrufe verwenden, um Code auszuführen, nachdem die Modalbox fertig ist. Wir verwenden die Post-Methode von jQuery für die XHR-Anforderung. Facebox hat einen After-Enthüllungs-Haken, den wir verwenden können. application.js:

$(document).ready(function() {
    $('#login-link').facebox({
        loadingImage : '/images/loading.gif',
        closeImage   : '/images/closelabel.gif',
    });

    $(document).bind('reveal.facebox', function() {
        $('#new_user_session').submit(function() {
            $.post(this.action, $(this).serialize(), null, "script");
            return false;
        });
    });
});

Das Aktualisieren von create.js.erb sollte einfach genug sein. Wir müssen den Inhalt der Facebox aktualisieren und das Formular erneut bestätigen. Hier ist der Code:

$('#facebox .content').html("<%= escape_JavaScript(render :partial => 'form') %>");
$('#new_user_session').submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
});

Und das ist es! Hier ist das Endprodukt:

Code herunterladen

Den Code erhalten Sie hier. Für jede Bibliothek gibt es Zweige, sodass Sie die Prototype- oder jQuery-Versionen überprüfen können. Fragen, Kommentare, Bedenken? Nochmals vielen Dank für das Lesen!

Folgen Sie uns auf Twitter oder abonnieren Sie den Nettuts+ RSS-Feed, um die besten Webentwicklungs-Tutorials im Web zu erhalten.

Wie kann man ein unauffälliges Anmeldesystem in Rails erstellen?