How to render controller variables in view using Ajax/Ruby on Rails?

Question

I'm trying to display certain stats between two dates (two dropdowns).

My controller has the following method :

def data_stats

    data_between_two_dates = Data.where(:created_at => params[:created_at1]..params[:created_at2])
    @data_count = data_between_two_dates.count
    @gold_data_count = data_between_two_dates.joins(:status).where(status: DataStatus.find(8)).count
    puts(@data_count)
    puts(@gold_data_count)

I want to be able to display the following variables : data_count and gold_data_count in my view, right after selecting two dates from the dropdowns which I populate from my database.

The view is as follows (/views/data_stats/data_stats.html.erb) :

<select class="my-date" id="created_at1">
 <option value="" selected>-- Select Date --</option>
 <% datadate = Data.order(created_at: :desc).all %>
  <% datadate.each do |data| %>
   <%= content_tag(:option, data.created_at, value: data.created_at) %>
 <% end %>
</select>

<select class="my-date" id="created_at2">
 <option value="" selected>-- Select Date --</option>
 <% datadate = Data.order(created_at: :desc).all %>
  <% datadate.each do |data| %>
   <%= content_tag(:option, data.created_at, value: data.created_at) %>
 <% end %>
</select>

<div id="data_stats">
<label class="col-sm-2 control-label">Data count</label>
  <span id="data_count"><%= @data_count %></span>
<label class="col-sm-2 control-label">Gold Data count</label>
  <span id="gold_data_count"><%= @gold_data_count %></span>
</div>

Within the same view, at the bottom I have the Ajax query :

<script type="text/javascript">

 $(document).ready(function() {
  $('.my-date').on('change', function() {
   var data = {}

   $('.my-date').each(function() {
    if($(this).val()) {
      data[$(this).attr("id")] = $(this).val();
    }
  });
  console.log(data); 
  // After selecting the two dates 
  //the above print of `data` gives me this: 
  //`Object { created_at1: "2016-12-08 16:42:51 UTC", created_at2: "2017-05-23 06:11:02 UTC" }`

  if(Object.keys(data).length > 1) {
    $.ajax({
      type: "GET",
      url:  "<%= admin_data_stats_path%>",
      data: Object.keys(data),
      success: function (data) {
            console.log("<%= @data_count %>");
            console.log("<%= @gold_data_count %>");
            //Here when I just print the variables the count is always 0
         }   
    });
   }
  });
 });

</script>

The weird thing is that when I check my terminal after selecting the dates, I can clearly see the result of the puts I made in the controller (I get the count of data and gold data).. But I can't seem to figure out how I can display them in the view.

What am I missing?

Thanks in advance for your help!

Michael Yurkovetc · Accepted Answer · 2017-09-06T20:40:26.700

1

Rails variables @data_count and @gold_data_count in console.log returns their value when page was loaded, but not when ajax is success.

Your controller can render json with partial, if you want

respond_to do |format|
  format.js { render json: { html: render_to_string(partial: 'data_stats', locals: { data_count: @data_count, gold_data_count: @gold_data_count }) } }
end

Partial with stats _data_stats.html.erb:

<div id="data_stats">
<label class="col-sm-2 control-label">Data count</label>
  <span id="data_count"><%= @data_count %></span>
<label class="col-sm-2 control-label">Gold Data count</label>
  <span id="gold_data_count"><%= @gold_data_count %></span>
</div>

And use it in your js, such as

$.ajax({
  type: "GET",
  url:  "<%= admin_data_stats_path%>",
  data: Object.keys(data),
  dataType: 'json'
}).done((response) => {
  $('#data_stats').replaceWith(response.html)
})

edited Sep 06 '17 at 20:40

answered Sep 06 '17 at 18:38

Michael Yurkovetc

156
5

Thanks a lot for your answer! I'm confused though, when I put render json in the controller, I get the response in a complete view, no dropdowns, just the result of the json, and the count is still 0 I assume because I haven't selected anything.. How can I render the response in a div after selecting the dates from the dropdowns (the ones initially in the view)? – GeoSal Sep 06 '17 at 18:56
1

I added html to response – Michael Yurkovetc Sep 06 '17 at 19:22
When I inspect the page I get : SyntaxError: missing } after property list on this line ).done((response) => { Why is there a bracket before .done ? – GeoSal Sep 06 '17 at 20:28
1

my bad, I missed } after ajax options – Michael Yurkovetc Sep 06 '17 at 20:41
Thanks Michael! But the partial div for some reason doesn't show after I click on the second dropdown :/ There is no error on the console now, but when I check the network I see that the data_stats method doesn't get the dates? Here's exactly what I have : http://localhost:3000/admin/data_stats?undefined=&undefined= Knowing that before I used to see the two dates in the parameters before :/ – GeoSal Sep 06 '17 at 21:15
1

Why you use `Object.keys(data)` instead of `data` in ajax data property? I think problem with it – Michael Yurkovetc Sep 07 '17 at 09:13
Thanks a lot Michael for your help! I just tweaked some things and it works. Just one last question, what's the difference between .done and success function? – GeoSal Sep 07 '17 at 10:11
1

`done` is handler and `success` is ajax option. You can learn more [here](https://stackoverflow.com/questions/8840257/jquery-ajax-handling-continue-responses-success-vs-done) – Michael Yurkovetc Sep 07 '17 at 10:52

How to render controller variables in view using Ajax/Ruby on Rails?

1 Answers1