2011-12-13 7 views
5

Я конвертирую стандартное приложение, созданное с помощью scaffold, для использования AJAX и JQuery аналогично тому, как указано в http://stjhimy.com/posts/07-creating-a-100-ajax-crud-using-rails-3-and-unobtrusive-javascript.Обращение с файлами js.erb в Rails 3

Я следовал всем инструкциям:

  • Создание составного Индексный с помощью 2 партиалы;
  • Обновлен контроллер, только сохраняя указатели, создавайте, редактируйте, обновляйте и уничтожайте действия;
  • создал файлы js.erb для создания, редактирования, обновления и уничтожения действий, которые используют функции JQuery для обновления DOM.

Невозможно получить доступ к файлам js.erb вообще. Поместите js.erb в с видом файлов, например app/views/customers/create.js.erb

Код для create.js.erb является:

<% 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 %> 

Код формы ниже:

index.html.erb файл

<div id="customer_form"><%= render 'form' %></div> 
<div id="customers_list"><%= render 'customers' %></div> 

_form.html, эрб частичный файл

<%= 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 %> 

Файл для _customers.html.erb частичному является:

<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> 

Редактировать

последняя версия контроллера Customers:

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 

Последняя версия шаблон макета включает теги следующим образом после того, как я пробовал Jquery.js fille для rai ls.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 %> 

Последних журналы:

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 

ответ

4

При создании form и link_to объектов, вы должны убедиться, что они имеют :remote => true на них иначе маршрут не будет оказывать действие с помощью JS , Вместо этого он отобразит его с помощью HTML по умолчанию.

Пример:

<%= form_for(@post, :remote => true) do |f| %> 

или

<%= link_to "Edit", edit_post_path(post), :remote => true %> 

Кроме того, убедитесь, что у вас есть последняя JQuery и JQuery Rails адаптер установлен: https://github.com/rails/jquery-ujs

В качестве примечания, вы не» t нужно format.html в вашем коде выше, если вы делаете 100% -ный аякс для действий CRUD, так как все, что вы когда-либо создавали, это файлы JS (format.js).


Update: Я думаю, вы непонимании несколько вещей ... В учебнике вы читаете только разговоры о смене CRUD (создание, чтение, обновление, удаление) действия в 100% АЯКС вызовов, означает, что они единственные, которые будут реагировать на рендеринг .js.erb файлов. Поэтому, когда вы проверяете, что страница Processing SomeController#some_action as JS, она будет только относится к create, , update и destroy действиям в вашем контроллере клиентов.

Для JQuery и JQuery-UJS установить на Rails 3.0 следующие направления:

Обязательно избавиться от rails.js файл, если он существует, и вместо того, чтобы использовать новые jquery_ujs. js, который копируется в общий каталог. Выберите, если будет предложено переписать jquery_ujs.js.

Затем запустите rails generate jquery:install

Изменить шаблон макета для этого:

<%= stylesheet_link_tag :all %> 
<%= javascript_include_tag :defaults %> 
<%= csrf_meta_tag %> 

Я должен сказать, что учебник вы читаете о худшем учебнике я когда-либо читал. Поскольку вы, похоже, очень новы для Ruby on Rails, поэтому я бы высоко рекомендую прочитать другой учебник (например, если вы все еще хотите прочитать о AJAX w/Rails: http://net.tutsplus.com/tutorials/javascript-ajax/using-unobtrusive-javascript-and-ajax-with-rails-3/ или даже что-то действительно хорошее, как этот, чтобы узнать Rails сам лучше: http://ruby.railstutorial.org/ruby-on-rails-tutorial-book).

+0

Я поставил формы вверх - все, что вы хотите? – JimmyBandit

+0

Можете ли вы публиковать журналы сервера, когда отправляете сообщение в форме или щелкните ссылку? Также проверьте консоль браузера, чтобы увидеть, есть ли какие-либо ошибки JS. – iwasrobbed

+0

Поместите то, что я мог там, - также зафиксировал несколько опечаток с файлом create.js.erb. Замечательно, что один не одинок. – JimmyBandit

Смежные вопросы