CODEWITHSUNDEEP
javascriptruby-on-railsajaxdestroy
Mark Hustad
Mark Hustad

Reputation: 169

AJAX delete working but not reloading page

I'm sure I'm missing something here but can't figure out what despite all my searching. The Pit is deleting according to my logs but then nothing happens on page. I have to manually refresh the page for the changes to show. I'm new to using JS within my app so this is my first go at it. Thanks.

My log says this 

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);

Upvotes: 0

Views: 756

Answers (1)

Richard Peck
Richard Peck

Reputation: 76774

This is a start:

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

JS

You mention you're new with RoR / Ajax - let me give you some details on how to get this done

Firstly, you seem to be able to send your ajax request as required. The problem lies in with how you're capturing the response that you've created. I'll explain ajax in a minute, but let me initially give you the low-down on how to handle responses

Each time you send an ajax request, you'll receive a response from the server. As the developer, it's your job to then ensure the response is handled within your application

You must remember ajax ALWAYS sends a response - how you handle it is up to you

--

In Rails, there are two types of Ajax response you can use:

  1. "Standard" Ajax response capture
  2. Rails-based response (using the views system)

Both of these methods do the same thing (as I detail below), it's how they work with is different.

The "standard" ajax response allows you to capture & manipulate the response in the ajax call itself:

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

This gives you the ability to manipulate the "naked" feedback from your server, and is the most common use of Ajax. The drawbacks of this system are that you'll only be able to use the data you get through the ajax response for this (IE no Rails data is available unless defined in the Ajax response)

The other way of using Ajax is the "Rails" way (I'm not sure of the specific term). It basically allows you to create functionality in the background, which your Rails server will render under the views directory, allowing you to use 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 use @pit here
$('.pits').html("<%= j (render @pits) %>");

Ajax

To briefly explain Ajax for you - it's basically a way to send a "pseudo-request" through your browser to your backend server:

enter image description here

To give you perspective on this, you must appreciate that the HTTP protocol is stateless, meaning every request you send is "new" to the server. When you send ajax requests, it just initiates a new request with the server using Javascript, which will have a response delivered to it

The response you receive depends on your backend coding, but essentially gives you to send & receive data out of the traditional HTTP request scope. The bottom line is that ajax requests are just the same as a standard request, except it's delivered by Javascript

Upvotes: 1

Related Questions