изменять значение динамически без обновления страницы

Question

У меня есть код ниже в моем приложении rails.

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

Это метод, который вычисляет оценку проекта компании.

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

Есть некоторые другие значения и изменение оценки проекта в соответствии с с этими другими значениями. Это снимок экрана моего приложения. Когда я меняю значения продукта, рыночной тяги, готовности предприятия, простоты интеграции, также меняются оценки проекта. Но это видно после обновления страницы. Но я хочу изменить его без обновления и после изменения значений этих полей. Как я могу этого добиться?

введите описание изображения здесь

Answer 1

Как указано вами, когда вы меняете значения продукта, Market Traction, Enterprise Readiness, Ease of Integration, также меняются баллы проекта. Это означает, что значения обновляются правильно на стороне сервера.

В основном вам нужно манипулировать внешним интерфейсом. При изменении значений необходимо инициировать событие изменения. Я предполагаю, что вы используете функцию basi c HTML Range slider

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

updateProjectScore(), которая может собирать значения ползунков и вычислять оценку или может извлекать из бэкэнда. Здесь будет лучше рассчитывать на стороне интерфейса, так как событие будет запускаться постоянно.

Обратитесь к этому ответу для получения дополнительной информации об использовании oninput и onchange для ползунка.

Вы также можете использовать jQuery при изменении события

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