lundi 10 août 2015

Using Ajax in Rails 4 to send a form

I am quite new to rails and I would like to send a background request to the server and then show the results without updating the whole page.

I checked this video: http://ift.tt/1EwoFzK. In this video he says it is necessary to create a js view.I also took a look into this link http://ift.tt/1DGQ2KV but I am not able to achieve want I want.

Basically the user fills out a form and receive an answer from the controller BUT the values introduced in the form should be there. Because of the entire page refresh the values are reseted.

Routes.rb

 Rails.application.routes.draw do 

      root 'energycalcmod#front_end'
      get 'energycalcmod/front_end'
      post 'energycalcmod/get_values'

    end

energycalcmod_controller.rb

class EnergycalcmodController < ApplicationController

    def front_end

    end

    def get_values

        # Receiving the firsts two entries of the formular
        input1 = params[:user_entry_module1].to_i
        input2 = params[:user_entry_module2].to_i           

        @calc = Calculator.new(input1,input2)

        @energy_calc_results = @calc.energy_calc_module_output          

        respond_to do |format|
            format.html {redirect_to "/energycalcmod/front_end"}
            format.js
        end         

    end   

end

views/energycalcmod/front_end.html.erb

<div id="outer-container" > 
      <div id="input" >
        <h2>Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum perferendis mollitia at consectetur fuga quasi accusantium iste facere blanditiis nobis, aliquam incidunt impedit unde vitae aliquid dolor sapiente. Architecto, natus!</p> 

        <div id="wrapper-form" >
          <%= render "partials/form" %> 

        </div> 
      </div>

       <div id="optimal" >

      </div>
       <div id="independency" >
      </div>
       <div id="save" >

      </div>     
</div>  

<h3 id="test" style="display:none;" > <%=  @energy_calc_results %> </h3>

views/partials/_form.html.erb

<%= form_tag("/energycalcmod/get_values", remote: true) do %>

    <div id="upper-form-wrapper" >
        <div id="upper-form-left" >
            <h5 >Jahreshausverbrauch <a href="#"><i class="fa fa-info-circle" title="Jahreshasuverbrauch"></i></a> </h5>
            <h5 >PV <i class="fa fa-info-circle"></i></h5>
        </div>
        <div id="upper-form-right" >
            <%= text_field_tag "user_entry_module1", params["user_entry_module1"] || "", id: "jahreshausverbrauch", disable: true, class: "first-input-box", size: 1 %><span>kWh</span>
            <div id="slider-jahreshausverbrauch"></div>

            <%= text_field_tag "user_entry_module2", params["user_entry_module2"] || "", id: "pv", disable: true, class: "input-box", size: 1 %><span>kWp</span>
            <div id="slider-pv"></div>
        </div>  
    </div>   

    <%= submit_tag "Berechnen" %> 

<%end%>

views/energycalcmod/get_values.js.erb

$("test").show("<%= j @energy_calc_results %>" );

Error I got in the console:

Can't verify CSRF token authenticity
Completed 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0ms)

ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken)

Question: I want to post the results @energy_calc_results without refreshing the entire page.

Aucun commentaire:

Enregistrer un commentaire