如何部分重新加载页面？ Ruby on Rails

Question

我正在创建一个播客页面。差不多就完成了，除了标签过滤。

在索引文件中，所有播客列表位于底部，列出所有标签和可点击过滤器

= raw Podcast.tag_counts.map{ |p| link_to p.name, podcasts_path(tag: p.name)}.join(' ')     

我正在苦苦挣扎的是，当我单击一个标签时，它会重新加载整个页面并停在顶部位置，而我的所有播客列表位于底部。

所以，我在考虑部分重新加载而不是整个页面重新加载，并找到了一篇使用 Ajax 调用的文章。但是，它并没有改变什么。它正在重新加载整个页面。

index.html.haml

 %section#podcast_list
      =render 'podcasts_list'

_podcast_list.html.haml

= raw Podcast.tag_counts.map{ |p| link_to p.name, podcasts_path(tag: p.name)}.join(' ')
  
  - @podcasts.each do |podcast|  
    .columns.large-6.m-top4
      .columns.large-12
        %h4
         =podcast.id
         = truncate(podcast.episode_title, :length=>60)
        %p{:style=>"text-transform:capitalize;"}
          %b
            = podcast.tag_list.join(' | ')
            
        = podcast.impressionist_count(:filter=>:ip_address) 
        Views
        
.row
  .columns.large-12.m-top3
    = will_paginate @podcasts, previous_label: "Previous", next_label: "Next", :class=>"digg_pagination"

index.js.erb

$("#podcast_list").html("<%= escape_javascript(render("podcast_list")) %>");

播客.controller.rb

class PodcastsController < ApplicationController
  before_action :find_podcast, only: [:show, :edit, :update, :destroy]
  before_filter :authorize, only: [:edit, :update, :new, :create, :destroy]
  impressionist :actions=>[:show,:index]
  
  def index
   if params[:tag].present?
      @podcasts = Podcast.all.tagged_with(params[:tag]).paginate(page: params[:page], per_page: 4)
    else
      @podcasts =Podcast.all.paginate(page: params[:page], per_page: 4)
    end  
    
  
  end

我错过了什么或做错了吗？我对 Ajax 的经验为零。

如果这不是一个好方法，还有其他方法可以实现我的目标吗？

我的目标是显示包含所选标签的播客列表，而无需用户执行额外操作（当前需要在页面重新加载后向下滚动到底部）

感谢您抽出宝贵时间阅读本文并提前提供帮助。

在 HTML 链接中应用 :remote=>task 之后。我在下面遇到错误。

Completed 500 Internal Server Error in 54ms
Completed 500 Internal Server Error in 54ms

ActionView::Template::Error (Missing partial podcasts/_podcast_list, application/_podcast_list with {:locale=>[:en], :formats=>[:js, "application/ecmascript", "application/x-ecmascript", :html, :text, :css, :ics, :csv, :vcf, :png, :jpeg, :gif, :bmp, :tiff, :mpeg, :xml, :rss, :atom, :yaml, :multipart_form, :url_encoded_form, :json, :pdf, :zip], :variants=>[], :handlers=>[:erb, :builder, :raw, :ruby, :coffee, :haml, :jbuilder]}. Searched in:
  * "/home/ubuntu/environment/joynus-test/app/views"
  * "/home/ubuntu/.rvm/gems/ruby-2.3.6@joynus/gems/shareable-1.1.4/app/views"
  * "/home/ubuntu/.rvm/gems/ruby-2.3.6@joynus/gems/kaminari-0.16.1/app/views"
  * "/home/ubuntu/.rvm/gems/ruby-2.3.6@joynus/gems/foundation-rails-5.4.5.0/app/views"
  * "/home/ubuntu/.rvm/gems/ruby-2.3.6@joynus/bundler/gems/ckeditor-fdedb6245542/app/views"
):
    1: $("#podcast_list").html("<%= escape_javascript(render("podcast_list")) %>");
  app/views/podcasts/index.js.erb:1:in `_app_views_podcasts_index_js_erb__1632310405876044147_47038950809000'

Answer 1

您需要用remote: true 标记链接，这会停止默认操作并将其替换为对适当控制器操作的异步调用。所以在你的情况下：

link_to p.name, podcasts_path(tag: p.name), remote: true

编辑

就 TemplateError 而言，您现在得到：我相信您遇到的问题是您的 Javascript 位于 .js.erb 文件中，因此渲染调用正在寻找podcasts/_podcast_list.html.erb 不存在。您可以查看question，了解如何将您的 Javascript 建模为 HAML 文件，以便它将使用 HAML 进行渲染。我不使用 HAML，所以可能有一种捷径可以混合 ERB 和 HAML，就像我不知道的那样。