[英]Changing a div after a form submission using ruby on rails and ajax
我有一個通過Ajax提交的消息。 提交此表單后,我要獲取新信息並替換屏幕上已經存在的div。
<div style="float: left; margin-left: 10px; padding-left: 10px; border-left: 1px solid black;">
<%= form_for [@event,@default_event_status], :remote => true, :html => {:id => 'default_event_status', :'data-update-target' => 'last_status'} do |f| %>
<%= f.hidden_field :event_id %>
<%= f.hidden_field :video %>
<%= f.hidden_field :audio %>
<%= f.submit "Report all OK", :style => "margin-top: 1px;" %>
<% end %>
</div>
用Div替換
<div id="last_status">
Last Status:
<%= render "last_status" %>
</div>
控制者
def create
@event_status = EventStatus.new(params[:event_status])
@event_status.created_by = current_user.id
@event_status.save
render :partial => "events/last_status", :content_type => 'text/html'
end
我從網上的另一篇文章中得到了數據目標的想法,但是我不確定它是否有任何作用。 請給任何提示或想法,謝謝!
HTML頁面
<div id="monitor" style="height: 25px;">
<div id="last_status">
Last Status:
<%= render "last_status" %>
</div>
<%= content_for :javascript do %>
$(document).ready(
function() {
setInterval(function() {
$("#last_status_content").load("event_statuses/load_event_status");
}, 300000);
$('form[data-update-target]').live('ajax:success', function(evt, data) {
var target = $(this).data('update-target');
$('#' + target).html(data);
});
}
);
<% end %>
<div style="float: left; margin-left: 10px; padding-left: 10px; border-left: 1px solid black;">
<%= form_for [@event,@default_event_status], :remote => true, :html => {:id => 'default_event_status', :'data-update-target' => 'last_status'} do |f| %>
<%= f.hidden_field :event_id %>
<%= f.hidden_field :video %>
<%= f.hidden_field :audio %>
<%= f.submit "Report all OK", :style => "margin-top: 1px;" %>
<% end %>
</div>
<span id='hide_status'><%= link_to "Hide", "#", :onclick => "document.getElementById('monitor').style.display = 'none'" %> </span>
</div>
您可以在頁面中使用javascipt事件,也可以使用:remote => true來返回Javascript。 檢查此有用的演員表;)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.