Jak wykonywać połączenia Ajax z Railsami 3 za pomocą remote_function?

Question

Próbuję wykonać wywołanie onchange na polu wyboru. Do mojej aplikacji używam jquery.js i rails.js, jak wspomniano, aby korzystać z UJS. Ale nadal generowany kod jest dla Prototype, a nie dla wywołań ajax jquery. Mój kod wygląda tak:

<%= select_tag :category, 
     options_for_select(
      Category.find(:all,:select=>"name,id").collect{|c| [c.name,c.id]}), 
     :onchange => remote_function(:url => {:controller => "posts", 
              :action => "filter_post", 
              :filter =>"category"}, 
            :with=>"'category_id=' + $('#category').val()") %> 

kod, który jest generowany przez to:

new Ajax.Request('/posts/filter_posts?filter=category', {asynchronous:true, evalScripts:true, 
parameters:'category_id=' + $('#category').val() + '&authenticity_token=' + 
encodeURIComponent('CCyYj1wqXtddK6pUV6bAxw0CqZ4lbBxDGQHp13Y/jMY=')}) 

Answer 1

Siergiej powiedział: Nie ma remote_function w szynach 3.

Rozwiązaniem jest dyskretnie dodać onchange obsługi za pomocą czegoś takiego:

$(function($) { 
    $("#selector_for_element").change(function() { 
     $.ajax({url: '<%= url_for :action => 'action_name', :id => @model.id %>', 
     data: 'selected=' + this.value, 
     dataType: 'script'}) 
    }); 
}); 

Wywoła to metoda action_name w bieżącym kontrolerze, przekazując wynik selected=... jako parametr. Teraz możesz zwrócić fragment javascript, na przykład używając czegoś takiego:

calculated = calculate_some_value_using(params[:selected]) 
render(:update) {|page| 
    page << "$('#selector_for_field_to_update).html(#{calculated})" 
} 

w kontrolerze. Ciąg, który dodajesz do "strony", powinien być poprawnym javascriptem i zostanie wykonany automatycznie, jeśli użyjesz $ .ajax.

EDIT: FYI, niedawno dodał wybierz Zmień pomocnika do jQuery ujs, więc można to zrobić dyskretny sposób za pomocą wbudowanego w jQuery ujs adapter teraz:

<%= select_tag :category_id, 
    options_for_select(
     Category.find(:all,:select=>"name,id").collect{|c| [c.name,c.id]}), 
    :data => { :remote => true, :url => url_for(:controller => "posts", 
             :action => "filter_post", 
             :filter =>"category") } %> 

Choć być rzetelne, dodanie zdarzenia zmiany wyboru naprawdę nigdy nie będzie "dyskretne", ponieważ nie ma zgrabnego mechanizmu zastępczego dla użytkowników z wyłączonym javascriptem, chyba że Twój formularz nie zależy od wyniku żądania AJAX.

Answer 2

Nie ma remote_function w szynach 3. Jeśli używasz jQuery, można zrobić coś takiego to:

$.ajax({ 
    type: 'POST', 
    url: 'http://your_url/blah', 
    data: 'param1=value1&params2=value2', 
    success: function(data){eval(data);} 
}); 

Answer 3

Poniżej znajduje się prosty jQuery fragment z mojego widoku haml

:javascript 

    $("#select_box_id").change(function() { 
     $.post('#{target_url}?param_one='+$(this).val()); 
    }); 

Mam nadzieję, że to pomoże. Dzięki ..

Answer 4

Ajax Zaproszenie do kontrolerów-action z parametrami:

function combined_search() { 
    var countries = $('#countries').val(); 
    var albums = $('#albums').val(); 
    var artists = $('#artists').val(); 
    $.ajax({ 
     url:"<%=url_for :controller => 'music_on_demand',:action => 'combined_search' %>", 
     data:'country=' + encodeURIComponent(countries) + '&albums=' + encodeURIComponent(albums) + '&artists=' + encodeURIComponent(artists), 
     cache:false, 
     success:function (data) { 
     } 
    }) 
} 

Answer 5

Jeśli twarz problem, który miałem modernizacji dużą szyn app szyn 3, które złożyły ciężki wykorzystanie remote_function, można osiągnąć ograniczoną zgodność wsteczną przez dodanie metody application_helper, która generuje kod jQuery w formacie sugerowanym przez inne odpowiedzi tutaj. Byłem w stanie użyć tego kodu tak jak jest, chociaż musiał zaktualizować jeden kod wywołujący, aby użyć nowej opcji: skryptu powodzenia zamiast opcji: update hash, która nie jest tutaj obsługiwana. To może ci zająć trochę czasu, aby ostatecznie zreorganizować wszystkie wywołania funkcji remote_function, aby używać dyskretnych wywołań zdarzeń jquery-ujs: