CODEWITHSUNDEEP
ruby-on-railsajaxruby-on-rails-3jqueryruby-on-rails-3.2
Overduka
Overduka

Reputation: 11

Simple Ajax Effect dont works in Rails 3

i want make a simple delete using Ajax but this dont works, i wantmake whit fadeOut of JQuery but this dont work , i delete and the tr dont desappear how would be.

My application.js is

$('.delete_post').bind('ajax:success', function() {  
$(this).closest("tr").fadeOut();  
});

My peoplecontroller is

  def destroy
    @person = Person.find(params[:id])
    @person.destroy

    respond_to do |format|
      format.html { redirect_to people_url }
      format.js   { render :nothing => true }  
    end
  end

my view index.html.erb

  <tr>
    <td><%= person.name %></td>
    <td><%= person.birth %></td>
    <td><%= person.email %></td>
    <td><%= link_to 'Show', person %></td>
    <td><%= link_to 'Edit', edit_person_path(person) %></td>
    <td><%= link_to 'Destroy', person ,method: :delete, data: { confirm: 'Are you sure?' },:remote=> true, :class =>'delete_post'  %></td>
  </tr>
Im learning Ajax , but this dont works, the delete happening but the ajax dont works i include this tag in view 
<%= javascript_include_tag :defaults %>

but change nothing

the log is:

Started DELETE "/people/20" for 127.0.0.1 at 2012-09-03 15:23:45 -0300
Processing by PeopleController#destroy as JS
  Parameters: {"id"=>"20"}
  [1m[35mPerson Load (0.0ms)[0m  SELECT `people`.* FROM `people` WHERE `people`.`id` = ? LIMIT 1  [["id", "20"]]
  [1m[36mSQL (0.0ms)[0m  [1mBEGIN[0m
  [1m[35mSQL (0.0ms)[0m  DELETE FROM `people` WHERE `people`.`id` = ?  [["id", 20]]
  [1m[36m (46.9ms)[0m  [1mCOMMIT[0m
  Rendered text template (0.0ms)
Completed 200 OK in 94ms (Views: 46.9ms | ActiveRecord: 46.9ms)

Upvotes: 0

Views: 266

Answers (1)

jordanandree
jordanandree

Reputation: 553

The problem is that your event handler isn't attached to the document object, which handles the ajax:success callback. You are getting a 200 response code according to your log trace, and the record is being deleted okay.

Try this JavaScript code in your application:

$(document).on('ajax:success', '.delete_post', function(e) {
    $(e.currentTarget).closest('tr').fadeOut();
});

(Reference: https://stackoverflow.com/a/12221358/441611)

Upvotes: 1

Related Questions