Как использовать Ajax в рубине на рельсах?

Question

После прочтения нескольких статей об Ajax в ROR, я все еще смущен тем, как использовать Ajax!

В моем проекте есть main/index.html и main_controller. Я хочу выполнить функцию, описанную ниже:

После нажатия ссылки в index.html содержимое RSS будет отображаться в индексе. Я выполняю функцию, перепрыгивая на другую веб-страницу. Но я не знаю, как использовать Ajax ...

индекс

<h1>Listing Jobs</h1> 
<table> 
    <tr> 
     <th>Source</th> 
     <th></th> 
    </tr> 
<% @jobs.each do |job| %> 
    <tr> 
     <td><%= job.source %></td> 
     <td> 
      <%= link_to 'Show', #:controller=>'main', :action=>'show', 
       :id=>job.id,:remote=>true, "data-type"=>:json, :class=>'updateJob'%> 
     </td> 
    </tr> 
<% end %> 
</table> 

<script type="text/javascript" charset="utf-8"> 

$(function(){ 
# $('#'+job.id).bind("click",function(){ 
#  $('#showJob').append('Hi') 
# }) 

$('#'+job.id).bind("ajax:success",function(data, status, xhr){ 
    ("<h1>hello</h1>").appendTo("#showJob") 
}) 

}) 
</script> 

show.html

<div id="showJob"> 
    </div> 
<table> 
    <tr> 
     <th>Source</th> 
     <th>Link</th> 
    </tr> 
<% @feed.items.each do |item| %> 
    <tr> 
     <th><%= item.title %></th> 
     <th><%= item.link %></th> 
    </tr> 
<% end %> 

</table> 

main_controller

require 'rss' 
require 'rss/1.0' 
require 'rss/2.0' 
require 'open-uri' 

class MainController < ApplicationController 
    #get /jobs 
    def index 
     @jobs=Job.all 

     respond_to do |format| 
      format.html # index.html.erb 
      format.json {render:json=>@jobs} 
     end 
    end 

    def welcome 
     @num_sources =Job.count 
    end 

    def show 
     job=Job.find(params[:id]) 
     url=job.url 
     open(url) do |rss| 
      @feed = RSS::Parser.parse(rss) 
     end 

     respond_to do |format| 
     # format.html do 
     # render :partial=>'main/show' 
     # end 
     format.json {render :json=>@feed} 
     end 
    end 

end 

Answer 1

Вместо привязки к click события , добавьте привязки для событий ajax, которые вы хотите обработать. Как правило, это будет включать в себя ajax:success событие:

$(function(){ 
    $('#'+job.id).on("ajax:success", function(data, status, xhr){ 
     // do something with 'data' json object 
    }); 
}); 

Полный список событий можно найти here.

Чтобы контроллер использовать формат «JSon» при визуализации, изменить ссылку выглядеть следующим образом:

<%= link_to 'Show', { :controller=>'main', :action=>'show', :id=>job.id }, 
        :data => {:remote=>true, :type=>:json}, :class=>'updateJob'%> 

Обратите внимание, что хэш, который составляет URL (контроллер, действие, идентификатор) должен передаваться в отдельном хэше из других атрибутов для правильной работы. Вы можете сделать это еще проще, если у вас есть ваша работа создана в качестве ресурса в файле routes.rb:

<%= link_to 'Show', job, :data => {:remote=>true, :type=>:json}, :class=>'updateJob'%>