Rails 4 renderowanie częściowe z ajaxem, jquery,: remote => true i response_to

Question

Wygląda na to, że renderowanie strony dynamicznie z AJAX w odpowiedzi na przesłany formularz jest powszechne. Żadne inne podobne pytania nie koncentrują się na tym, jak to zrobić w sposób ogólny.

Najlepszym blogu udało mi się znaleźć na ten temat tutaj: http://www.gotealeaf.com/blog/the-detailed-guide-on-how-ajax-works-with-ruby-on-rails

Pytanie: Jak mogę kodować mojej aplikacji szyn tak, że mogę spowodować częściowy widok załadować za pośrednictwem AJAX kiedy złożyć formularz lub kliknij link?

Answer 1

Kilka rzeczy musi być obecny na tej pracy, w tym: zdalne => true flagę na element wyzwalający The respond_to : Flaga js w definicji klasy kontrolera, trasa, widok częściowy, a na końcu jquery do faktycznego renderowania części dynamicznej musi być zawarty w osobnym pliku .html.js.
Poniższe przykłady dotyczą fikcyjnej metody "render_partial_form" kontrolera "someajax".

1) Dodaj: zdalne => true flagę elementu wyzwalającego
umieścić: zdalne => true flagę na link tag lub formularza w pliku .html.erb (Widok) dla element, który chcesz wywołać wywołanie AJAX, jak

<%= form_tag("/someajax", method: 'post', :remote => true) do %> 

z: remote => true, szyny nie zostaną automatycznie przełączać widoki, które pozwala jQuery być uruchamiany zamiast. Można go użyć z tagiem form_tag, tag_linii lub innymi typami tagów.

2) Dodaj „respond_to: HTML, JS” na górze kontrolera

Na szczycie definicji klasy kontrolera, trzeba teraz określić, że kontroler może odpowiedzieć na javascript, jak również jak HTML:

class SomeajaxController < ApplicationController 
    respond_to :html, :js 

    ... 

    def render_partial_form 
     @array_from_controller = Array.new 

     ... 

    end 
end 

w tym przykładzie jest zmienna są przekazywane z kontrolera do widoku: tablica wybranych opcji lista zwanych @array_from_controller.

3) Route czasownik http metody kontrolera za

Ponieważ chciałem Wysłany formularz do wyzwalania wywołania AJAX, że kierowane czasownika pocztowy dla mojego kontrolera do widoku render_partial_form.

post 'someajax' => 'someajax#render_partial_form 

Metoda kontroler określa def render_partial_form meczów z nazwą widzenia _render_partial_form.html.erb więc nie ma potrzeby, aby wywołać akcję renderowania ze sterownika.

4) Tworzenie częściowy widok
Częściowy widok powinny mieć taką samą nazwę jako metody kontrolera i zaczynają się od podkreślenia: _render_partial_form.html.erb

<h3>Here is the partial form</h3> 

<%= form_tag("/next_step", method: 'post') do %> 
    <%= label_tag(:data, "Some options: ") %> 
    <%= select_tag(:data, options_for_select(@array_from_controller.transpose[0].collect)) %> 
    <%= submit_tag('Next') %> 
<% end %> 

5) Utwórz plik JQuery

Wyrażenia JQuery wyzwalają renderowanie formularza. Zastąp "render_partial_form" rzeczywistą nazwą metody kontrolera i częściowego widoku. Efekt slideDown jest opcjonalny "eye candy". Utwórz plik z .js.erb rozszerzeniu i taką samą nazwę jak kontrolerze:

render_partial_form.js.erb

$('#render_partial_form').html("<%= escape_javascript (render partial: 'render_partial_form') %>"); 
$('#render_partial_form').slideDown(350); 

Answer 2

Powinieneś używać widoków JS (które mają rozszerzenie "js.erb"), coś w stylu "create.js.erb" dla działania kontrolera tworzenia. Następnie dodaj format.js do bloku respond_to do |format| ... end. Dodaj zdalny: prawdziwy parametr do formularza. Wskazówka: js.erb powinna zawierać kod Javascript trzeba być zawarte, jak:

$("tbody#items").append("<%= j render(partial: 'your_partial_path') %>") 

Answer 3

za to, co warto (bo potknięcia się na ten temat w aplikacji uaktualniania Railsy 2 do 3): możesz to również zrobić, dodając obsługę zdarzeń, która dołącza zwrócony kod HTML, tak jak robiła to stara biblioteka prototypów Rails 2.

Jeśli, na przykład, starasz się wziąć to (przygotowanie do zdania runon):

form_remote_tag url: {...}, update: ... 

Jeżeli odpowiedź nadchodzi w formacie HTML i dołączane są automatycznie i zastąpić ją w ten sposób:

form_tag {...}, remote: true 

dodając obsługi zdarzeń do pliku application.js że po prostu robi to samo, dołączania zawartości do określonego elementu, na przykład:

$("#myform").on('ajax:success', function(e, data, status, xhr) { 
    $("#container").append(data); 
)}; 

W takim razie możesz napotkać ten sam problem, który zrobiłem, ponieważ nigdy nie odpalił on imprezy ajax:success! Problem polega na tym, że spodziewa się JS lub tekstu w odpowiedzi, ale dostaje HTML. Rozwiązaniem jest stwierdzenie, że odpowiedzią będzie HTML za pomocą atrybutu w tagu formularza:

form_tag {...}, remote: true, data: {type: :html} 

Bułka z masłem!