Jair Rillo Junior’s blog

Starting the third part of our tutorial, in this topic we are going to talk about the DELETE functionality.

You can check the first topic to learn how to get started a new Rails project, as well as add values to the database. In the second topic we’ve learned how to LIST the current values from the database and also how the partial does work.

Now let’s talk about the DELETE and show a simple example of AJAX.

Changing the current list of customers

It is common put a DELETE link together the list of the values. In our example, we could create a new column called actions and put the DELETE link there. An example below:

To do this, open the file app/views/customers/_list_customers.html.erb and add the values described below in the red circle.

The first red circle is a new column to the action. The second one has a link_to helper method that calls the delete_customer controller method and send the customer ID as parameter.

When the user clicks on the Delete link, a delete_customer method will perform in the controller. So let’s implement this method.

Creating the delete_customer method

Open the controller class (app/controller/customers/CustomersController.rb) and add a new method called delete_customer.

Inside this method put the following commands:

The delete_customer method above is simple. The first line try to delete the customer from the database getting the parameter id. If the record is deleted, a message “Customer deleted” is stored in the flash[:notice] object, otherwise an error message is stored.

After the method finishes, it redirects the flow to the index.

Now you can run the server and make yourself a test using the DELETE functionality.

Improving the DELETE

Although the delete is working, we can improve it. A simple change is put a Javascript popup to confirm if the user really want to delete the record. Fortunately in Rails it is a simple task. Simple add a parameter called :confirm in the link_to helper method.

<%= link_to "Delete",{:action => :delete_customer, :id => customer},:confirm => "Are you sure ?" %>

Pay attention on the { and } in the :action and :id parameters. Also take a look at the :confirm parameter.

After that change, run again the application and try to delete a record. Rails is fantastic, isn’t it?

A Dash of Ajax

Rails brings an excellent Ajax support. If you want to create a web 2 application, you must read the web 2 section in the “Agile Web Development with Rails” book from Dave Thomas and David Heinemeier Hansson.

Here I am going to show a simple Ajax example with fit very well in our example.

When the user clicks on DELETE link, instead the page makes a submit, delete the user and refresh the entire page, let’s delete the user and only refresh the list of the customers.

Adding AJAX support for the User Interface

Let’s add the AJAX support for the User Interface. As we are using the layout file, we have to edit it (app/views/layouts/customers.html.erb) and insert the following line:

<%= javascript_include_tag :defaults %>

Now the page is able to accept Ajax functions.

Adding a <DIV> tag for the list

All the code that will be refresh, must be enclosed in a DIV tag.

Open the index.html.erb file and put the <%= render tag inside a <div tag. In our case, let’s use the same name than the partial.

<div id="list_customers">
  <%= render :partial => "list_customers",:object => @customers %>
</div>

Rails is going to refresh all the values inside the <div id=”list_customers” tag.

Changing the delete_customer method

The delete_customer method from the controller class should be changed.

We do not need of the flash[:notice] method anymore and also we have to refresh the @customers object with the current list of the customer after the customer is deleted. So the new delete_customer method could be as following:

  def delete_customer
    Customer.delete(params[:id])
    @customers = Customer.find(:all,  rder => :name)
  end

The first line the application deletes the customer and than the @customers object receives the new list of customers. (In a real application, would be better create a begin – rescue method and log the exception if any error happen).

Adding the link_to_remote tag

To create a simple link, we have used the link_to helper method. To use AJAX support, we must change it to link_to_remote tag. It is similar than the link_to, except by the fact we need to use a :url tag.

Change the current link_to into app/views/customers/_list_customers.html.erb file.

<td><%= link_to_remote "Delete",:url => {:action => :delete_customer, :id => customer},:confirm => "Are you sure ?" %></td>

Creating the .rjs file

To finish the Ajax support we need a .rjs file. This file is going to be called after the delete_method is performed.

In our case, we need a file called delete_customer.rjs. This file must be located into app/views/customers directory.

The content of this file is simple. Look at the content below:

page.replace_html("list_customers",:partial => "list_customers",  bject => @customers)

Let’s understand the parameters.

1. the first parameter “list_customers” is the name of the <DIV that will be refreshed
2. The :partial is the name of the partial used in the index.html.erb. In our case, remember, we have used the :partial => “list_customers”
3. the bject in this case is the same than the object used in the index.html.erb.

After these changes, the AJAX support is able to be performed.

Run again the application and try to delete a record. Firstly a popup come up asking you if you make sure you want to delete the record. If so, the record is going to be deleted and only the list of customer is going to be refreshed.

We finished this topic. The next one we are going to finish our application and you will be able to create a whole CRUD.

If you want to download the application used in this topic, you can get it here.

I hope this topic be useful for anyone.