ajax closest is not affected in ruby on rails

Question

Hello I am newbie in ruby on rails.And I try to do some ajax in my demo website.Delete is performed but I have to refresh each time.

view/shared/_feed_item.html.haml

%li{id: feed_item.id}
= image_tag current_user.image_url(:small_thumb).to_s
%span.user
%span.destination
%b Source:
= feed_item.source
%span.destination
%b Destination:
= feed_item.destination
%span.destination
%b Date:
= feed_item.date
%span.timestamp
%b Time:
= feed_item.time
%span.content
%b Comment:
= feed_item.content
%span.timestamp
- if current_user == feed_item.user
= link_to "Delete", feed_item ,method: :delete, data: { confirm: "You sure?" }, title:  "Delete", remote: true, class: "delete_post"

View/requests/delete.js.haml

$(document).ready(function(){
  $(function(){
    $('.delete_post').bind('ajax:success',function() {
      $(this).closest('li').fadeOut();
    });
  });
});

controller/requests_controller.rb

def destroy
 @request.destroy
 respond_to do |format|
   format.html { redirect_to root_url, notice: "Post deleted" }
   format.js { render nothing: true}
 end
end

raw html link

link

Thanks in Advance.

What is your actual question? What is the desired behavior and what is the observed behavior of your current code? — jfriend00, Apr 22 '14 at 21:00
I want to fadeout the post without refreshing(through ajax). so current code shows succesfully delete but not through ajax . — Ajay Barot, Apr 23 '14 at 06:06
More people would be able to help you if you showed the generated HTML (what the browser and jQuery sees) rather than the html.haml source. As it is now, it's hard for anyone who doesn't know how to read your haml files to help you, but that knowledge isn't required to help you debug your jQuery if you would just disclose the actual HTML. — jfriend00, Apr 23 '14 at 06:07

score 4 · Accepted Answer · edited May 23 '17 at 12:33

4

The reason why jquery not working. problem is turbolinks. $(document).ready(function() is not working with turbolinks. for more look this description

edited May 23 '17 at 12:33

Community

1
1

answered Apr 26 '14 at 20:38

Ajay Barot

1,594
1
22
35

score 2 · Answer 2 · answered Apr 24 '14 at 10:17

2

ABPrime,

Can you try with direct jquery as following, if closest doesn't work?

:plain
  $(document).ready(function(){
    $('.delete_post').parent().parent().fadeOut();
  });

answered Apr 24 '14 at 10:17

Parth

1,243
8
17

score 1 · Answer 3 · answered Apr 22 '14 at 21:04

1

I think this is happening because this selector is not finding any elements:

$(this).closest('li')

The jquery closest function traverses up through the DOM, meaning it will look at parents instead of siblings. Instead try to use this:

$(this).prev('li')

You could always put a debugger statements before that line so you can play with a couple of different jquery function for $(this) and see what works best.

answered Apr 22 '14 at 21:04

Griffin M

451
3
12

Can you post a sample of what the output of the haml code looks like? From that it should be simple to come up with a selector that works, but I am pretty sure the selector is not finding anything. Did you try the debugger? – Griffin M Apr 23 '14 at 15:40
My bad, I meant to say could you post the raw HTML output so I can see how how DOM is structured – Griffin M Apr 23 '14 at 20:10

ajax closest is not affected in ruby on rails

3 Answers3