使用javascript和Rails局部顯示動態內容

Question

我的主頁上顯示了電影類別的列表。 與此同時，我顯示了數據庫中當前可用的所有電影的列表。 當用戶單擊類別之一時，我想重新渲染包含所有電影列表的內容，以僅顯示屬於用戶所選類別的電影列表。

我使用link_to顯示類別列表。 link_to將被路由到控制器功能，該功能將加載僅屬於用戶所選類別的電影。 然后，將使用此生成的列表來調用js.erb ，從而依次調用Rails部分。

Rails部分將重新渲染完整的影片列表，以僅顯示屬於所選類別的影片。 javascript和partial可以正常調用，但是partial無法重新呈現列表。 不知道我在這里想念的是什么。

app/views/movies/index.html.erb

    <% @categories.each do |category| %>
  <tr><td>


    <%= link_to category, show_category_url(:genre => category), :remote => true %> <%end%>    


    <%if false %>
    <%= link_to show_category_url, :remote => true do %>
     category
    <%end %>

  </td></tr>
<% end %>

<div id="#movies_list">
<% @movies.each do |movie| %>
  <tr>
    <td><%= movie.title %></td>
    <td><%= movie.category %> </td>
    <td><%= movie.rating %></td>

    <% if !current_user.nil? %>
      <% if movie.user.email == current_user.email %>
        <td><%= link_to 'Show', movie, :class => "btn btn-primary"%></td>
        <td><%= link_to 'Edit', edit_movie_path(movie), :class => "btn btn-primary" %></td>
        <td><%= link_to 'Destroy', movie, method: :delete, data: { confirm: 'Are you sure?' }, :class => "btn btn-primary" %></td>
      <% end %>
    <% end %>
  </tr>
<% end %>
</div>


app/views/movies/show.js.erb

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

app/views/movies/_show_categories.html.erb

      <% @movies_in_category.each do |movie| %>
    <tr>
      <td><%= movie.title %></td>
      <td><%= movie.rating %></td>
     <% puts "************** movies/show_category"%>
     <% puts movie.title %>
      <% if false %>
      <td>
        <%= form_for @rating do |rating_form| %>
          <%= rating_form.number_field :rating, class: 'rating', 'data-size' => 'xs'%>
          <%= rating_form.submit 'Add', class: 'btn btn-primary btn-success' %>
        <% end %>
      </td>
      <% end %>

      <% if !current_user.nil? %>
        <% if movie.user.email == current_user.email %>
            <td><%= link_to 'Show', movie, :class => "btn btn-primary"%></td>
            <td><%= link_to 'Edit', edit_movie_path(movie), :class => "btn btn-primary" %></td>
            <td><%= link_to 'Destroy', movie, method: :delete, data: { confirm: 'Are you sure?' }, :class => "btn btn-primary" %></td>
        <% end %>
      <% end %>
    </tr>
  <% end%>

我的partial可以正常調用，但不會重新渲染div movies_list 。

這是我的控制器代碼：

class MoviesController < ApplicationController
before_action :set_movie, only: [:show, :edit, :update, :destroy]
#before_action :authenticate_user!

# GET /movies
# GET /movies.json
def index
@movies = Movie.all
$all_movies = @movies

@categories = @movies.uniq.pluck(:category)
@movies_by_category = Hash.new

@categories.each do |category|
  @movies_by_category[category] = Movie.where(:category => category).length
end     
end

# GET /movies/1
# GET /movies/1.json
def show
    respond_to do |format|
  format.js {render layout: false}
  puts "@@@@@@@@@@@@@@ moviescontroller/show_category"
end
end

# GET /movies/new
def new
@movie = current_user.movies.new
end

# GET /movies/1/edit
def edit
end

# POST /movies
# POST /movies.json
def create
@movie = current_user.movies.new(movie_params)

respond_to do |format|
  if @movie.save
    format.html { redirect_to @movie, notice: 'Movie was successfully created.' }
    format.json { render :show, status: :created, location: @movie }
  else
    format.html { render :new }
    format.json { render json: @movie.errors, status: :unprocessable_entity }
  end
end
end

# PATCH/PUT /movies/1
# PATCH/PUT /movies/1.json
def update
respond_to do |format|
  if @movie.update(movie_params)
    format.html { redirect_to @movie, notice: 'Movie was successfully updated.' }
    format.json { render :show, status: :ok, location: @movie }
  else
    format.html { render :edit }
    format.json { render json: @movie.errors, status: :unprocessable_entity }
  end
end
end

# DELETE /movies/1
# DELETE /movies/1.json
def destroy
@movie.destroy
respond_to do |format|
  format.html { redirect_to movies_url, notice: 'Movie was successfully destroyed.' }
  format.json { head :no_content }
end
end

def show_category
category_selected = params[:genre]
#all_movies = Movie.all
@movies_in_category = Movie.where(category: category_selected)
puts "^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^"
puts category_selected
puts @movies_in_category.length
end

def login
end

private
# Use callbacks to share common setup or constraints between actions.
def set_movie
  @movie = Movie.find(params[:id])     
end

# Never trust parameters from the scary internet, only allow the white list through.
def movie_params
  params.require(:movie).permit(:title, :category, :rating)
end
end

Answer 1

原因是，

<div id="#movies_list">
contents goes here..
</div>

在為元素定義id屬性時，您不應添加# ，它將在基於選擇器選擇HTML元素時使用。 所以刪除#

<div id="movies_list">
contents goes here..
</div>