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>

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

マイクロポスト作成アクション

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

以下を追加することをお勧めします

createない場合に備えて、コントローラー アクションのアクションに対する JavaScript 応答。次のように簡単にすることができます

respond_to { |format| format.js }

また、必ず:remote => trueフォームに保管してください。

Respond_to を追加するjsと、コントローラは の下にあるファイルを見つけようとしますapp/views/model_plural/create.js.erb。

js.erbファイルはそのままhtml.erbですが、Ruby を HTML に埋め込む代わりに、Ruby を JS に埋め込むことができます。

これで、次のような 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 %>

それが役に立てば幸い ：）

于 2012-05-18T13:33:28.360 に答える