Question

I’m experimenting with Raphael, SVG, and rails. I want the gage to dynamically update as a progress indicator of sorts as each task is crossed off via the completed button.

Something like tasks completed/total task created.

Attached is the view in the browser and below is the show page.

 <h1 class="page-header"> Getting it up</h1>
 <div class="well span9 offset2">
   <h2 class="page-header"><%= @list.name %></h2>
   <h2 class="lead"><%= @list.description %></h2>  
   <div class="pull-right" id="smallbuddy" style="width:340px; height:200px;"></div>

   <h3>Still Not Finished</h3>

   <ul>
     <% @list.tasks.incomplete.each do |task| %> 
     <li style="list-style:none"><%= task.description %> <%= button_to "Completed", complete_task_path(@list.id,task.id), :class =>"btn-mini" %></li>
     <% end %>
   </ul>
   <hr>
   <h3>Finished</h3>
   <ul id="completed">
     <% @list.tasks.completed.each do |task| %> 
     <li style="list-style:none; opacity:.5; text-decoration:line-through;"><em><%= task.description %></em></li>
     <% end %>
   </ul>

   <hr>
   <%= form_for [@list, @list.tasks.new] do |form| %>
   <p><%= form.text_field :description %><%= form.submit %></p>
   <% end %>
 </div>    

 <span class="btn affix"><%= link_to "Back to all Installs", lists_url %></span>
 <div>

 </div>

 <script>
   var g = new JustGage({
     id: "smallbuddy", 
     value: 27, 
     min: 0,
     max: 100,
     title: "Until Complete"
   }); 

 </script>

Do I need to manipulate the Raphael Lib? or the justgagejs lib?

Still working my way through it but some veteran advice to point me in the correct direction on how to achieve this would be helpful. Thanks in advance.

Answer 1

You need your rails controller to respond to the a JS request, read a little into this: Having trouble rendering Javascript in Rails question.

That way you can update your gauge in the JS returned by your controller.