Guide v7.0.3.1 "link_to "Destroy" "turbo_method: :delete" doesnt works / Ubuntu 22.04

There is an issue similar to thread: “Guide “Getting Started with Rails” contains obsolete infomation”

Following code is not loading turbo confirm for delete/destroy article:

  • <%= link_to "Destroy", article_path(@article), data: { turbo_method: :delete, turbo_confirm: "Are you sure?" } %>
  • Stackoverflow have this solution:

    javascript - Ruby On Rails - CRUD - Destroy/Delete Not Working? - Stack Overflow

    So, this is the best aproach to solve this issue? (Maybe it works for test but for Production it is not recommended) Somebody knows if its platform related? (tested in Ubuntu 22.04)

    Thanks in advance.

    Regards…

    What’s in your application.js and being included in your layout for JS? On a fresh Rails 7 app your link works for me and prompts as expected, here’s what I’m seeing the current include looks like:

    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
    

    With application.js containing:

    import "@hotwired/turbo-rails"
    import "./controllers"
    import * as bootstrap from "bootstrap"
    

    I think the JS event bind for click is most likely in the turbo-rails import but haven’t looked.

    Hi Nick,

    There is no application.js, the link is working only after I have modified application.html.erb this way:

    Blog <%= csrf_meta_tags %> <%= csp_meta_tag %>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    
    <%= javascript_include_tag "turbo", type: "module" %>
    
    <%= yield %>

    It works as expected with the solution mentioned in the Stackoverflow previously commented however my doubt is if thats the rigth solution, this is the line added to application.html.erb:

    <%= javascript_include_tag “turbo”, type: “module” %>

    Im really new to rails so, I want to be sure this is the correct way, i want to know if this issue is related to creating a fresh app in Ubuntu (maybe its not creating the related js file or maybe its “normal” and we must add the “javascript_include_tag “turbo”” line manually and that’s not included in the guide v7.0.3.1).

    Just to be clear, I want to know if this is the right way to address this issue, according to the guide:

    " we use the data option to set the data-turbo-method and data-turbo-confirm HTML attributes of the “Destroy” link. Both of these attributes hook into Turbo, which is included by default in fresh Rails applications."

    Turbo documentation:

    "This gem is automatically configured for applications made with Rails 7+ (unless --skip-hotwire is passed to the generator). "

    Im using this Rails version: rails -v

    Rails 7.0.3.1

    Gemfile includes this:

    Hotwire’s SPA-like page accelerator [https://turbo.hotwired.dev]

    gem “turbo-rails”

    Regards.

    It could be that your problem is related to this:

    “data-turbo-method: delete” should use POST with _method rather than DELETE · Issue #259 · hotwired/turbo-rails (github.com)

    Did you make sure that in the destroy method of the controller you are redirecting with code 303 as specified in the previous step of the guide?

    Anyway, to answer your question, you should not need to make that change in the application.html.erb file.

    1 Like

    Thank you Bruno,

    Yes, Im redirecting with code “see other” = 303.

    I have remove the change in the application.html.erb.

    After testing again I got this message when I click the destroy action:

    " The action ‘show’ could not be found for CommentsController "

    So, as workaround I have change the code from “link_to” to “Button_to” as mentioned in your link:

    " See discussion here: [rails/rails#43430]"

    " guides/source/getting_started.md"

    And it works.

    I think this issue is still being reviewed:

    " dhh added a commit that referenced this issue 3 days ago"

    When I use “link_to” again I got this message in the “Destroy” action (for comment/article):

    " The action ‘show’ could not be found for CommentsController "

    So I’m going to use Button_to by now. Thank you.

    Best regards.

    1 Like

    I was able to get this working!

    Somewhere along the way of me trying things, I stumbled upon mention of the turbo-rails gem. I found a working solution with these pieces:

    1. Add this in the application.html.erb file:
      <%= javascript_include_tag "turbo", type: "module" %>
      
    2. Add gem "turbo-rails", "~> 1.0" to your Gemfile
    3. Run bundle install
    4. Run bin/rails turbo:install
      Note: not sure if this last step is necessary, but I was following instructions from here

    Using these steps, the code from the rails guide works, along with the confirmation dialog. :tada:

    3 Likes

    Hi Candice,

    Thank you, the confirmation dialog is working now following your steps (1-3).

    By the way, the last step is not necessary according to Turbo Documentation:

    Turbo Handbook

    Best Regars… Section: Installing Turbo in Your Application

    " In a Ruby on Rails application

    The Turbo JavaScript framework is included with the turbo-rails gem for direct use with the asset pipeline."

    1 Like

    I was able to fix this by simply adding

    <%= javascript_include_tag "turbo", type: "module" %>
    

    To my application.html.erb file

    Thank you so much! I had been doing everything to fix this issue but only this tag did the job.

    Have y’all checked if you get any JS error when you load your application?

    After initializing my application with Bootstrap I noticed that I was getting an error with the generated code in application.js that was attempting to import Bootstrap from the gem.

    After removing the Bootstrap import Turbo began working as expected.

    // application.js
    // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
    import "@hotwired/turbo-rails"
    import "controllers"
    // import * as bootstrap from "bootstrap"
    
    1 Like

    Thanks @Gabe_Odess ! This ended up being my issue as well (though with a different import)