Как создать кнопку переключения AJAX с двумя отдельными действиями?

Question

Я пытаюсь создать кнопку общего доступа с двумя состояниями, которая использует AJAX.В моем нынешнем виде кнопка «Поделиться» имеет два отдельных действия в моем контроллере записи.Один из них - share [POST], другой - unhare [DESTROY].Наконец, у меня есть счетчик, который я пытаюсь использовать AJAX для обновления, когда пользователь делится / делится.Мне удалось создать аналогичную кнопку, но эта идет с блоком do, так как мне нужно встроить иконку font-awesome в тело кнопок link_to.Проблема, с которой я столкнулся, заключается в том, что я не могу понять, как правильно это настроить и получить правильные результаты.Как создать правильную кнопку переключения с двумя разными кнопками link_to?

Я создал два вспомогательных действия для обоих состояний кнопок. share.js.erb и unshare.js.erb .У меня также есть метод, который проверяет, опубликовал ли пользователь сообщение или нет.

rout.rb

  resources :posts, on: :collection do
    member do
      post :share
      delete :unshare
    end
  end

posts_controller.rb

def share
  post = current_user.posts.new(original_post_id: @post.id)
  if post.save
    respond_to do |format|
      format.html {redirect_to :back}
      format.js {render layout: false}
    end
  end
end

def unshare
  unshare_post = current_user.posts.find(original_post_id: @post.id)
  respond_to do |format|
    if unshare_post.destroy
      format.html {redirect_to :back}
      format.js {render layout: false}
    end
  end
end

post / _post.html.erb

<li>
  <% if current_user.shared?(post) %>
    <%= link_to unshare_post_path(post), method: :destroy, remote: true, :id => "share_#{post.id}", style: 'text-decoration: none;' do %>
  <i class="fas fa-share-square fa-2x post-charm-bar-icon-color"></i>
    <% end %>
  <% else %>
    <%= link_to share_post_path(post), method: :post, remote: true, :id => "share_#{post.id}", style: 'text-decoration: none;' do %>
  <i class="far fa-share-square fa-2x post-charm-bar-icon-color"></i>
    <% end %>
  <% end %>
</li>
<li>
  <small class="text-muted" id="share_count-<%= post.id %>"><%= post.posts_count ? number_to_human(post.posts_count, :format => '%n%u', :precision => 2, :units => {:thousand => 'K', :million => 'M', :billion => 'B'}) : 0 %></small>
</li>

share.js.erb

<% if !current_user.shared?(@post) %>
$("#share_<%= @post.id %>").html("<%= link_to share_post_path(@post), method: :destroy, remote: true, style: 'text-decoration: none;' do %>\n" + "<i class=\"far fa-share-square fa-2x post-charm-bar-icon-color\"></i>\n" + "<% end %>");
$("#share_count-<%= @post.id %>").html("<%= @post.posts_count ? number_to_human(@post.posts_count, :format => '%n%u', :precision => 2, :units => {:thousand => 'K', :million => 'M', :billion => 'B'}) : 0 %>")
<% end %>

unshare.js.erb

<% if current_user.shared?(@post) %>
$("#share_<%= @post.id %>").html("<%= link_to unshare_post_path(@post), method: :destroy, remote: true, style: 'text-decoration: none;' do %>\n" + "<i class=\"fas fa-share-square fa-2x post-charm-bar-icon-color\"></i>\n" + "<% end %>");
$("#share_count-<%= @post.id %>").html("<%= @post.posts_count ? number_to_human(@post.posts_count, :format => '%n%u', :precision => 2, :units => {:thousand => 'K', :million => 'M', :billion => 'B'}) : 0 %>");
<% end %>

Ожидаемые результаты : когда пользователь нажимает кнопку «Поделиться», в сообщении будет отображаться второе состояние («Поделиться»)и увеличить счетчик.

Фактические результаты : кнопка не переключает состояния и счетчик не увеличивается на странице.

Answer 1

Вы можете перезагрузить частичный шаблон динамически.

Добавить тег к your index.html.erb.

<div id="post_partial">
    <%= render partial: "posts/post" %>
</div>

Измените share.js.erb на следующий код.(unshare.js.erb тоже самое).

$("#post_partial").html("<%= j (render 'posts/post') %>");