Confirmation Dialog Box in Ruby on Rails 7 with Turbo

Ruby on Rails 7 ships with Turbo, a framework that allows developers to speed up their applications without having to write a lot of JavaScript. Turbo Drive, part of the Turbo framework, performs background operations and modifies HTML without reloading the entire page.

Create a New Application

Let's start by creating a new application. In the terminal, we type:

rails new todo_app

Then we change directories into this folder:

cd todo_app

GENERATE A TASK MODEL

Let's now generate a Task model:

bin/rails g model Task name:string

Let's run the migration:

bin/rails db:migrate

In the app/models/task.rb file, let's add a validation:

validates :name, presence: true

gENERATE A TASKS CONTROLLER

Next, we'll generate a Tasks controller with an index action. Rails will automatically generate an index view:

bin/rails g controller Tasks index

Let's delete the automatically generated route and set the root route to this index action in config/routes.rb:

root 'tasks#index'

Inside the index method in our controller let's add this line:

@tasks = Task.all

This will make a @tasks instance variable accessible in our index view.

Let's edit the index view to show a tasks list:

<h1> Tasks </h1>
<ul>
    <% @tasks.each do |task| %>
        <li>
        <%= task.name %> 
        </li>
    <% end %>
</ul> 

ADD THE ABILITY TO CREATE A TASK

Now, we need to be able to create tasks. Let's first make a @task instance variable accessible in the view by adding this line to the index method in the tasks controller:

@task = Task.new

Let's set the strong parameters in the private method task_params:

private
def task_params
  params.require(:task).permit(:name)
end

Finally, let's add a create method to the controller:

def create
  @task = Task.new(task_params)
  if @task.save
    redirect_to root_path
  else
    render :new  
  end 
end

Let's set a route to this action in the config/routes.rb file:

resources :tasks, only: [:create]

Now let’s add in the home page the form for creating a new task. We put it at the bottom of the

index view:

<%= form_with model: @task do |form| %>
  <p>
    <%= form.text_field :name, placeholder: 'Add task', required: true %>
  </p>
  <p>
   <%= form.submit %>
  </p>
<% end %>

ADD A DESTROY METHOD TO THE TASKS CONTROLLER

At last, we will add the ability to delete tasks. Let's add a destroy method to our controller:

def destroy
  @task = Task.find(params[:id])
  @task.destroy
  redirect_to root_path
end

Then, we edit our resource routing in config/routes.rb to include this action:

resources :tasks, only: [:create, :destroy]

ADD DELETE BUTTONS

In our view, we want delete buttons. How can we achieve that? We can use anchor tags. Clicking on links results in GET requests. But we can override this behavior, by using the turbo-method data attribute on these links.  Let's edit our index view to add such a link after the task name inside every li element. We will use the link_to helper:

<%= link_to "Delete", task_path(task), data: { turbo_method: 'delete' } %>

add a confirmation popup

But this will delete the tasks without confirmation. To add a confirm dialog, we only need to add a data-turbo-confirm attribute to these links:

<%= link_to "Delete", task_path(task), data: { turbo_method: 'delete', turbo_confirm: "Are you sure?" } %>

USE THE BUTTON_TO HELPER

Instead of using the link_to helper with the turbo-method data attribute, we can use the button_to helper with a delete method.  This will generate forms instead of links.  And we'll add the same data-turbo-confirm attribute, to show a confirmation popup when the user clicks on these buttons:

 <%= button_to "Delete", task_path(task), method: :delete, data: { turbo_confirm: "Are you sure?" } %>