使用javascript和Rails局部显示动态内容

时间:2019-01-06 16:46:08

标签: ruby-on-rails

我的主页上显示了电影类别的列表。与此同时,我显示了数据库中当前可用的所有电影的列表。当用户单击类别之一时,我想重新渲染包含所有电影列表的列表,以仅显示属于用户所选类别的电影列表。

我使用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

1 个答案:

答案 0 :(得分:0)

原因是

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

在为元素定义id属性时,请勿添加#,这将在基于选择器选择HTML元素时使用。因此,删除#

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