Question

以下是我试图淡出的div的一部分。

<% @unconfirmed_sub_posts.each do |sub| %>
  <div class = "unconfirmed_post" id = "unconfirmed_sub_post_<%=sub.id%>">
   <table class = "table">
    <tr>
      <td id = "tablenoborder">
        <%= link_to 'x', sub, method: :delete, class:"btn btn-danger btn-small", remote: true %>
      </td>

注意我放在div上的ID，并且我将remote：true添加到link_to，将其发送到destroy控制器操作。

在我的控制器中，这是破坏行动。

  def destroy
   @sub_opp.destroy
   respond_to do |format|
    format.html { redirect_to sub_opps_url }
    format.js
   end
 end

最后，在我的destroy.js.erb文件中：

$('#unconfirmed_sub_post_<%= @sub_opp.id %>').fadeOut(500);

该项目已被删除但未淡出。当我刷新页面时，div消失了。 Javascript控制台给了我这个错误：

DELETE http://localhost:3000/sub_opps/14 500 (Internal Server Error)

呈现HTML：

<div class = "unconfirmed_post" id = "unconfirmed_sub_post_14">
  <table class = "table">
    <tr>
      <td id = "tablenoborder">
        <a class="btn btn-danger btn-small" data-method="delete" data-remote="true" href="/sub_opps/14" rel="nofollow">x</a>
      </td>
      <td id = "tablenoborder">
        <b>Basketball</b> at <b>depaul</b> on <b>Saturday, January 04, 2014</b>  at <b> 4:00pm</b>.
      </td>
    </tr>
  </table>
  <!-- ANY RESPONSES TO PENDING SUB POSTS -->
  <div class = "responses_to_posts">
    <h5 class = "nomargintop">Responses</h5>
        <p class = "nonheadingtext">There are no responses yet.</p>
  </div>
</div>

任何想法为什么？感谢

Answer 1

你的javascript调用了destroy？ fadeOut接受回调。尝试调用在回调中调用服务器上的destroy的代码。喜欢这个

 $('#unconfirmed_sub_post_<%= @sub_opp.id %>').fadeOut(500, function(){
    //put your code that calls the server to destroy here
 });

Answer 2

在表单提交时，您首先需要fadeOut（），然后允许在fadeOut（）回调中提交表单。

Answer 3

问题是我的javascript文件位于错误的视图子文件夹下。我试图从用户仪表板中删除一个帖子，并在用户目录中将js文件放在post子文件夹中。

吸取的教训：确保js文件位于您正在修改的对象的视图文件夹下，而不是链接所在的位置。

谢谢你的帮助。

淡出jquery无法正常工作。删除成功但不淡化

3 个答案: