Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to refresh partial frequently using Ajax?

In background, I want it to reload and shows the number how many unread messages are there.
I want that without refreshing page. I mean using ajax.

If I had this in menu, how can I refresh only this section every 30 secs?

<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

UPDATE:_______________________________

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

views/layouts/_menu.html.erb

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

views/layouts/_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 %>

views/messages/refresh_part.js.erb

$('#message_received_count').html("#{escape_javascript(render 'layouts/messages_received_count', data: @message_count)}");
like image 331
HUSTEN Avatar asked Dec 21 '12 10:12

HUSTEN


People also ask

Does AJAX refresh the page?

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.

What is partial page updates?

Partial page updates are the result of an AJAX request that returns new HTML for portions of the page, most often the content of UpdatePanel controls.


1 Answers

You will use setInterval to send the ajax request:

$(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"
 })
}

Then you make an action in a controller like this:

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

then you will write a js file named refresh_part.js.haml (you could erb instead of haml).

refresh_part.js.haml would look like this:

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

make sure you set the correct routes in routes.rb.

like image 114
Khaled Avatar answered Sep 19 '22 21:09

Khaled