Question

我试图找出更好的ajax！我想在没有加载整个页面的情况下删除带有ajax请求的行。该行被删除但是为了检查我必须手动刷新页面。我遇到的问题是，在单击删除按钮后，该项目不会被删除而不会刷新页面。

继承我的删除按钮：

<% current_user.agreements.each do |agreement| %>
	<div class="remove-dis">
	<div class="requestone" style="border-bottom:solid grey 1px;height:100px;">

		
<div style="float:left;">
	<h>Offers</h>
</div>

<%= link_to view_scribe_request_path(agreement) do %>
<div class="text-center">
	<h><%= agreement.title%></h>
</div>

<% end %>

<div style="float:left;">
	<h>Views</h>
</div>

<div class="text-center">
	<h><%= agreement.description%></h>
</div>

<div>
	<%= link_to 'delete', agreement_path(agreement), method: :delete, data: { confirm: 'Are you sure?' }, remote: true, :class => 'delete_request' %>
		
	

</div>

	</div>

</div>
<% end %>

路线是：

resources :agreements

协议控制器：“持有ajax删除方法”

def destroy
      @agreement = Agreement.find(params[:id])
      @agreement.destroy

      respond_to do |format|
      format.html { redirect_to my_requests_path }
      format.json { head :no_content }
      format.js   { render :layout => false }
    end 
    end

我的destroy.js.erb：

$('.delete_request').bind('ajax:success', function() {  
    $('.remove-dis').fadeOut();
});

我对js和html进行了一些更改，看看当我在列表中删除时会发生什么。所有列出的项目将从页面中删除js直到刷新。如何只捕获列出的一行？。

Answer 1

发生这种情况的原因是因为您的页面默认使用请求时存在的数据进行呈现。它不知道何时更新，修改，删除任何记录等，而不告诉它信息已经更新。

当您重新加载页面时，您手动告诉服务器获取数据库中可用的最新数据，因此您在重新加载后会看到正确的结果。

一旦您的服务器通过其AJAX响应确认该项目已被删除，您或者想要使用javascript从DOM中删除该项目，或者，通过更多工作，您可以打开实时连接使用WebSockets，它会在发生更改时立即通知您的前端。

最有可能的是，您的destroy.js.erb未找到以下行中定义的元素：

var element = document.getElementById("<%=j @agreement.id %>");

尝试在发出请求之前跟踪您在服务器上请求删除的项目的ID，当您确定已从数据库中删除该项目时，可以将其删除那时候使用你的javascript来自DOM。

Ajax删除不会刷新页面

1 个答案: