CODEWITHSUNDEEP
jqueryruby-on-railsactiverecord
jplumey
jplumey

Reputation: 13

Browser not responding to destroy.js.erb

I have a Rails 3.2.3 application that manages volunteers and events. Within one of my views I am creating a link to destroy a volunteer event. I am using data-remote=true. The controller runs correctly and Rails says it is rendering my destroy.js.erb, but my script within the file is not being invoked. My script is trying to delete a DIV element and to update the content of a span. Here are some of the details:

My view code:

<%= link_to '', event, method: :delete, confirm: "Are you sure you want to delete this  volunteer posting?", title: event.name, class: "icon-remove", remote: true%> </li>

My controller code: ...

respond_to  :html, :js

def destroy
    @volunteer_event = VolunteerEvent.find(params[:id])
    @volunteer_event.destroy

    respond_with(@volunteer_event) 

end

My destroy.js.erb

$("#hours_worked_total").html("<%= @volunteer_event.worker.account.total_hours_worked %>")

$("#volunteer_posting-<%=@volunteer_event.id %>")
  .fadeOut ->
      $(this).remove()

This is the resulting HTML built in the view:

<ol class="events">
<div id="volunteer_posting-48">
<li><strong>9808</strong> worked on August  5, 2012 by <i>Louie Ferry</i> for a total of 5 hours. 
<a href="/volunteer_events/48" class="icon-remove" data-confirm="Are you sure you want to delete this volunteer posting?" data-method="delete" data-remote="true" rel="nofollow" title="9808"></a> </li>
</div>
</ol>

This is the server log:

Started DELETE "/volunteer_events/48" for 127.0.0.1 at 2012-05-08 11:17:50 -0400
...
Rendered volunteer_events/destroy.js.erb (2.7ms)

This is the browser request and response:

Response:
$("#hours_worked_total").html("0")


$("#volunteer_posting-48")
   .fadeOut ->
   $(this).remove()

Content-Type:text/javascript; charset=utf-8

Upvotes: 1

Views: 491

Answers (1)

Dylan Markow
Dylan Markow

Reputation: 124419

You're using coffeescript in your erb file. Either rename it to destroy.js.coffee, or change it as follows:

$("#hours_worked_total").html("<%= @volunteer_event.worker.account.total_hours_worked %>");

$("#volunteer_posting-<%=@volunteer_event.id %>").fadeOut(function(){
  $(this).remove();
});

Upvotes: 4

Related Questions