SVG update using gagejs and rails

Question

I am experimenting with Raphael, SVG and rails. I want the sensor to be dynamically updated as an indicator of progress when each task intersects through a completed button.

Something like completed tasks / created a common task.

The attached view in the browser, and below is the display 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 Raphael Lieb? or justgagejs lib?

Still working on it, but some veteran tips are pointing me in the right direction, how to achieve this would be helpful. Thank you in advance.

Answer 1

You need your rail controller to respond to a JS request, get a little involved in this: Failed to create Javascript in Rails .

This way you can update your sensor in the JS returned by your controller.