简体   繁体   English

Fadeout jQuery无法正常工作。 成功删除但不会消失

[英]Fadeout jquery not working. Deletes successfully but doesn't fade

Here is part of the div i'm trying to fadeOut. 这是我正在尝试淡出的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>

Notice the ID i put on the div and that i added remote:true to the link_to that sends it to the destroy controller action. 注意,我在div上添加了ID,并在将link:to发送给destroy controller动作的link_to中添加了remote:true。

In my controller here is the destroy action. 在我的控制器中,这是销毁操作。

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

Finally, in my destroy.js.erb file: 最后,在我的destroy.js.erb文件中:

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

The item is getting deleted but not fading out. 该项目将被删除,但不会褪色。 When i refresh the page the div is gone. 当我刷新页面时,div消失了。 Javascript console gives me this error: Javascript控制台给我这个错误:

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

Rendered HTML: 呈现的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>

Any ideas why? 有什么想法吗? Thanks 谢谢

Where is your javascript that calls the destroy? 您的Java脚本在哪里销毁? fadeOut takes a callback. fadeOut需要回调。 Try calling code that calls the destroy on server in your callback. 尝试在回调中调用在服务器上调用destroy的代码。 Like this 像这样

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

在提交表单时,您将首先需要fadeOut(),然后允许在fadeOut()回调中提交表单。

The issue was that my javascript file was under the wrong view subfolder. 问题是我的javascript文件位于错误的视图子文件夹下。 I was trying to delete a post from the user dashboard and had the js file in the user directory when really it should have been in the post subfolder. 我试图从用户仪表板中删除帖子,并将js文件保存在用户目录中,而实际上该文件夹应放在该子文件夹中。

lesson learned: make sure js file is under the view folder of the object you are modifying, not where the link stems. 获得的经验教训:确保js文件位于您正在修改的对象的view文件夹下,而不是链接的原始位置。

thank you for the help. 感谢您的帮助。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM