change value dynamically without page refreshing

Question

I have below code in my rails app.

<h5 class="text-center">Project Score: <small><%= company_project_score(params[:id], c['id']) %></small></h5>

This is method which calculate the company project score.

def company_project_score(p, s)
    api_version_root = ENV['API_ROOT']+'/api/'+ENV['API_VERSION']
    api_token_hash = {content_type: :json, "X-USER-TOKEN": session[:user_token], "X-USER-EMAIL": session[:user_email]}
    url = api_version_root+'/ratings/graphs/projects/'+p+'/startups/'+s.to_s
    res = RestClient.get url, api_token_hash

    project_graphs = JSON.parse(res.body)
    if project_graphs.empty?
      0
    else
      project_graphs.inject(0) do |sum, hash|
        sum + hash['value']
      end / project_graphs.count
    end
end

There are some other values and project score change according to those other values.This is screen shot of my application. When I change the values of product, Market Traction, Enterprise Readiness, Ease of Integration, project score also change. But it shows after the page refreshing. But I want to change it without refreshing and once I change the values of those fields. How can I achieve this?

Answer 1

As specified by you when you change the values of product, Market Traction, Enterprise Readiness, Ease of Integration, project score also change. Which means the values are updating correctly on backend side.

What you mainly need is frontend manipulation. You need to trigger change event when you change values. I am assuming you are using basic HTML Range slider

<input type="range" min="5" max="10" step="1" 
   oninput="updateProjectScore()" onchange="updateProjectScore()">

updateProjectScore() function can collect values of sliders and calculate score or can fetch from backend. Here it will be better to calculate on frontend side as the event will be triggered continuously.

Refer this answer for further reference on using oninput and onchange for slider.

You can also use jQuery on change event

$(".slider").on("input change", function() { updateProjectScore(); });