Rails 5 ne restituant pas le résultat JQuery

Question

Je suppose que j'ai fait un bazar avec JQuery et ma pratique Rails, j'ai l'intention d'obtenir deux paramètres d'un 'form_tag' puis de rendre un résultat de calcul dans mon contrôleur dans un '' dans une vue , Je reçois le résultat dans la vue Réseau (outils de développement Chrome) mais rien n'est rendu dans le. Voici le code lié: Itinéraire:

get '/calculator', to: 'users#bmi_calc' 

users_controller.rb:

def bmi_calc 
    bmi_table = { 
    "Very severely underweight"    => { from: 0.0, to: 15.0 }, 
    "Severely underweight"     => { from: 15.1, to: 16.0 }, 
    "Underweight"       => { from: 16.1, to: 18.5 }, 
    "Normal (healthy weight)"    => { from: 18.51, to: 25.0 }, 
    "Overweight"       => { from: 25.1, to: 30.0 }, 
    "Obese class I (moderately obese)"  => { from: 30.1, to: 35.0 }, 
    "Obese class II (severely obese)"  => { from: 35.1, to: 40.0 }, 
    "Obese class III (very severely obese)" => { from: 40.1, to: 60.0 }, 
    "Pure fat factor"      => { from: 60.1, to: 100.0} 
    } 
    weight = params[:mass].to_f 
    height = params[:height].to_f 
    if weight > 0 && height > 0 
    resultado = '' 
    @bmi = weight/height ** 2 
    bmi_table.each do |advice, range| 
     if (@bmi > range[:from]) && (@bmi < range[:to]) 
     resultado = advice 
     end 
    end 
    respond_to do |format| 
     format.json { render json: {resultado: resultado} } 
    end 
    else 
    redirect_to current_user 
    end 
end 

users.js.erb:

$(document).ready(function(){ 
    $("#calculator-img").click(function(){ 
    $.getJSON('/calculator', function(data) { 
     var res = data.resultado; 
     $("#bmi-result").html(res); 
    }); 
    }); 
}); 

utilisateurs/show.html.erb:

<div class="row"> 
    <aside class="col-md-4"> 
    <section class="user_info"> 
     <h1><%= @user.name %></h1> 
    </section> 
    <section class="bmi_form"> 
     <%= render 'bmi_form' %> 
    </section> 

    <div id="bmi-result"> 

    </div> 
    </aside> 
    <div class="col-md-6"> 
    <section class="mid_section"> 
     <p>Some text</p> 
     <h2>BMI standard table</h2> 
     <%= image_tag "BMItable.png", alt: "BMI stardard table" %> 
    </section> 
    </div> 
</div> 

_bmi_form.html.erb:

<%= form_tag calculator_path, method: "get", remote: true, class: "navbar-left" do %> 
    <%= label_tag :mass, "Your mass (weight) in Kg" %> 
    <%= number_field_tag :mass, params[:mass], step: 0.01, class: "form-control" %> 

    <%= label_tag :height, "Your height in meters" %> 
    <%= number_field_tag :height, params[:height], step: 0.01, class: "form-control" %> 

    <%= image_submit_tag("BMI.gif", id: "calculator-img") %> 
<% end %> 

Et enfin ce que je reçois dans les outils développeurs Chrome:

Plese me aider à comprendre ce que je fais mal. Merci (Ceci est le défi que je voulais résoudre: https://gist.github.com/JonaMX/d29a754ae625664b0cf7 À la fin je, mais je devais livré rendre une nouvelle page avec le résultat ... Pas assez du tout)

Answer 1

Vous devez lier une fonction de gestionnaire à la requête ajax de votre formulaire. d'abord ajouter un identifiant à votre formulaire:

<%= form_tag calculator_path, method: "get", remote: true, class: "navbar-left", id: "bmi-form" do %> 
    <%= label_tag :mass, "Your mass (weight) in Kg" %> 
    <%= number_field_tag :mass, params[:mass], step: 0.01, class: "form-control" %> 

    <%= label_tag :height, "Your height in meters" %> 
    <%= number_field_tag :height, params[:height], step: 0.01, class: "form-control" %> 

    <%= image_submit_tag("BMI.gif", id: "calculator-img") %> 
<% end %> 

Ensuite, changez votre javascript à quelque chose comme ceci:

$(document).ready(function(){ 
    $("#bmi-form").on("ajax:success", function(evt, data, status, xhr){ 
    var res = data.resultado; 
    $("#bmi-result").html(res); 
    }); 
}); 

Pour plus d'informations, voir http://guides.rubyonrails.org/working_with_javascript_in_rails.html

Answer 2

peut essayer une fois ce code

$(document).ready(function(){ 
     $("#calculator-img").click(function(){ 
      $.getJSON('/calculator', function(data) { 
       var res = $.parseJSON(data); 
       $("#bmi-result").html(res.resultado); 
      }); 
     }); 
    }); 

Pour plus d'informations, voir https://boxoverflow.com/get-json-jquery-ajax/