CODEWITHSUNDEEP
javascriptjqueryruby-on-rails-3
user891380
user891380

Reputation: 227

refreshing a div element using jQuery in Rails 3 app

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

Upvotes: 1

Views: 6544

Answers (2)

Yogesh
Yogesh

Reputation: 1576

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

  1. To refresh a div every n minutes, you can use setInterval method to call a function every n miliseconds.
  2. 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.

Upvotes: 2

dbKooper
dbKooper

Reputation: 1045

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();

Upvotes: 1

Related Questions