title: Rails 4: How to update index page with AJAX
body: <p>I can't believe I haven't found other questions to answer this but I've searched high and low and can't find anything that really answers my question.</p>
  
  <p>Basically, I have an Expenses page in which I want to display all Expenses in a given month in a table. I have a month and year select and right now I have it working by adding month and year parameters to the url and going to that href with a little javascript. I would like to avoid a page refresh however and just update the table when the select box value is changed. As I understand it, because I'm not using a form, I can't use <code>:remote =&gt; true</code> and thus have to use AJAX. My research has brought me to set things up as the following.</p>
  
  <p>This is my JQuery with an AJAX call:</p>
  
  <pre><code>$(document).ready(function() {
  
      $('#monthSelect').change(function() {
          // alert("yay");
  
          var m = $(this).val();
          var y = $("#yearSelect").val();
          $.ajax({
              type: "GET",
              url: "/expenses",
              data: { month : m, year : y } ,
              success: function(data) {
  
              },
              dataType: "json"
          });
      });
  });
  </code></pre>
  
  <p><code>#monthSelect</code> and <code>#yearSelect</code> are the ids of my two select boxes. This part seems to work. When I change the value of the month select box, it sends the GET request to <code>"/expenses"</code> with the correct month and year in the <code>params</code>.</p>
  
  <p><code>/expenses</code> naturally routes to my <code>index</code> action. Here is the part where I'm confused.</p>
  
  <pre><code>def index
      @expenses = # Code that gets the expenses that correspond to the month and year in the params.
      # This part works. I've tested it and @expenses are all the records I want
  
      respond_to do |format|
          format.html
          format.json { render json: @expenses, status: :ok } #?????
      end
  end
  </code></pre>
  
  <p>So I guess my primary question is how the json part works, and if I should even be using json in the AJAX. Tutorials and videos I've looked at all seem to imply that getting the response in json is the way you're supposed to do it, but I'm not sure what "rendering json" even means. My understanding is that passing <code>@expenses</code>, it basically will render what <code>@expenses.to_json</code> returns, which is just a bunch of json, key-value pairs. How do I take that and make a table?</p>
  
  <p>A friend of mine that has done plenty of AJAX but no Ruby on Rails said that I can just write the HTML in the AJAX success function</p>
  
  <pre><code>...
  success: function(data) {
      $("#expenses-table").html("HTML of my Table");
  }
  </code></pre>
  
  <p>But this just doesn't seem like the Rails way, to put a bunch of Javascript code that just puts HTML into a string. And then what does the <code>render: json</code> do if I'm just putting the HTML in the AJAX? I did see an answer here on Stack Overflow that had</p>
  
  <pre><code>success: function(data) {
      $("#expenses-table").html(data);
  }
  </code></pre>
  
  <p>which would be nice, since data does have all the json I want. But obviously that doesn't just work like that.</p>
  
  <p>So if I could get some clarification on this whole mess, if I'm even approaching it right with JSON, or if I should just write the HTML in the AJAX, that would be much appreciated.</p>
  
  <p><strong>EDIT 1:</strong>
  Here's my current table code:</p>
  
  <pre><code>&lt;table id="expenses"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Description&lt;/th&gt;
          &lt;th&gt;Amount&lt;/th&gt;
          &lt;th&gt;User&lt;/th&gt;
          &lt;th&gt;Date&lt;/th&gt;
          &lt;th colspan="3"&gt;&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody&gt;
        &lt;% @expenses.each do |expense| %&gt;
          &lt;tr id="expenses-row"&gt;
            &lt;td&gt;&lt;%= expense.description %&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%= number_to_currency expense.amount %&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%= expense.user.name %&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%= expense.date.strftime("%m/%Y") %&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%= link_to 'Show', expense %&gt;&lt;/td&gt;
            &lt;% if expense.user == @user %&gt;
              &lt;td&gt;&lt;%= link_to 'Edit', edit_expense_path(expense) %&gt;&lt;/td&gt;
              &lt;td&gt;&lt;%= link_to 'Delete', expense, method: :delete, data: { confirm: 'Are you sure?' } %&gt;&lt;/td&gt;
            &lt;% else %&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
            &lt;% end %&gt;
          &lt;/tr&gt;
        &lt;% end %&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>Basically just the standard scaffold table. Most of the changes were just css. Here's what the json looks like for one record</p>
  
  <p><code>[{"id":8,"description":"This is a test","amount":"35.0","user_id":1,"date":"2014-10-01","created_at":"2014-10-03T07:07:53.412Z","updated_at":"2014-10-03T07:07:53.412Z","receipt_file_name":null,"receipt_content_type":null,"receipt_file_size":null,"receipt_updated_at":null}]</code></p>
  
  <p>I guess I'd rather do the code in ERB/ruby as I'm more immediately familiar with it. Though it almost feels a little pointless to have the json since @expenses is what I already use in my current table code. However, wouldn't render :file "expenses_table.html.erb" refresh the whole page? Or how would it know where to render just that table and replace what was previously there? It almost sounds easier to respond to <code>format.js</code> and make an <code>index.js.erb</code> because I know I could replace the html with my partial. But I haven't tried that as all the examples I've seen respond to <code>format.json</code>. If it sounds like I'm just confused and don't know what's going on it's because I am. I just need some clarification. Thanks for your help!</p>