Rails - jQuery/AJAX not refreshing partial

Question

I've got a timeline view that shows partials for events - so you can CRUD events directly on the timeline view. What I'm now trying to do is to have it so that when you click 'delete' next to an event, the delete partial refreshes, so that the user can see that the event has been deleted. I can't seem to get this to work - the event does get deleted when the user clicks delete, but the partial doesn't refresh. You have to refresh the page to get the updated partial.

Also, please can someone tell me how I would request the updated contents of the "my-timeline" div, so that the deleted event doesn't appear in there too? Thanks!

timeline/show:

<div id="my-timeline"></div>
<div id="delete_events">
    <%= render :partial => "delete_events", :locals => { :events => current_user.events }%>     
</div>

timeline/_delete_events.html.erb:

<%= button_to 'Delete', event, confirm: "Are you sure?", method: :delete, :remote => true %>

events/delete.js.erb:

$('#delete_events').html('<%= escape_javascript( render :partial => "/timelines/delete_events", :locals => { :events => current_user.events } ) %>');

events controller:

def destroy
    @event = Event.find(params[:id])
    @event.destroy

    respond_to do |format|
      format.html { redirect_to current_user.timeline, notice: 'Event was successfully removed.' }
      format.json { head :no_content }
      format.js
    end
  end

The javascript for generating the timeline (only located here temporarily!) into the my-timeline div:

<script>
            $(document).ready(function() {
                createStoryJS({
                    type:       'timeline',
                    width:      '820',
                    height:     '600',
                    source:     '/users/<%= current_user.id %>/events.json?callback',
                    embed_id:   'my-timeline',
                    font:       'Euphoria-Droid',
                    debug:      true,
                    gmap_key:   'foo',
                    maptype:    'HYBRID'
                });
            });
        </script>

score 1 · Accepted Answer · answered Oct 16 '12 at 10:51

1

i think you should change name from

  events/delete.js.erb

    to

 events/destroy.js.erb

and by write alert("ok") in destroy.js.erb check control comes here

Hope it works

answered Oct 16 '12 at 10:51

Kashiftufail

10,815
11
45
79

silly me!! That works great now, thanks! How would I also refresh the contents of the timeline div? It is generated by javascript itself, so not something I can just request a new partial for. Thanks! – ecs Oct 16 '12 at 10:57
I can't do that, the timeline is not a partial, it is generated by javascript. How do I request the updated contents of the div? Thanks. – ecs Oct 16 '12 at 11:03
Ok, I've added more code above - the js that generates the timeline is in the application layout (that's only temporary!), and puts the timeline in the my-timeline div. So how do I get the contents of the div to update without having to refresh the page? Thanks. – ecs Oct 16 '12 at 11:06
checkout here http://stackoverflow.com/questions/121817/replace-text-inside-a-div-element – Kashiftufail Oct 16 '12 at 11:21
That sort of works - I can target the correct div, but I can't get it to refresh itself. I can only get it to say e.g. "Hello world". – ecs Oct 16 '12 at 11:29
I figured it out - I moved the scripts and loading divs to seperate partials and reloaded these in the destroy.js.erb file and it works great now. – ecs Oct 16 '12 at 11:48

Rails - jQuery/AJAX not refreshing partial

1 Answers1