jquery ruby-on-rails ruby-on-rails-4 turbolinks

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

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

Solution

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...