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

Обновить

November 2018

Просмотры

1.5k раз

2

После прочтения нескольких статей о 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

1 ответы

0

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

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

Полный список событий можно найти здесь .

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

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

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

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