Question

我正在尝试使用javascript来更新在rails中构建的wiki应用程序上的协作者表，并在同一页面上从现有用户的另一个表中添加它们。最初，当我添加协作者时，协作者创建操作只会运行一次，我必须刷新页面才能添加另一个。我尝试将.ajax（cache：false）添加到我的javascript中，现在我可以添加多个协作者而无需刷新，但是在刷新页面之前，它们不会显示在协作者表上或从用户列表中消失。

这是我的javascript：

<% if @collaborator.valid? %>
  $('.js-collaborators').html("<%= escape_javascript(render partial: 'collaborators/collaborator') %>").ajax(cache: false);
  $('.new-collaborator').html("<%= escape_javascript(render partial: 'collaborators/users', locals: { wiki: @wiki }) %>").ajax(cache: false);
<% else %>
  $('.new-collaborator').html("<%= escape_javascript(render partial: 'collaborators/users', locals: { wiki: @wiki }) %>").ajax(cache: false);
<% end %>`

Collaborator partial：

<table class="table table-striped" style="width:75%">
  <tr>
  </tr>
  <% @wiki.collaborators.each do |collaborator| %>
    <tr>
      <% user = User.find(collaborator.user_id) %>
      <td><%= user.user_name %></td>
      <td>
        <%= link_to 'Remove', [@wiki, collaborator], method: :delete, class: 'btn btn-xs btn-danger', remote: true %>
      </td>
    </tr>
  <% end %>
</table>

用户偏：

<table class="table table-striped" style="width:75%">
  <% User.all.each do |user| %>
  <% if !@wiki.collaborators.pluck(:user_id).include?(user.id) %>
    <%= form_for [@wiki, @wiki.collaborators.build], remote: true do |f| %>
      <tr>
        <td><%= user.user_name %></td>
        <td>
          <%= f.hidden_field :user_id, :value => user.id %>
          <%= f.submit 'Add', class: 'btn btn-xs btn-success', method: :create %>   
        <% end %>  
        </td>
      </tr>
    <% end %> 
  <% end %>
</table>

维基节目页面的相关部分：

<div class="js-collaborators">
  <%= render partial: 'collaborators/collaborator', locals: {wiki: @wiki} %>
</div>
<button type="button" class="btn btn-sm btn-info" data-toggle="collapse" data-target="#add-collaborators">Add Collaborators</button>
<div id="add-collaborators" class="new-collaborator collapse" >  
  <%= render partial: 'collaborators/users', locals: {wiki: @wiki} %>
</div>

我猜测将缓存设置为false并不是解决需要刷新页面以添加其他协作者的初始问题的理想方法，但我不知道还有什么可以尝试。我对rails和javascript都很新。谢谢！

编辑：我更改了我的javascript以使用.reset（）而不是.ajax（cache：false）。有了这个，我的协作者正确列出了更新，但用户列表没有。这是更新的javascript：

<% if @collaborator.valid? %>
  $('.js-collaborators').html("<%= escape_javascript(render partial: 'collaborators/collaborator') %>").reset();
  $('.new-collaborator').html("<%= escape_javascript(render partial: 'collaborators/users') %>").reset();
<% else %>
  $('.new-collaborator').html("<%= escape_javascript(render partial: 'collaborators/users') %>").reset();
<% end %>

Answer 1

我能够通过向users表中的行添加ID来解决这个问题，并且在将用户添加为协作者而不是重新呈现部分时，让我的javascript隐藏该行。

新javascript：

<% if @collaborator.valid? %>
  $('#user-' +<%= @collaborator.user_id %>).hide();
  $('.js-collaborators').html("<%= escape_javascript(render partial: 'collaborators/collaborator') %>").reset();
<% else %>
  $('.new-collaborator').html("<%= escape_javascript(render partial: 'collaborators/users') %>").reset();
<% end %>

新用户表：

<table class="table table-striped" style="width:75%">
  <% User.all.each do |user| %>
  <% if !@wiki.collaborators.pluck(:user_id).include?(user.id) %>
    <%= form_for [@wiki, @wiki.collaborators.build], remote: true do |f| %>
      <tr id='user-<%=user.id%>' >
        <td><%= user.user_name %></td>
        <td>
          <%= f.hidden_field :user_id, :value => user.id %>
          <%= f.submit 'Add', class: 'btn btn-xs btn-success', method: :create %>   
        <% end %>  
        </td>
      </tr>
    <% end %> 
  <% end %>
</table>

使用ajax的表单要么只能使用一次，要么在刷新之前不会更新

1 个答案: