通过colorbox提交Ajax帖子后更新div？

Posted 2023-05-09

【中文标题】通过colorbox提交Ajax帖子后更新div？

【英文标题】：Update a div after submitting an Ajax post through colorbox?

【发布时间】：2013-07-22 04:06:06

【问题描述】：

我使用的是 Rails 3.2.13，并且我有一个索引视图，其中列出了所有提交的帖子，我在同一个视图上添加了一个按钮，单击该按钮会在颜色框（iframe）中打开“创建帖子”表单，并且当我点击提交时，数据被保存，但我必须刷新页面才能看到新添加的帖子..我想在点击提交后出现而无需刷新..

这是我的索引视图：

> <h1>Listing posts</h1>
> 
> <table>   <tr>
>     <th>Name</th>
>     <th>Title</th>
>     <th>Content</th>
>     <th></th>
>     <th></th>
>     <th></th>   </tr> <div id="update-container">   <%= render 'show' %> </div>
> 
> </table> <div class="replace"></div>
> 
> <br /> <div></div>
> 
> <a href="" class="test">test</a> <a class='example5' title="My
> Page">Add a post</a> <br />
> 
> <%= link_to "Update User List", @show_path, :remote => true %>
> 
> 
> <%= link_to 'New Post', new_post_path %> <%= link_to "New post
> colorbox", "_form.html.erb", :data =>  :colorbox => true,
> :colorbox_height => '300px'  %> <script type="text/javascript"> <%=
> render(:partial => 'posts', :handlers => [:erb], :formats => [:js]) %>
> </script>

这是 _show 部分：

<% @posts.each do |post| %>
  <tr>
        <td><%= post.name %></td>
    <td><%= post.title %></td>
    <td><%= post.content %></td>
    <td><%= link_to 'Show', post %></td>
    <td><%= link_to 'Edit', edit_post_path(post) %></td>
    <td><%= link_to 'Destroy', post, method: :delete, data:  confirm: 'Are you sure?' , :remote => true, :class => 'delete_post' %></td>

  </tr>
<% end %>

还有js文件：

jQuery.ajaxSetup(
    'beforeSend': function(xhr) xhr.setRequestHeader("Accept", "text/javascript")
)

$(function()

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


     $(".example5").colorbox(width:"40%", 
        height:"100%", 
        iframe:true, 
        href:"posts/new", 
        scrolling:false,


     );



    m =$('.replace');
    m.innerHTML = "<%= escape_javascript(render :partial => "show") %>";
 );

我基本上已经尝试了一天半的时间来解决它。任何帮助将不胜感激。

更新：发布表单

<div class="form">
<%= form_for(@post, :remote => true, :class =>"target", :method => "post") do |f| %>
  <% if @post.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
      <% @post.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :title %><br />
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :content %><br />
    <%= f.text_area :content %>
  </div>
  <a href="" class="close">close</a>
  <div class="actions" id="target">
    <%= f.submit :disable_with => 'Please wait...', :class => 'submits'%>
  </div>
<% end %>
</div>

【问题讨论】：

使用 :remote => true 发布表单。在 Create 方法中使用 js 响应。创建一个 js.erb 文件，然后检查记录是否有效然后 div.html(' "show")%>')

在我的创建方法中我有 response_to format.js。我更新了问题以包含表单。

【参考方案1】：

试试这样 在_form.html.erb

<%= form_for(@post), :remote => true do |f| %>
<--- fields -->
<%end%>

在控制器中

def create

if @post.save
----codes ----
end
@posts = Post.all
respond_to do |format|
format.js
end

end

在 create.js.erb 中

$('#div').html('<%= escape_javascript( render :partial => "show" ) %>');

【讨论】：

在我使用 js.erb 代码后，我的 js 文件正在加载，但没有任何内容被执行！

现在它给了我这个错误“未定义的方法‘有效？’对于 nil:NilClass"

您的@post 对象是否成功保存并创建了新记录？

这就是我现在得到的'undefined method render'`