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

form with ajax either only usable once or doesn't update until refresh

本文关键字：刷新 一次 更新 表单 Ajax 使用      更新时间：2023-09-26

我正在尝试使用 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 %>`

协作者部分：

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

我能够通过向用户表中的行添加一个 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>
相关文章：