[英]Rails 4 ajax not rendering new data
我正在嘗試更新表單提交上的div,但是它不使用新數據進行渲染。
在我的js中:
$('#myform').submit(function() {
var valuesToSubmit = $(this).serialize();
$(this).find('textarea').addClass('uneditable-input').attr('disabled', 'disabled');
$.ajax({
url: $(this).attr('action'), //sumbits it to the given url of the form
data: valuesToSubmit,
type: "POST",
success: function(event, data, status, xhr){
alert("hello");
$('#indexstream').html("<%= j render :partial => 'post', :collection => @posts, :as => :post %>");
}
}).complete(function(){
$("#disabletext").removeClass('uneditable-input').removeAttr('disabled', 'disabled').val('');
$("#userlink").hide().show("slow").effect('highlight', {color: '#E5F2F7'}, 3000);
$(function() {
$("abbr.timeago").timeago();
});
});
return false; // prevents normal behaviour
});
職位控制器:
def create
@post = Post.new(post_params)
@post.email = current_user.username
@post.user_id = current_user.id
@post.firstname = current_user.firstname
@post.lastname = current_user.lastname
@post.avatar = current_user.avatar
@post.school = current_user.school
respond_to do |format|
@search = Post.search do #Post.search do
fulltext params[:search]
with(:school, current_user.school)
end
@posts = @search.results
if @post.save
format.html { redirect_to posts_path, :notice => '<i class="fa fa-check fa-5x"></i>'.html_safe }
format.json {render json: @post, status: :created, location: @post }
# format.json { render action: 'index', status: :created, location: @post }
puts "----------#{@posts.count}-------------"
format.js { render :partial => 'post', :collection => @posts, :as => :post, :layout => false }
# format.js {"$('#indexstream').replaceWith('<%= escape_javascript(render @post) %>');".html_safe}
puts "-------------#{request.format}----------------"
else
format.html { render action: 'new' }
format.json { render json: @post.errors, status: :unprocessable_entity }
#format.js {alert("couldn't create post")}
end
end
end
我的表格在視圖中:
<%= form_for(Post.new, :html => {:id => "myform"}, :remote => true) do |f| %>
<%= hidden_field_tag :user_id, current_user.id %>
<%= f.hidden_field :price, :as => :hidden, :value => 0 %>
<%= f.hidden_field :description, :as => :hidden, :value => "status" %>
<div class="field" style="margin-top: -10px; color: #4AC948;">
<h2 style="font-weight: bold; font-size: 180%;">status post:</h2>
<%= f.text_area :title, :class => "fruute-input", :id => "disabletext", :size => 29, :autofocus => true, :style => "height: 60px; line-height: 1; width: 230px; " %>
</div>
<br/>
<i class="fa fa-camera fa-2x"></i>(optional): <%= f.file_field :asset1 %>
<hr/>
<br/>
<div class="actions">
<%= button_tag(type: 'submit', class: "new-button2", style: "width: 242px; height: 50px; ") do %>
submit
<% end %>
</div>
<% end %>
</div>
</div>
</div>
<% end %>
我的js工作正常,我收到了警報,並且在控制台中獲得了rendered posts/_post.html.erb
但是除非手動刷新,否則該頁面不會顯示新數據。
任何想法?
謝謝
視圖
<div id="indexstream">
<%= render :partial => 'post' , :collection => @posts, :as => :post %>
</div>
部分:
<div id="userlink">
<%= image_tag post.avatar.url(:small), :style => "border-radius: 5px; border: 1px solid #e1e8ed;" %>
<%= post.firstname %> <%= " " %> <%= post.lastname %><%= " " %> <%= link_to post.email, user_path(post.user_id), {class: "usernamelink", style: "font-weight: normal;"} %>
<abbr class="timeago" title="<%= post.created_at.getutc.iso8601 %>" style="float: right; margin-right: 5px; font-size:90%;
margin-top: 12px; color: #8899a6; text-decoration: none !important;">
<%= post.created_at.to_s %>
</abbr>
<br/><br/>
<% unless post.description == "status" %>
<div style="background: #EF4836; width: 10px; height: 5px; float: right; margin-top: -58px; text-align: center; border-radius: 10px; color: #fff; padding-top: 2px; padding-bottom: 2px; margin-right: 5px;">
</div>
<h1 style="style= z-index: 100000; color: #3399FF "><%= link_to post.title, post_path(post), {class: "usernamelink", style: "color: #3399FF;"} %></h1>
<% if post.asset1.file? %><%= image_tag post.asset1.url(:small) %>
<% end %>
<% if post.asset2.file? %><%= image_tag post.asset2.url(:small) %>
<% end %>
<% if post.asset3.file? %><%= image_tag post.asset3.url(:small) %>
<% end %>
<% if post.asset4.file? %><%= image_tag post.asset4.url(:small) %>
<% end %>
<br/><br/>
<i class="fa fa-map-marker fa-lg" style="margin-right: 5px; margin-left: 5px;"></i> <%= post.school %>
<div style="float: right; text-align: left; margin-right: 20px;"><i class="fa fa-usd "></i><%= post.price %></div>
<% end %>
<% if post.description == "status" %>
<div style="background: #2ECC71; width: 10px; height: 5px; float: right; margin-top: -58px; text-align: center; border-radius: 10px; color: #fff; padding-top: 2px; padding-bottom: 2px; margin-right: 5px;">
</div>
<h1><%= auto_link(post.title) %></h1>
我看到幾種方法可以做到這一點。 您的解決方案包含2。首先通過ajax發送數據並為其設置html:
# create action
if @post.save
format.html { redirect_to posts_path, :notice => '<i class="fa fa-check fa-5x"></i>'.html_safe }
format.json {render json: @post, status: :created, location: @post }
format.js { render :partial => 'post', :collection => @posts, :as => :post, :layout => false }
# js
success: function(event, data, status, xhr){
alert("hello");
$('#indexstream').html(data);
}
其次是發送數據並通過js更新:
# js
success: function(event, data, status, xhr){
alert("hello");
console.log(status);
}
# create
format.js { "$('#indexstream').html("<%= j render :partial => 'post', :collection => @posts, :as => :post, :layout => false %>");".html_safe}
或創建文件create.js.erb
,您可以在其中放置
$('#indexstream').html('<%= j render :partial => "post", :collection => @posts, :as => :post, :layout => false %>');
alert("works!");
PS:單引號可能存在2次問題- $('#indexstream').html('<%= j render :partial => 'post', :collection => @posts, :as => :post, :layout => false %>');
我認為'post'可以更改為:post
希望這可以幫助。
更新資料
嘗試在保存后添加@posts = @search.results
:
@posts = @search.results
if @post.save
@posts = @search.results
....
在控制器中必須將format.js更改為
Format.js { render @post }
在js中
Success: function(event)
{
$('#indexstream').prepend(event):
}
一切都很漂亮
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.