jQuery-turbolinks - link_to confirm: pops up several times times in Rails

Question

I have a typical CRUD operation application with

apps/views/recipe/show.html.haml containing a line

= link_to "Delete", recipe_path, method: :delete, data: {confirm: "Are you sure?" }, class: "btn btn-default"    

If I create a new recipe in apps/views/recipe/new.html.haml and get redirected to apps/views/recipe/show.html.haml and hit Delete, then it gives me confirmation once and deletes the recipe.

However, if I go to the same show page from typical type of index.html.haml that links to individual recipe such as http://localhost:3000/recipes/29 and hit Delete button, the confirmation will pop up 3-4 times.. (UNLESS I REFRESH that page first, then it will pop up confirm only once).

I tried adding jQuery-turbolinks and it still didn't work...

app/views/layouts/application.html.haml has the following under %title

  = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true                                                                      
  = javascript_include_tag 'application', 'data-turbolinks-track' => true                                                                                    
  = csrf_meta_tags 

Not sure how to fix it so it doesn't pop up several times

EDIT: Still same behaviour even after I fix the code by passing the @recipe

= link_to "Delete", recipe_path(@recipe), method: :delete, data: {confirm: "Are you sure?" }, class: "btn btn-default"    

EDIT 2: If I remove turbolinks all together it works buttTurbolinks makes following links in your web application faster and as I understand are used in most Rails projects. So trying to see if there is a work around? Seems like a pretty typical thing to be able to do.

EDIT 3:

I added jQuery-turbolinks

Gemfile

gem 'jquery-turbolinks'

JavaScript manifest file, in this order:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks

The confirmation pops more than once still. There must be a way to fix it?

EDIT 4: I found the problem. The %head in HTML was right under %html and wasn't indented properly so application.js and others were included in the body and not the head section so instead of

!!! 5                                                                                                                                                                                                             
%html                                                                                                                                                                                                             
%head                                                                                                                                                                                                             
    %title Recipe App                                                                                                                                                                                             
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true                                                                                                                         
    = javascript_include_tag 'application', 'data-turbolinks-track' => true                                                                                                                                       
    = csrf_meta_tags   

It should have been

!!! 5                                                                                                                                                                                                             
%html                                                                                                                                                                                                             
  %head                                                                                                                                                                                                           
    %title Recipe App                                                                                                                                                                                             
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true                                                                                                                         
    = javascript_include_tag 'application', 'data-turbolinks-track' => true                                                                                                                                       
    = csrf_meta_tags         

Answer 1

jquery-turbolinks should not really be necessary; my apps work correctly without it...

Are you sure that:

• you have the javascript_include_tag ... line in the <head> part of your html?
• you have only one javascript_include_tag ... line?

---

background:

The problem you have is that the jquery_ujs setup is called on every turbolinks page load resulting in duplicated handlers being installed. Since a turbolinks page load just replaces the <body> part of the document you must be doing something inside your <body> that triggers jquery_ujs setup...

See also these answers: https://stackoverflow.com/a/18260585/211060 and https://stackoverflow.com/a/4475479/211060

Answer 2

Maybe you're including multiple copies of rails.js?

Checkout this post and see if solves your problem.

Answer 3

You should be passing the id of the recipe being deleted as a parameter to the recipe_path, probably as follows:

= link_to "Delete", recipe_path(recipe), method: :delete, data: {confirm: "Are you sure?" }, class: "btn btn-default"  

Without an object being passed, I am guessing it is deleting many records.

Answer 4

i faced this similar issue and resolved after identifying the errors:-

1. i had the layout with application.js included
2. my partial was again including jquery.min which was already included in application.js already included
3. i was using getScript() multiple times in few js files..which should be only once per event.

Hope this helps.