dimanche 26 juillet 2015

How to dynamically load data in Rails 4

So i have this page that has the functionality of creating a new course and listing all courses on the same page.

What i want,is when i click on the id of the courses to dynamically load all lessons associated with that id ion a div below that.

this is the index.html.erb of courses

<% 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>

so basically if you look down where it says c.id, i want the functionality to call all lessons associated with that id when clicking on that id.

Aucun commentaire:

Enregistrer un commentaire