Umgang mit js.erb-Dateien in Rails 3
Ich bin Umwandlung von einem standard-Gerüst generiert Anwendung mit AJAX und JQuery in einer ähnlichen Weise zu, dass die angegebenen http://stjhimy.com/posts/07-creating-a-100-ajax-crud-using-rails-3-and-unobtrusive-javascript.
Ich alle Anweisungen befolgt :
- Erstellen eines zusammengesetzten Index-Ansicht mit 2 Teiltöne;
- Aktualisiert den Controller,nur die Beibehaltung Index, Create, Edit,Update und Destroy actions;
- js erstellt.erb-Dateien für das Erstellen, Bearbeiten, aktualisieren und zerstören Aktionen, die die JQuery-Funktionen zur Aktualisierung der DOM.
Kann nicht scheinen, um den Zugriff auf die js.erb Dateien an. Setzen Sie die js.erb in der mit dem anzeigen von Dateien , zum Beispiel app/views/customers/create.js.erb
Den code für das erstellen.js.erb ist :
<% if @customer.errors.any? -%>
/*Hide the Flash Notice div*/
$("#flash_notice").hide(300);
/*Update the html of the div customer_errors with the new one*/
$("#customer_errors").html("<% @customer.errors.full_message.each do |msg| %>
<li><%= msg %></li>
<% end %>");
/*Show the div customer_errors*/
$("#cust0mer_errors").show(300);
<% else -%>
/*Hide the div customer_errors*/
$("#customer_errors").hide(300);
/*Update the html of the div flash_notice with the new one */
$("#flash_notice").html("<%= flash[:notice] %>");
/*Show the flash_notice div*/
$("#flash_notice").show(300);
/*Clear the entire form*/
$(":input:not(input[type=submit])").val("");
/*Replace the html of the div posts_list with the updated new one*/
$("#customers_list").html("<%= render "customers" %>";
<% end %>
Den code für die Formulare unter:
Den index.html-Code.erb-Datei
<div id="customer_form"><%= render 'form' %></div>
<div id="customers_list"><%= render 'customers' %></div>
Den _form.html,erb 'partielle Datei'
<%= form_for(@customer, :remote => true) do |f| %>
<div id="customer_errors" style="display:none"></div>
<div class="field">
<%= f.label :firstname %>
<%= f.text_field :firstname %>
<%= f.label :lastname %>
<%= f.text_field :lastname %>
</div>
<div class="field">
<%= f.label :email %>
<%= f.text_field :email %>
<%= f.label :phone %>
<%= f.text_field :phone %>
</div>
<div class="field">
<%= f.label :password %>
<%= f.text_field :password %>
<%= f.label :address_id %>
<%= f.text_field :address_id %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
Die Datei für die _customers.html-Code.erb teilweise ist:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Phone</th>
<th>Password</th>
<th>Address</th>
<th></th>
<th></th>
<th></th>
</tr>
<% @customers.each do |customer| %>
<tr>
<td><%= customer.firstname %></td>
<td><%= customer.lastname %></td>
<td><%= customer.email %></td>
<td><%= customer.phone %></td>
<td><%= customer.password %></td>
<td><%= customer.address_id %></td>
<td><%= link_to 'Edit', edit_customer_path(customer), :remote => true %></td>
<td><%= link_to 'Destroy', customer, :remote => true, :confirm => 'Are you sure?', :method => :delete %></td>
</tr>
<% end %>
</table>
Bearbeiten
neueste version der Kunden-controller:
class CustomersController < ApplicationController
before_filter :load
def load
@customers = Customer.all
@customer = Customer.new
end
def index
end
def create
@customer = Customer.new(params[:customer])
if @customer.save
flash[:notice] = "Customer was successfully created."
@customers = Customer.all
respond_to do |format|
format.js
end
end
end
def edit
@customer = Customer.find(params[:id])
respond_to do |format|
format.js
end
end
def update
@customer = Customer.find(params[:id])
if @customer.update_attributes(params[:customer])
flash[:notice] = "Customer was successfully updated."
@customers = Customer.all
respond_to do |format|
format.js
end
end
end
def destroy
@customer = Customer.find(params[:id])
@customer.destroy
flash[:notice] = "Customer successfully destroyed"
@customers = Customer.all
respond_to do |format|
format.js
end
end
end
Die neueste version der layout-Vorlage hat tags wie folgt, nachdem ich die chansen Jquery.js fille zu rails.js
<%= stylesheet_link_tag :all %>
<%= javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' %>
<%= javascript_include_tag 'rails' %>
<%= csrf_meta_tag %>
Neuesten logs:
Started GET "/customers" for 127.0.0.1 at Wed Dec 14 21:16:14 +0000 2011
Processing by CustomersController#index as HTML
Customer Load (1.3ms) SELECT "customers".* FROM "customers"
Rendered customers/_form.html.erb (14.1ms)
Rendered customers/_customers.html.erb (28.1ms)
Rendered customers/index.html.erb within layouts/application (47.6ms)
Completed 200 OK in 74ms (Views: 56.3ms | ActiveRecord: 1.3ms)
Started GET "/customers/13/edit" for 127.0.0.1 at Wed Dec 14 21:17:20 +0000 2011
Processing by CustomersController#edit as JS
Parameters: {"id"=>"13"}
Customer Load (1.1ms) SELECT "customers".* FROM "customers"
Customer Load (0.5ms) SELECT "customers".* FROM "customers" WHERE "customers"."id" = 13 LIMIT 1
Rendered customers/_form.html.erb (16.1ms)
Rendered customers/edit.js.erb (17.6ms)
Completed 200 OK in 43ms (Views: 27.6ms | ActiveRecord: 1.5ms)
Started GET "/customers/13/edit" for 127.0.0.1 at Wed Dec 14 21:17:31 +0000 2011
Processing by CustomersController#edit as JS
Parameters: {"id"=>"13"}
Customer Load (1.0ms) SELECT "customers".* FROM "customers"
Customer Load (0.3ms) SELECT "customers".* FROM "customers" WHERE "customers"."id" = 13 LIMIT 1
Rendered customers/_form.html.erb (25.9ms)
Rendered customers/edit.js.erb (28.8ms)
Completed 200 OK in 52ms (Views: 39.0ms | ActiveRecord: 1.3ms)
Started DELETE "/customers/18" for 127.0.0.1 at Wed Dec 14 21:18:31 +0000 2011
Processing by CustomersController#destroy as JS
Parameters: {"id"=>"18"}
Customer Load (1.0ms) SELECT "customers".* FROM "customers"
Customer Load (0.4ms) SELECT "customers".* FROM "customers" WHERE "customers"."id" = 18 LIMIT 1
AREL (0.4ms) DELETE FROM "customers" WHERE "customers"."id" = 18
Customer Load (0.7ms) SELECT "customers".* FROM "customers"
Rendered customers/_customers.html.erb (120.3ms)
Rendered customers/destroy.js.erb (122.1ms)
Completed 200 OK in 198ms (Views: 134.1ms | ActiveRecord: 2.5ms)
Started GET "/customers" for 127.0.0.1 at Wed Dec 14 21:20:00 +0000 2011
Processing by CustomersController#index as HTML
Customer Load (1.6ms) SELECT "customers".* FROM "customers"
Rendered customers/_form.html.erb (19.1ms)
Rendered customers/_customers.html.erb (23.8ms)
Rendered customers/index.html.erb within layouts/application (50.6ms)
Completed 200 OK in 76ms (Views: 54.9ms | ActiveRecord: 1.6m
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn Sie Ihre
form
undlink_to
Objekte, die Sie benötigen, um sicherzustellen, dass Sie haben eine:remote => true
auf Sie, sonst wird die route nicht machen die Aktion per JS. Stattdessen machen wird es es mit den Standard-HTML.Beispiel:
oder
Also, stellen Sie sicher, dass die neuesten jQuery und jQuery-Schienen-adapter installiert: https://github.com/rails/jquery-ujs
Als seitliche Anmerkung, die Sie nicht brauchen
format.html
im code oben, wenn du tust, 100% ajax, der für die CRUD-Aktionen, da alles, was Sie jemals Rendern sind die JS-Dateien (format.js).Update:
Ich denke, Sie sind Missverständnis, ein paar Dinge... Die Tutorials, die Sie Lesen, spricht nur über die änderung der CRUD (create, read, update, delete) Aktionen in 100% ajax-calls, das heißt, Sie sind die einzigen, die reagieren mit der Darstellung von
.js.erb
- Dateien. Also, wenn Sie überprüfen, dass die SeiteProcessing SomeController#some_action as JS
es wird nur gelten für diecreate
,show
,update
, unddestroy
Aktionen innerhalb Ihrer Kunden-controller.Für die jQuery-und jQuery-UJS installieren auf Rails 3.0, befolgen Sie diese Anweisungen:
Führen
rails generate jquery:install
Ändern Sie Ihre layout-Vorlage zu diesem:
Ich muss sagen, das tutorial, die Sie Lesen, ist ungefähr das schlechteste tutorial das ich jemals gelesen habe. Da Sie scheinen sehr neu zu Ruby on Rails, so würde ich hoch empfehle die Lektüre von einem anderen tutorial (wie diese, wenn Sie noch Lesen möchten über AJAX w/Schienen: http://net.tutsplus.com/tutorials/javascript-ajax/using-unobtrusive-javascript-and-ajax-with-rails-3/ oder sogar etwas, wirklich gut, wie das lernen Schienen sich besser: http://ruby.railstutorial.org/ruby-on-rails-tutorial-book).
create
controller-action:@customers = customer.all
sollte@customers = Customer.all
... und auch ein anderer Fehler in Ihremcreate.js.erb
Datei:$("#cust0mer_errors").show(300);
sollte$("#customer_errors").show(300);
Können Sie auch stellen Sie sicher, dass Sie installiert ist jQuery und das jQuery-Rails-adapter (github.com/rails/jquery-ujs) und entfernt dieformat.html
Referenzen?Processing by CustomersController#create as HTML
(format.html aber wenn der JS-Aufruf war korrekt funktionieren (via jQuery), dann sollte es schonProcessing by CustomersController#create as JS
(format.js) stattshow
Fehler ist, weil Sie nicht haben einedef show
Aktion in Ihrem CustomersController. Ich hasse es zu sagen, aber das tutorial, die Sie Lesen, ist schrecklich und es scheint nichts zu tun, aber was Sie noch mehr Verwirrung. Ich verlinkte auf ein paar gute tutorials in meine aktualisierte Antwort.getJSON
problem, so gehen check it out, wenn Sie die chance bekommen. Ich habe es in Ordnung, die in meinem lokalen rails-server