Raylar 4 ajax ile kısmi render, jquery,: remote => true, ve response_to

Question

Gönderilen bir forma karşılık olarak AJAX ile dinamik bir sayfa oluşturmak gibi görünüyor. Diğer benzer soruların hiçbiri bunu genel olarak nasıl yapacağımıza odaklanmıyor. Ben konuyla ilgili bulabildiğim

iyi blog yazısı burada: http://www.gotealeaf.com/blog/the-detailed-guide-on-how-ajax-works-with-ruby-on-rails

soru: Ben form göndermek veya AJAX yüklemek için kısmi bir görünüm tetikleyebilir böylece benim raylar uygulama kod nasıl bir bağlantıyı tıklayın

Answer 1

birkaç şey mevcut olması gerekir: js.erb sen gibi dahil edilmesi gereken JavaScript kodunu içermelidir tetikleme elemanı uzaktan => true bayrağı, respond_to : Denetleyicinin sınıf tanımındaki js bayrağı, rota, kısmi görünüm ve son olarak dinamik bir kısmi oluşturmak için kullanılan jquery, ayrı bir .html.js dosyasında yer almalıdır. Aşağıdaki örnekler "someajax" kontrol cihazının kurgusal "render_partial_form" yöntemi için verilmiştir.

1) bir ekleme: Uzaktan => true bayrağı
koymak tetikleme elemana: için .html.erb dosyası (görünüm) bağlantı veya form etiketi üzerinde uzaktan => true bayrağı ile

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

gibi AJAX çağrısını tetiklemek istiyorum elemanı,: JQuery verir uzaktan => true, raylar otomatik görünümler arasında geçiş olmayacak, bunun yerine çalıştırılacak. Bu bir form_tag, bir link_tag veya başka tür etiketlerle kullanılabilir.

2) "respond_to: html,: js" ekleyin kontrolörün sınıf tanımının üst kısmında kontrolörü

üstündeki, şimdi kontrolör yanı javascript yanıt verebilir belirtmek gerekir html: @array_from_controller adlandırılan seçim listesi seçenekleri bir dizi:

class SomeajaxController < ApplicationController 
    respond_to :html, :js 

    ... 

    def render_partial_form 
     @array_from_controller = Array.new 

     ... 

    end 
end 

Bu örnekte, görünüme denetleyicisinden geçirilen olmak değişken vardır.

3) Rota AJAX çağrısı tetiklemek için bir POSTed formu istedik beri kontrolörün yöntemle

http fiil, ben render_partial_form görünümüne benim denetleyicisi için yazılan fiilini yönlendirilir.

post 'someajax' => 'someajax#render_partial_form 

bakış adıyla def render_partial_form eşleşir tarafından tanımlanan kontrol yöntemi, _render_partial_form.html.erb yüzden, kontrol cihazından gelen bir işlem oluşturmak aramak için bir ihtiyaç vardır.) _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:

4) kısmi görünümü denetleyicisi yöntemi olarak aynı ada sahip ve bir alt çizgi ile başlamalıdır kısmi görünümü
oluştur JQuery dosyasını oluştur

JQuery ifadeleri, formun oluşturulmasını tetikler. Denetleyici yönteminizin ve kısmi görünümün gerçek adıyla "render_partial_form" değerini değiştirin. SlideDown efekti isteğe bağlı "göz şekeri" dir.

render_partial_form.js.erb

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

Answer 2

Denetleyici eylemi oluşturmak için JS görünümlerini ("js.erb" uzantısına sahip), "create.js.erb" gibi bir şey kullanmalısınız. Ardından, bloğuna format.js kodunu ekleyin. Ve uzak ekle: formunuza gerçek parametre. Uyarı: dahil olmak üzere bu çalışması için

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

Answer 3

Ne olursa olsun için (ben bir uygulama bu kadar açma çünkü yükseltme: Kumandanızda gibi bir .js.erb uzantılı bir dosya ve aynı adı oluşturun Radarlar 2'den 3'e kadar): Eski Rails 2 prototip kitaplığının yaptığı gibi, döndürülen HTML'yi ekleyen bir olay işleyicisi ekleyerek de yapabilirsiniz. tepkisi HTML olarak geliyor ve otomatik ekleniyor Nerede

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

ve bu ile değiştirin: Örneğin, bu almaya çalışıyoruz, varsa

(a RunOn cümle hazırlanmak): Bu gibi belirli bir öğeye içerik ekleme, sadece aynı şeyi yapar sizin application.js dosyaya bir olay işleyicisi ekleyerek

form_tag {...}, remote: true 

:

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

O zaman yaptığım aynı problemle karşılaşabilirsiniz, ki bu hiç bir zaman ajax:success etkinliğini ateşlemiyordu! Sorun, yanıtta JS veya metin beklemesi, ancak HTML almasıdır. düzeltmek yolu formu etiketi üzerinde bir özelliğini kullanarak yanıt HTML olacağını söylemek etmektir: pasta

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

parçası!