How to partially reload page? Ruby on Rails

Question

I'm creating a Podcast page. It's almost done except for the tag filtering.

In the index file, all the list of podcasts is located at the bottom with all tag listed and clickable filter

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

What I'm struggling with is, when I click a tag, it reloads an entire page and stop at the top location while my all podcast list is located at the bottom.

So, I was thinking of partially reload instead of the whole page reload and found an article that uses Ajax call. But, it didn't change anything. It's reloading the entire page again.

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")) %>");

podcast.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

Am I missing something or doing wrong? I have zero experience on Ajax.

If this is not a good approach, is there any other way I can achieve my goal?

My goal is to show podcasts list that includes the selected tags without having users to do extra action (currently need scroll down to the bottom after page reload)

I appreciate for your time to read this and help in advance.

After applying:remote=>task in the HTML link. I got error below.

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

You need to mark the link with remote: true , which stops the default action and replaces it with an asynchronous call to the appropriate controller action. So in your case:

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

Edit

In terms of the TemplateError you are now getting: I believe the issue you are having is that your Javascript is in a .js.erb file, and thus the render call is looking for podcasts/_podcast_list.html.erb which doesn't exist. You might look at this question for how to model your Javascript as an HAML file so that it will use HAML for the render. I don't use HAML so there might be a short-cut way to mix ERB and HAML like that I don't know about.