1

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

我有一个用户有很多微博

解决方案

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(user)

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

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

微博.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();
});
});

微博创建动作

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
4

1 回答 1

1

我建议您添加以下内容

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

respond_to { |format| format.js }

还要确保保留:remote => true在您的表格上。

通过添加一个 respond_tojs您的控制器将尝试查找位于app/views/model_plural/create.js.erb.

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

现在您可以创建类似这样的 js 视图。

app/views/microposts/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 %>

希望能帮助到你 ：）

于 2012-05-18T13:33:28.360 回答