# AJAX replace items on a page progressively one at a time

**URL:** <https://www.ruby-forum.com/t/ajax-replace-items-on-a-page-progressively-one-at-a-time/156411>\
**Category:** Rails\
**Created:** [December 26, 2008, 10:57pm UTC](https://www.ruby-forum.com/t/ajax-replace-items-on-a-page-progressively-one-at-a-time/156411 "2008-12-26T22:57:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![JHuizingh](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/8797f3/32.png) [@JHuizingh](https://www.ruby-forum.com/u/JHuizingh)\
**Post date:** [December 26, 2008, 10:57pm UTC](https://www.ruby-forum.com/t/ajax-replace-items-on-a-page-progressively-one-at-a-time/156411/1 "2008-12-26T22:57:14Z")

</div>

I am working on a problem where I have a large task that is broken  
down into a lot of subtasks. The subtasks each take a significant  
amount of time to do. My data model looks something like this:

class LargeTask \< ActiveRecord::Base  
has\_many :sub\_tasks  
end

class SubTask \< ActiveRecord::Base  
belongs\_to :large\_task  
end

When I create the large task, it creates all of the subtasks on its  
own and populates them with the data that they need to run, and saves  
them. It doesn’t actually perform the subtask until I call a method  
on the subtask object.

What I am thinking is that when I create a new LargeTask, it will  
redirect to the show action of that LargeTask, and will display all of  
the subtasks in a list. I will then use AJAX to one-at-a-time call  
the Run action on each of the SubTasks and have it update the section  
of the page that it is displaying. When one gets finished running,  
then the javascript on the page being displayed would kick off the  
next task. Basically I want to give the user visual feedback of where  
in the process they are.

Is there a way that I can use the AJAX functionality built into rails  
to make this happen without having to do some sort of custom control  
mechanism to track all of the SubTasks on the client side? Or is  
there a better strategy to go about this?

The SubTasks do not need to be run in any particular order. I will  
probably eventually run 2 or 3 at a time.

Any suggestions? Thanks in advance.

Jonathan

---

<div class="post-metadata">

**Author:** ![JHuizingh](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/8797f3/32.png) [@JHuizingh](https://www.ruby-forum.com/u/JHuizingh)\
**Post date:** [December 26, 2008, 11:17pm UTC](https://www.ruby-forum.com/t/ajax-replace-items-on-a-page-progressively-one-at-a-time/156411/2 "2008-12-26T23:17:13Z")

</div>

On 26 Dec 2008, at 21:56, JHuizingh wrote:

> Is there a way that I can use the AJAX functionality built into rails  
> to make this happen without having to do some sort of custom control  
> mechanism to track all of the SubTasks on the client side? Or is  
> there a better strategy to go about this?

if the ajax update just re-rendered the list of subtasks then that  
would probably be enough.  
Or if you want to use something fancier then you might have something  
like

def progress  
#find the subtask that completed and assign it to @subtask  
render :update do |page|  
page[dom\_id(@subtask)].addClassName(‘complete’)  
end  
end

which will add the complete class to the div/span/whatever with the  
appropriate id. You could then style it so that such items had a green  
background or a check mark or whatever visual cue you want to give.

Fred

---

<div class="post-metadata">

**Author:** ![JHuizingh](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/8797f3/32.png) [@JHuizingh](https://www.ruby-forum.com/u/JHuizingh)\
**Post date:** [December 31, 2008, 3:17am UTC](https://www.ruby-forum.com/t/ajax-replace-items-on-a-page-progressively-one-at-a-time/156411/3 "2008-12-31T03:17:25Z")

</div>

Thanks for your thoughts. It got me on the right path. I ended up  
with a solution that had a small amount of frontend javascript code to  
manage the ajax calls. I used remote\_function to create functions out  
of the ajax call and put them in an array so I could call them  
whenever I wanted. It looked something like this.

on th page:

var calls\_to\_be\_made = [];

in the view:

\<% subtasks.each do |subtask| %\>

 ... content here 
 calls\_to\_be\_made[calls\_to\_be\_made.length] = function(){ \<%= remote\_function(:update =\> dom\_id(subtask), etc...) };

\<% end %\>

With this method I was able to start as many subtasks as I wanted like  
this:

calls\_to\_be\_made0;  
calls\_to\_be\_made1;

and then when one call returned I could have it kick of the next one  
until there are none left.

Thanks!  
Jonathan

On Dec 26, 4:16 pm, Frederick C. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)