【问题标题】:Is it possible to refresh partial frequently using Ajax?是否可以使用 Ajax 频繁刷新部分?
【发布时间】:2012-12-08 22:34:03
【问题描述】:

在后台,我希望它重新加载并显示有多少未读消息。
我想要不刷新页面。我的意思是使用ajax。

如果我在菜单中有这个,我怎样才能每 30 秒只刷新这个部分?

<li><%= link_to sanitize('<i class="icon-envelope"></i> ') + "received messages" + sanitize(' <span class="badge badge-info">'+current_user.mailbox.inbox(:read => false).count(:id, :distinct => true).to_s+'</span>'), messages_received_path  %></li>

messages_controller.rb

  def received
    if params[:search]
     @messages = current_user.mailbox.inbox.search_messages(@search).page(params[:page]).per(10)
    else
     @messages = current_user.mailbox.inbox.page(params[:page]).per(10)
    end 
     add_crumb 'Messages Received', messages_received_path

     @box = 'inbox'
     render :index
  end

更新:_____________ em>__________________

assets/javascript/refresh_messages_count.js

$(document).ready(function () {
    // will call refreshPartial every 3 seconds
    setInterval(refreshPartial, 3000)

});

function refreshPartial() {
  $.ajax({
    url: "messages/refresh_part";
 })
}

messages_controller.rb

def refresh_part
    @message_count = current_user.mailbox.inbox(:read => false).count(:id, :distinct => true)

    # get whatever data you need to a variable named @data 
    respond_to do |format| 
        format.js {render :action=>"refresh_part.js"} 
    end

end

视图/布局/_menu.html.erb

<span id="message_received_count"><%= render :partial => "layouts/message_received_count" %></span>

视图/布局/_message_received_count.html.erb

<% if user_signed_in? && current_user.mailbox.inbox(:read => false).count(:id, :distinct => true) > 0 %>
 <li><%= link_to sanitize('<i class="icon-envelope"></i> ') + "Received" + sanitize(' <span class="badge badge-info">'+@message_count.to_s+'</span>'), messages_received_path  %></li>
<% else %>
 <li><%= link_to sanitize('<i class="icon-envelope"></i> ') + "Received", messages_received_path  %></li>
<% end %>

视图/消息/refresh_part.js.erb

$('#message_received_count').html("#{escape_javascript(render 'layouts/messages_received_count', data: @message_count)}");

【问题讨论】:

标签: ruby-on-rails ruby-on-rails-3 jquery


【解决方案1】:

您将使用 setInterval 发送 ajax 请求:

$(document).ready(function () {
    // will call refreshPartial every 3 seconds
    setInterval(refreshPartial, 3000)

});

// calls action refreshing the partial
function refreshPartial() {
  $.ajax({
    url: "whatever_controller/refresh_part"
 })
}

然后您在控制器中执行如下操作:

def refresh_part
  # get whatever data you need to a variable named @data
  respond_to do |format|
    format.js
  end
end

然后你会写一个名为refresh_part.js.haml的js文件(你可以用erb代替haml)。

refresh_part.js.haml 看起来像这样:

$('#part_you_want_to_refresh').html("#{escape_javascript(render 'name_of_partial', data: @data)}");

确保在routes.rb 中设置正确的路由。

【讨论】:

  • 谢谢我应该把ajax请求部分放在哪里???我应该直接把它写到我的控制器吗?还是我需要制作新文件之类的???
  • jquery 部分应该在你的视图中包含的 js 文件中,而操作应该只是在控制器中。
  • 是的,我知道。但是我想知道你为什么将ajax请求和refresh_part.js分开???你能举个例子在哪里放置ajax请求吗?
  • refresh_part.js.haml 是一个文件,将由服务器作为对 ajax 请求的响应提供,它不会包含在视图的 js 中。在 Unobtrusive Javascript railscasts.com/episodes/… 和本教程 net.tutsplus.com/tutorials/javascript-ajax/… 上查看此演员表
  • 啊我明白你的意思了!所以我必须把你的 javascript 的第一个块放在 layouts/application.html.erb 的头部?正确的??如果是这样,我应该创建文件分隔并在 application.html.erb 中呈现该文件吗?
【解决方案2】:

仅供参考,refresh_part.js.erb 看起来像这样:

$("#part").html("<%= escape_javascript(render 'partial', data: @data) %>");

代替:

$('#part').html("#{escape_javascript(render 'partial', data: @data)}");

另外,我们可以使用“escape_javascript”的别名来简化:

$("#part").html("<%= j(render 'partial', data: @data) %>");

【讨论】:

    【解决方案3】:

    是的,你可以

    <html>
    <head>
    <script type="text/JavaScript">
    <!--
    function timedRefresh(timeoutPeriod) {
        setTimeout("location.reload(true);",timeoutPeriod);
    }
    //   -->
    </script>
    </head>
    <body onload="JavaScript:timedRefresh(5000);">
    <p>This page will refresh every 5 seconds. This is because we're using the 'onload' event to call our function. We are passing in the value '5000', which equals 5 seconds.</p>
    <p>But hey, try not to annoy your users too much with unnecessary page refreshes every few seconds!</p>
    </body>
    </html>
    

    来源:http://www.quackit.com/javascript/javascript_refresh_page.cfm

    【讨论】:

    • 感谢您的建议。但我想用 rails 来做,只应用部分:)
    猜你喜欢
    • 2010-10-05
    • 2021-11-18
    • 1970-01-01
    • 2020-07-04
    • 2010-12-19
    • 2014-10-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多