Question

我正在尝试提交一个微博，并将其显示在页面顶部，而不会重新加载页面，但我在使用它时遇到了很多麻烦。任何解释和解决方案将不胜感激。

我有一个有很多微博的用户

解

https://github.com/sunwooz/fasttwitter/pull/1

Here is a working implementation let me go thru the changes really quick

fasttwitter/app/views/layouts/application.html.erb
Since rails 3.1 you should use "application" instead of "defaults" apparently this was the main       problem, because it generated an error stopped the remote => true from working
fasttwitter/app/views/microposts/create.js.coffee
There is no need for this file. rails is going to check for a .erb file not a .coffee
fasttwitter/app/views/microposts/create.js.erb
I had some problems with the partial rendering, but it is working with the html you posted on     Stackoverflow

这是 show.html.erb（用户）

<h1><%= @user.email %></h1>

<%= form_for [@user, @micropost], :remote => true do |f| %>
<h1>What are you thinking?</h1><br/>
<%= f.text_field :content, :class => 'micropostfield', :placeholder => 'Press ENTER to submit' %><br/>
<%= f.submit %>
<% end %>

<div id="microposts">
<%= render @user.microposts.reverse %>
</div>

_micropost.html.erb partial

<%= div_for micropost do %>
<h3><%= micropost.user.email %></h2> <h4>Posted <%= time_ago_in_words(micropost.created_at) %> ago</h3>
<p>
    <%= micropost.content %>
</p>
<p>
    <%= link_to "Edit", edit_user_micropost_path(micropost) %>
    <%= link_to "Destroy", user_micropost_path(micropost), :method => :delete, :class => :destroy %>
</p>

Microposts.js

$(document).ready(function() { 
$('#new_micropost').submit(function(evt){
    var text = $('#micropost_content').val();
    var url = $('#new_micropost').attr('action');
    $.ajax({
        url: url,
        type: 'POST',
        data: { micropost: { content: text }},
        dataType: "JSON",
        success: function(data){
            $('#microposts').prepend('<div class="micropost"><h3>' + data.@user.email + '</h3><h4>Posted On: ' + data.created_at + '</h4><p>' + data.content + '</p></div>');
        };
    });
    evt.preventDefault();
});
});

Micropost创建动作

def create
@user = User.find(params[:user_id])
@micropost = @user.microposts.build(params[:micropost])
respond_to do |format|
  if @micropost.save
    format.html { redirect_to(@user) }
    format.xml { render :xml => @user, :status => :created, :location => @user }
    format.js
  else
    format.html { redirect_to(@user) }
    format.xml { render :xml => @micropost.errors }
    format.js { render :json => @micropost.errors }
  end
end
end

Answer 1

我建议你添加以下内容

对您的控制器操作create操作的javascript响应，以防您没有。它可以像

一样简单

respond_to { |format| format.js }

另外请务必在表单上保留:remote => true。

通过添加respond_to js，您的控制器将尝试查找app/views/model_plural/create.js.erb下的文件。

js.erb文件就像html.erb一样，但您可以将Ruby嵌入到JS中，而不是将Ruby嵌入到HTML中。

现在你可以创建像这样的js视图。

应用程序/视图/微柱/ create.js.erb

<% if @micropost.errors.any? %>
  alert('errors');
<% else %>
    $('#microposts').prepend('<div class="micropost"><h3>' +  "<%= j @micropost.user.email%>" + '</h3><h4>Posted On: ' + "<%= j @micropost.created_at %>" + '</h4><p>' +  "<%= j @micropost.content %>" + '</p></div>');
<% end %>

希望有所帮助：）

如何在不重新加载页面的情况下提交类似Twitter的微博并显示帖子？

1 个答案: