CODEWITHSUNDEEP
ruby-on-railsajaxruby-on-rails-3
shiroe
shiroe

Reputation: 617

Auto refresh <div> without reload entire page

I'm trying to update the content of "mydiv" without refreshing the entire index page. @mydata is given by mycontroller. I need to recalculate it every n seconds and pass it to "mydiv"

With "link_to" it works!

index.html.erb

<%=
    link_to('refresh', '/mycontroller/index', :remote => true)
%>

<div id="mydiv">
    <%=
        @mydata
    %>
</div>

index.js.erb

$('#mydiv').html('<%= escape_javascript(@mydata) %>')

Now I need to refresh the content of "mydiv" automatically every n seconds (so without click on the link). I have tried solutions from:

but no luck.

In my application.js I have writed this:

function executeQuery() {
  $.ajax({
    //url: '/index',
    success: function(data) {
      $('#mydiv').html(data)
    }
  });
  setTimeout(executeQuery, 500);
}

$(document).ready(function() {
  setTimeout(executeQuery, 500);
});

For who is facing my same problem, I solved it by replacing

$('#mydiv').html(data)

with

$('#mydiv').load('/mycontroller/index #mydiv')

Upvotes: 13

Views: 9693

Answers (2)

Silambarasan R
Silambarasan R

Reputation: 1556

Use setInterval() instead of using setTimeout().

Ref: https://www.w3schools.com/jsref/met_win_setinterval.asp

function executeQuery() {
  $.ajax({
    type: 'GET',
    url: 'example.com/url/', // Provide your response URL here.
    success: function(data) {
      $('#mydiv').html(data);
    }
  });
}

setInterval(executeQuery(), (n * 1000)); // Replace 'n' with how many seconds you want.

This code will run the executeQuery() method in every 'n' seconds interval. So that your requirement is accomplished.

Upvotes: 1

Sushruth Siv
Sushruth Siv

Reputation: 45

Set layout to false in the action and just pass on the relevent content, not the entire page

def action1
   <your code here>
end
def action2
   <your code here>
   render :layout => false
end

Your view for action2 should have content pertaining only to #mydiv.

A better solution would be to use a single action and change render options based on type of request. (Ajax or non ajax)

Upvotes: 0

Related Questions