如何部分重新加載頁面？ Ruby 上軌

Question

我正在創建一個播客頁面。 除了標簽過濾之外，它幾乎完成了。

在索引文件中，所有播客列表都位於底部，列出了所有標簽和可點擊的過濾器

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

我正在努力解決的是，當我單擊一個標簽時，它會重新加載整個頁面並停在頂部位置，而我的所有播客列表都位於底部。

因此，我正在考慮部分重新加載而不是整個頁面重新加載，並找到了一篇使用 Ajax 調用的文章。 但是，它並沒有改變什么。 它再次重新加載整個頁面。

索引.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標記鏈接，這會停止默認操作並將其替換為對相應 controller 操作的異步調用。 所以在你的情況下：

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

編輯

就您現在得到的TemplateError而言：我相信您遇到的問題是您的 Javascript 位於.js.erb文件中，因此渲染調用正在尋找不存在的podcasts/_podcast_list.html.erb . 您可以查看這個問題，了解如何將 model 您的 Javascript 作為 HAML 文件，以便它將使用 HAML 進行渲染。 我不使用 HAML，所以可能有一種捷徑可以混合 ERB 和 HAML，就像我不知道的那樣。