[AJAX/JS] Customowa akcja oraz update bez przeładowania strony

Zielona szkoła
1

WItajcie,
Proszę o pomoc/sprawdzenie pomysłu wykorzystania JS do odświeżania strony ( lub elementu strony) po wykonaniu customowej akcji w kontrolerze.
Aplikacja to prosty blog

W kontrolerze mam dodatkową akcje publish
Akcja ta zmienia status posta z na published ( to tylko przykład aby lepiej zrozumieć )
Dodałem w widoku index link do akcji publish. Chciałbym aby po kliknięciu przycisku publish post zmienił status na published bez przeładowania całej strony ale tylko wiersza którym znajduje się post.

 def publish
    post = Post.find(params[:id])
    post.update(status: 'published')
    redirect_to posts_path, notice: 'Post published'
    respond_to do |format|
      format.js
    end
  end

mój index.html.erb

<%= notice %>

<h1>Posts</h1>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Content</th>
      <th>Status</th>
      <th colspan="4"></th>
    </tr>
  </thead>

  <tbody>
    <% @posts.each do |post| %>
      <div class='list_of_posts'>
        <%= render 'post', post: post %>
      </div>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Post', new_post_path %>

_post.html.erb

<div id="<%= dom_id(post) %>">
  <tr>
    <td><%= post.title %></td>
    <td><%= post.content %></td>
    <td><%= post.status %></td>
    <td><%= link_to 'Publish', publish_post_path(post), method: :post, remote: true %></td>
    <td><%= link_to 'Show', post %></td>
    <td><%= link_to 'Edit', edit_post_path(post) %></td>
    <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
  </tr>
</div>

publish.js.erb

$("#<%= dom_id(@post) %>").replaceWith('<%= escape_javascript(render @post) %>');

routes.rb

  resources :posts do
    member do 
      post 'publish'
    end
  end

Czy w akcji publish potrzebny jest redirect - czy bez tego można osiągnąć cel bez tego reridecta ? Czy to jest poprawne podejście? Nie do końca wiem jak sprawdzić czy to działa w odpowiedni sposób po redirect renderuje mi każdy z elementów index mogę to zobaczyć w konsoli.
Proszę o podpowiedź co powinienem zmienić co dodać aby wszystko działało jak należy.

2

http://railscasts.com/episodes/136-jquery-ajax-revised

3

Hej dzięki za odp. Udało mi się poprawić kod. zamieniłem ten dom_id na zwykłe id posta.

<%= notice %>

<h1>Posts</h1>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Content</th>
      <th>Status</th>
      <th colspan="4"></th>
    </tr>
  </thead>

  <tbody>
    <%= render partial: @posts %>
  </tbody>
</table>

<br>

<%= link_to ‘New Post’, new_post_path %>

_post.html.erb

 <tr id="<%= post.id %>">
    <td><%= post.title %></td>
    <td><%= post.content %></td>
    <td><%= post.status %></td>
    <td><%= link_to 'Publish', publish_post_path(post), method: :post, remote: true %></td>
    <td><%= link_to 'Show', post %></td>
    <td><%= link_to 'Edit', edit_post_path(post) %></td>
    <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
  </tr>

publish.js.rb
$(’#<%= @post.id %>’).replaceWith(’<%= escape_javascript(render @post) %>’);
$(’#notice’).append(‘Post published!’);

oraz metoda publish kontrolera

def publish
    @post = Post.find(params[:id])
    @post.update(status: 'published')
    # redirect_to posts_path, notice: 'Post published'
    respond_to do |format|
      format.js
    end
  end

Teraz działa bez przekierowania przekazane zmienne z kontrolera także działają. Dziękuje

1 Like