Successful AJAX delete functionality without page refresh

Question

Successful AJAX delete functionality without page refresh

After extensive searching, I still can't seem to figure out why The Pit is deleting according to my logs but the changes aren't reflected on the page until I manually refresh. This is my first time working with JS in my app so it's a learning process for me. Any insights would be greatly appreciated.

Here's what my log says:

Started DELETE "/pits/25" for 127.0.0.1 at 2014-09-01 00:20:45 -0500
Processing by PitsController#destroy as JS
  Parameters: {"id"=>"25"}
  User Load (0.4ms)  SELECT  "users".* FROM "users"  WHERE "users"."id" = 1  ORDER BY "users"."id" ASC LIMIT 1
  Pit Load (0.3ms)  SELECT  "pits".* FROM "pits"  WHERE "pits"."user_id" = ? AND "pits"."id" = 25 LIMIT 1  [["user_id", 1]]
   (0.1ms)  begin transaction
  ActsAsVotable::Vote Load (0.1ms)  SELECT "votes".* FROM "votes"  WHERE "votes"."votable_id" = ? AND "votes"."votable_type" = ?  [["votable_id", 25], ["votable_type", "Pit"]]
  SQL (28.1ms)  DELETE FROM "pits" WHERE "pits"."id" = ?  [["id", 25]]
   (1.3ms)  commit transaction
  Rendered pits/destroy.js.erb (0.6ms)
Completed 200 OK in 111ms (Views: 37.7ms | ActiveRecord: 30.2ms)

Index view:

<div class = "container list-pits"> 
  <%= link_to "Add New Pit", new_pit_path, class: "btn btn-default" %>
  <br>
  <br>
  <% @pit.each do |pit| %>

   <div class = "container">
    <div class = "well pit-index"> 
       <h3 id="pit-title"><%= link_to pit.topic, pit_path(pit) %></h3>
       <p>by <%= link_to pit.author, '#' %></p>
          <br>
            <p><%= pit.summary %></p>
            <p>Replies (<%= pit.comments.count %>)</p>
          <br>
            <p>Pit Created by: <%= link_to pit.user.name, pit.user %> on <%= pit.created_at %></p>
            <%= link_to "View Pit", pit_path(pit), class: "btn btn-primary" %>
          <%= link_to pit_path(pit), remote: true, method: :delete, data: { confirm: 'Are you sure?' } do %>
            <button class = "btn btn-primary">Delete!</button>
            <% end %>
      </div>
    </div>
      <% end %>
 </div>

Controller Action:

def destroy
  @pit.destroy
end

destroy.js.erb:

$('.pits').html("<%= j (render @pits);

javascript ruby-on-rails ajax destroy

Answer 1

Answer №1

Let's get started:

#app/views/pits/destroy.js.erb
$('.pits').html("<%= j (render @pits) %>");

Explaining Ajax in RoR

If you're new to RoR / Ajax, here are some tips to help you understand the process:

When you send an ajax request, you'll receive a response from the server. It's important for you as the developer to handle this response effectively in your application.

Always remember that ajax always sends a response - it's up to you how you want to handle it.

--

In Ruby on Rails, there are two types of Ajax responses you can work with:

"Standard" Ajax response handling

Rails-based response using the views system

Both methods achieve the same goal but differ in how they are implemented.

The "standard" ajax response method allows you to capture and manipulate the response within the ajax call itself:

$.ajax({
  ...
  success: function(data) {
     ...
  }

This method enables you to work with the raw data from the server response. However, you can only use the data received through the ajax response unless specified otherwise.

The other approach is the "Rails" way of utilizing Ajax which involves creating functionality that Rails server will render under the views directory, allowing you to utilize Rails-specific methods:

#app/controllers/pits_controller.rb
class PitsController < ApplicationController
  respond_to :js, :html, only: :destroy

  def destroy
     @pit = Pit.find params[:id]
     @pit.destroy

     respond_with @pit
  end
end

#app/views/pits/destroy.js.erb
// you can access @pit here
$('.pits').html("<%= j (render @pits) %>");

Understanding Ajax Concept

Ajax is a method of sending asynchronous requests from your browser to the backend server:

To put it simply, each ajax request you make is a new interaction with the server due to the statelessness of the HTTP protocol. By using Javascript, you can trigger new requests and receive responses from the server without reloading the page.

The nature of the response depends on your backend coding, but essentially, ajax allows you to exchange data beyond traditional HTTP requests. In essence, ajax requests function similarly to standard requests but are facilitated by Javascript.

Answer 2

Let's get started:

#app/views/pits/destroy.js.erb
$('.pits').html("<%= j (render @pits) %>");

Explaining Ajax in RoR

If you're new to RoR / Ajax, here are some tips to help you understand the process:

When you send an ajax request, you'll receive a response from the server. It's important for you as the developer to handle this response effectively in your application.

Always remember that ajax always sends a response - it's up to you how you want to handle it.

--

In Ruby on Rails, there are two types of Ajax responses you can work with:

"Standard" Ajax response handling

Rails-based response using the views system

Both methods achieve the same goal but differ in how they are implemented.

The "standard" ajax response method allows you to capture and manipulate the response within the ajax call itself:

$.ajax({
  ...
  success: function(data) {
     ...
  }

This method enables you to work with the raw data from the server response. However, you can only use the data received through the ajax response unless specified otherwise.

The other approach is the "Rails" way of utilizing Ajax which involves creating functionality that Rails server will render under the views directory, allowing you to utilize Rails-specific methods:

#app/controllers/pits_controller.rb
class PitsController < ApplicationController
  respond_to :js, :html, only: :destroy

  def destroy
     @pit = Pit.find params[:id]
     @pit.destroy

     respond_with @pit
  end
end

#app/views/pits/destroy.js.erb
// you can access @pit here
$('.pits').html("<%= j (render @pits) %>");

Understanding Ajax Concept

Ajax is a method of sending asynchronous requests from your browser to the backend server:

To put it simply, each ajax request you make is a new interaction with the server due to the statelessness of the HTTP protocol. By using Javascript, you can trigger new requests and receive responses from the server without reloading the page.

The nature of the response depends on your backend coding, but essentially, ajax allows you to exchange data beyond traditional HTTP requests. In essence, ajax requests function similarly to standard requests but are facilitated by Javascript.

Successful AJAX delete functionality without page refresh

Answer №1

Similar questions

In Vue, it is not accurate to measure overflow

What are some strategies to optimize image loading speed in an HTML5 mobile application?

Creating a dynamic chart on the fly with the power of chart.js

Retrieve documents from mongodb that were created in the past half hour

utilizing d3 version 4 to overlay d3 paths on google maps

What is the best way to send two mongoose find queries to the correct GET route?

Retrieve several documents from an FTP directory via an AJAX request using a servlet or Java

How to Transfer Data from a Dynamic Drop-down Menu to PHP for Processing and Presentation in a Div Element on the Same Web Page

Utilizing React-Router-Redux alongside the powerful features of React-Bootstrap

Leveraging the concealed input value during an AJAX operation following its configuration

Obtaining the Immediate ID of a Widget using JQuery

The shade of grey on the curve appears instead of the usual red on the iPad. Any ideas on how to fix

When the mouse hovers over the image within the div, it undergo

What is causing the CSS transition to fail in the updated DOM?

Ways to incorporate additional values into an array object with Vuex

Using jQuery to append an <option> element to a <select> tag

what is the duration for which a browser stores an ajax response in cache

Can Nuxt's asyncData handle multiple requests with conditional statements?

Encountering a 500 error when using Ajax in Laravel

A similar functionality to the async pipe in TypeScript