refreshing a div element using jQuery in Rails 3 app

Question

I have a rails 3 app which uses resque to run long running jobs in the background and I want to create a view to the results on another page

At the moment I have this scenario working

Resque runs a job and writes the info to the database (updates the info entry) as it progresses. Once the job is complete it updates one of the database entries i.e. it sets complete = 1 (complete is created with a value of 0)

Db schema is

create_table "refreshes", :force => true do |t|
    t.string   "name"
    t.string   "info"
    t.integer  "complete"
    t.datetime "created_at"
    t.datetime "updated_at"
end

Another page view in the app will display the database entry by calling it’s controller and displaying the latest data on a page, this view has a piece of logic to insert a standard JavaScript refresh element if the complete value in the database is not equal to 1

view.html.erb

<% if  @refreshes.complete == 0 %>
 <meta http-equiv='refresh' content='5'>
<%end%>

<div id="data">
<p>
    <b>Name:</b>
    <%= @refreshes.name %>
</p>
<p>
    <b>Info:</b>
    <%= @refreshes.info %>
</p>
</div>

Controller method

def view
    @refreshes = Refresh..find(params[:id])

    respond_to do |format|
      format.html # view.html.erb
      format.xml  { render :xml => @refreshes }
    end
end

this all works fine but it does do a full page reload every 5 seconds when complete is set to 0, and what I want to do is just refresh the div that displays the data ( div id = data) without refreshing the whole page.

I think this can be done using jquery and some JavaScript but I can’t find a way to do it so can anyone help? Or even if you can point me in the direction I would appreciate it Cheers Mike

Yogesh · Accepted Answer · 2012-01-27 15:32:56Z

2

Yes, this can be done using JavaScript. One approach will be

To refresh a div every n minutes, you can use setInterval method to call a function every n miliseconds.
This function should make ajax request to get data from server and insert the data in HTML.

Below code uses jQuery but you can use any other library to get the result.

    $(document).ready(function() {
        // get data every 5 mins and refresh myDiv
        var pingAfter = 5000;  
        var refreshId = setInterval(function() {
            $("#myDiv").load('/partial/data');
        }, pingAfter);
    });

brightcherry.co.uk site has an example code to achieve the same.

answered Jan 27, 2012 at 15:32

Yogesh

1,5761 gold badge8 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user891380 Over a year ago

Thanks both, will try both of these over the weekend

dbKooper · Accepted Answer · 2012-01-27 12:42:54Z

1

With Jquery you can do a ajax call which can be called again and again using a timer

application.js call this function on click of button or when backgroung job starts

updateDiv = function(){
$.ajax{
 url:'/controller/view.js?paramid='+id+'so..on='+so..on,
 method:get,
 success:function(){
  if (data.complete==1){
   //stop this
  }else{
   setInterval(updateDiv,5000);
  }
 }

Inside your controller:::

def view
 //logic to find param
 render do|f|
  f.html
  f.js
 end
end

view.js.erb

#create a partial that can be rendered inside div 'data'
$('#data').render(<% partial %>);
or 
$('#data').html();

answered Jan 27, 2012 at 12:42

dbKooper

1,04510 silver badges17 bronze badges

Collectives™ on Stack Overflow

refreshing a div element using jQuery in Rails 3 app

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related