在Ajax回调中重新加载Rails部分

Question

In my Rails app users have folders in which they can create new blog posts. I'd like to refresh the partial containing all the folder posts when the user creates a new one. I've tried to create an action in the folders controller that just call the partial again and replaces it, but I'm getting a CanCan::AccessDenied 500 error.

In my index.html.erb, this is the link to my folders show partial:

<%= link_to folder_path(folder), remote: true %>

Here's the partial that is loaded into view:

    <div id="panel-container">
    <div id="entry-container" class="entry-window">
        <div id="meta-bar" class="top">
            <span id="location-span" style="position:relative; float:left;">In <%= @folder.title %></span>
            <div id="entry-meta" class="meta-info">
                <i class="icon-ok icons" id="save-entry"></i>
                <i class="icon-remove icons" id="close" style="margin-left:10px"></i>
            </div>
        </div>
        <div id="entry-create-partial" class="contain-entry">
            <div id="title-create-partial" class="title-partial" name="title" contenteditable="true" data-placeholder='Title it' style="color:black"></div>
            <div id="meta-popup"><button type="button" class="btn" id="nested-button">Create Nested Entry</button></div>
            <div id="content-create-partial" class="content-partial" name="content" contenteditable="true" data-placeholder='Write anything' style="color:gray"></div>
        </div>
    </div>

    <div id="container-edit" class="entry-window">
        <span id="location-span" style="position:relative; float:left;">In <%= @folder.title %></span>
        <div id="entry-meta" class="meta-info">
            <button type="button" id="save-edit" class="btn">Save</button>
            <button type="button" class="btn" id="close-edit"><i class="icon-remove" id="entry-cancel-x close-edit"></i>Cancel</button>
        </div>
        <div id="entry-edit-partial" class="contain-entry">
            <div id="title-edit-partial" class="title-partial" name="title" contenteditable="true" style="color:black"></div>
            <div id="content-edit-partial" class="content-partial" name="content" contenteditable="true" style="color:gray"></div>
        </div>
    </div>

    <div id="right-panel">
        <div id="top" class="top">
            <h3><%= @folder.title %></h3>
            <ul id="inner-list">
                <button class="btn" id="journal-create-button">New Journal</button>
                <div id="create-journal-drop">
                    <form action="/folders" method="post">
                        <%= hidden_field_tag :user_id, current_user.id %> 
                        <%= hidden_field_tag :parent_id, @folder.id %>
                        <h3 id="journal-create-partial">New Sub-Journal</h3>
                        <input type="text" id="titleinput" name="title" placeholder="Title it"></input>
                        <button type="submit" class="md-close folder-create" id="folder-create">Create</button>
                    </form>
                </div>
                <button class="btn" id="entry-button">New Entry</button>
                <button type="button" id="delete-button" class="btn"><i class="icon-remove"></i></button>
            </ul>
        </div>
        <% if @folder.submissions.count > 0 %>
        <svg id="submission-circles">
            <circle></circle>
            <circle></circle>
            <circle></circle>
            <circle></circle>
        </svg>
        <% else %>
        <h2>It's quiet in here. Create a journal entry or sub-journal to get started!</h2>
        <% end %>
    </div>
</div>

As I said, I'd like to reload this whole partial so that the new data is reflected without the user having to perform a full page refresh.

I created a new action in the folders controller that looks like this:

def ajax_load_events
    respond_to do |format|
        format.js
        format.html
    end
end

Ajax_load_events.js:

$("#panel-container").replace_html('<%= escape_javascript(render(:partial => "contents", :locals => {:folder => @folder})).html_safe %>');

And finally, my AJAX call:

$("#save-entry").click(function(){
            $.ajax({
                type: "POST",
                url: "/submissions",
                dataType: "json",
                data: {title: $("#title-create-partial").text(), content: $("#content-create-partial").text(), folder_id: <%= @folder.id %>},
                complete: function(){
                    $.get("/ajax_load_events/", {folder: <%= @folder.id %>}, null, "script");
                }
            });
        })

Here's the route in my routes.rb:

get "/ajax_load_events(.:format)" => "folders#ajax_load_events"

Answer 1

You may not be defining the user abilities correctly. Try adding one of the following lines to the bottom of the abilities file:

can :ajax_load_events, Folder

which allows the user to perform that specific controller action.

Or:

can :manage, Folder

which allows the user to perform all kind of actions over the resource (not only CRUD).