Question

所以我有这个页面，它具有创建新课程和在同一页面上列出所有课程的功能。

我想要的是，当我点击课程的ID时，动态加载与该ID相关的所有课程，以及下面的div。

这是课程的index.html.erb

<% provide(:title, 'All courses') %>
<h1>All Courses </h1>
<p><%= link_to "Back", admin_path, class: "btn-submit" %></p>

<div class="text-center">
  <%= form_for [:admin, @course] do |f|%>
  <%= render 'shared/error_messages', object: f.object %>
  <p>
    Create a new course
  </p>

    <%= f.label :title%>
    <%= f.text_field :title%>

    <%= f.label :description%>
    <%= f.text_area(:description, size: "24x2") %>

    <%= f.label :duration%>
    <%= f.number_field(:duration, step: 0.5) %>

    <%= f.label :category%>
    <%= f.text_field(:category) %>

    <%= f.label :tag%>
    <%= f.text_field(:tag) %>


    <%= f.submit "Create Course", class: "btn-submit" %>
  <% end %>
</div>

<table class="display responsive no-wrap text-center" id="datatableadmin">
  <thead>
    <tr>
      <th>id</th>
      <th>Title</th>
      <th>Description</th>
      <th>Duration</th>
      <th>Category</th>
      <th>Tag</th>
      <th>Deletion</th>
    </tr>
  </thead>
  <tbody>
    <% @courses.each do |c| %>
      <tr>
        <td><%= c.id %></td>
        <td><%= best_in_place c, :title, url: "courses/#{c.id}", cancel_button: 'X' %></td>
        <td><%= best_in_place c, :description, url: "courses/#{c.id}" %></td>
        <td><%= best_in_place c, :duration, url: "courses/#{c.id}" %></td>
        <td><%= best_in_place c, :category, url: "courses/#{c.id}" %></td>
        <td><%= best_in_place c, :tag, url: "courses/#{c.id}" %></td>
        <td><%= link_to "Remove", admin_course_path(c), method: :delete, data: { confirm: "Are you sure?" }%></td>
      </tr>
    <% end %>
  </tbody>
</table>
<div class="text-center">
  <small style="color:red;">Edit by clicking the fields and pressing enter. Cancel by clicking the X button</small>
</div>

所以基本上如果你向下看它说c.id，我希望功能在点击该id时调用与该id相关的所有课程。

Answer 1

因为Cyril DD有ajax解决方案。我会在这里写预取解决方案。建议仅在获取几课时使用，通常不超过2位数。我想课程不会那么长。

<% @courses.each do |c| %>
      <tr>
        <td class="course_id" data-id="<%= c.id %>">
          <%= c.id %>         
        </td>
        <td><%= best_in_place c, :title, url: "courses/#{c.id}", cancel_button: 'X' %></td>
        <td><%= best_in_place c, :description, url: "courses/#{c.id}" %></td>
        <td><%= best_in_place c, :duration, url: "courses/#{c.id}" %></td>
        <td><%= best_in_place c, :category, url: "courses/#{c.id}" %></td>
        <td><%= best_in_place c, :tag, url: "courses/#{c.id}" %></td>
        <td><%= link_to "Remove", admin_course_path(c), method: :delete, data: { confirm: "Are you sure?" }%></td>
      </tr>
<% end %>
///other markups.....
<%= @courses.each do|c| %>
<div id='<%= "lessons_by_course_#{c.id}"%>' class='someClassWithDisplayNone'>
  <%= render partial: "lessons", {locals: {lesson: c.lessons}} %>
</div>
<% end %>

然后在javascript中

$(function(){
  $(".course_id").on("click", function(){
    var id = $(this).data("id");
    $("#lessons_by_course_" + id).removeClass("someClassWithDisplayNone");
  });
})();

当然，这种倾向假设某些事情，例如存在部分lessons用于渲染课程（你可以编写直接标记而不是部分）以及课程和课程之间存在一对多的关系。否则，我相信所有代码都是自我解释的。

Answer 2

我认为最简单的AJAX解决方案是为每个ID添加link_to并添加相关的服务器端代码，如下所示。

<tbody>
    <% @courses.each do |c| %>
      <tr>
        <td><%= link_to(c.id, course_lessons_path(c), remote: :true) %></td>

的routes.rb

resources :courses do
  resources :lessons
end

lessons_controller.rb

  def index
    find_lessons
    respond_to do |format|
      # Your other formats
      format.js
    end
  end

  def find_lessons
    if params[:course_id]
      @lessons = Course.find(params[:course_id]).lessons
    else
      # Error or @lessons = Lesson.all
    end
  end

吸取/ index.js

var where = $("ul#where-to-load-lesson-id")
where.empty() # Reset list
<% @lessons.each do  |lesson| %>
  # Simple working code
  $('.lessons').append('<li><%= lesson.title %></li>');

  # Advanced code for nested for loops that could use debugging
  # To use if you have nested properties (`lesson has_many exercises`)
  var li = $("<li>", { 
    'class': 'lesson', 
    'html': '<%= lesson.content %>' }
  ).appendTo(where)
  var ex_list = $("<ul>", { 'class': 'exercise-list' }).appendTo(li)
  <% lesson.exercises.each_with_index do |ex, i| %>
      ex_list.append('<li><%= link_to("exercise #{i}", exercice_path(ex)) %></li>');
  <% end %>
<% end %>

Answer 3

跟进Cyril DD的响应，这正是Cyrils代码存在问题的正确方法。

在我的课程/ index.html.erb

中

<td><%= link_to(c.id, admin_course_lessons_path(c), remote: :true) %></td>

at the bottom i have
<ul class="lessons"></ul>

在我的routes.rb

中

resources :lessons do
  resources :courses
end

在我的lessons_controller.rb

中

def index
    find_lessons
    respond_to do |format|
      format.html
      format.js
    end
  end

  def find_lessons
       if params[:course_id]
         @lessons = Course.find(params[:course_id]).lessons
       else
         @lessons = Lesson.all
         @lesson = Lesson.new
       end
   end

在admin / lessons / folder

中的index.js.erb文件中

$('.lessons').empty();
<% @lessons.each do |l| %>
$('.lessons').append('<li><%= l.title %></li>');
<% end %>

如何在Rails 4中动态加载数据

3 个答案: