在ajax回调上重新加载Rails

时间:2013-09-02 00:59:28

标签: javascript ruby-on-rails ruby ajax cancan

在我的Rails应用中,用户可以使用文件夹创建新的博客文章。我想在用户创建新帖子时刷新包含所有文件夹帖子的部分。我试图在文件夹控制器中创建一个动作,再次调用部分并替换它,但我得到一个CanCan :: AccessDenied 500错误。

在我的index.html.erb中,这是我的文件夹show partial:

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

这是加载到视图中的部分:

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

正如我所说,我想重新加载整个部分,以便反映新数据而无需用户执行整页刷新。

我在文件夹控制器中创建了一个新操作,如下所示:

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

最后,我的AJAX电话:

$("#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");
                }
            });
        })

这是我的routes.rb中的路线:

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

1 个答案:

答案 0 :(得分:0)

您可能无法正确定义用户能力。尝试将以下行之一添加到能力文件的底部:

can :ajax_load_events, Folder

允许用户执行特定的控制器操作。

或者:

can :manage, Folder

允许用户对资源执行所有类型的操作(不仅仅是CRUD)。