title: Rails 3 Load Edit view for a selected row from a DataTable
body: <p>I have been struggling with this for a while. As well as some specific help I would be grateful for some pointers how I may fill some of the gaps in my knowledge. BTW I am new to Rails and web development.
  I have used DataTables to display a table records and have some code which shows me the id of the row selected by the user. From within my index view I want to use that row id to load the edit view for that data row. My .js code is as follows:</p>
  
  <pre><code>$(document).ready(function() {
  
  /* Init the table */
  TableTools.DEFAULTS.aButtons = [];
  oTable = $("#highways").dataTable({
       sPaginationType: "full_numbers",
       bJQueryUI: true, 
       "bProcessing": true,
       "bServerSide": true,
       iDisplayLength: 25,
       sAjaxSource: $('#highways').data('source'),
       "aoColumns": [
          null,
          null,
          null,
          null,
          null
       ],
       "sDom": 'T&lt;"clear"&gt;lfrtip',
       "oTableTools": {
         "sRowSelect": "single",
         "fnRowSelected": function ( node ) {
           var oTT = TableTools.fnGetInstance('highways');
           var aData = oTT.fnGetSelectedData();
           var n = '/highways/' + aData[0][4] + '/edit'
           alert(n);
           var jqxhr = $.get(n, function() {
            alert("success");
            })
         }
       },
  
  });
  } );
  </code></pre>
  
  <p>The development log shows:</p>
  
  <blockquote>
    <p>Started GET "/highways/8/edit" for 127.0.0.1 at 2012-08-21 07:57:14 +1000
    Processing by HighwaysController#edit as <em>/</em>
     Parameters: {"id"=>"8"}
     [1m[35mHighway Load (0.3ms)[0m  SELECT <code>highways</code>.* FROM <code>highways</code> WHERE <code>highways</code>.<code>id</code> >= 8 LIMIT 1
    Highway BARKLY HIGHWAY
     Rendered highways/_form.html.erb (67.1ms)
     Rendered highways/edit.html.erb within layouts/highways (258.5ms)
    Completed 200 OK in 276ms (Views: 274.6ms | ActiveRecord: 0.3ms)</p>
  </blockquote>
  
  <p>I have tried various things in the controller code, and in some cases the log says the edit view has been renedered but it does not show in the browser. Current controller code:</p>
  
  <pre><code>class HighwaysController &lt; ApplicationController
    respond_to :html, :json
  
  def index
   #   @highways = Highway.all
   #   logger.debug "Highway Count: #{@highways.size}"
    respond_to do |format|
      format.html
      format.json { render json: HighwaysDatatable.new(view_context) }
    end
  </code></pre>
  
  <p>end</p>
  
  <p>def edit
      #    logger.debug "Edit (render :layout => false) Highway ID #{params[:id]}"
          @highway = Highway.find(params[:id])
          logger.debug "Highway #{@highway.name}"
      #    render
          respond_to do |format|
          format.html
          format.json { render json: HighwaysDatatable.edit(view_context) }
        end</p>
  
  <p>Is the $.get returning JSON ?</p>
  
  <p>I have also tried a different approach. I have a link_to in the index view:</p>
  
  <pre><code> &lt;div id ="highway_edit" &gt;
     &lt;% @n = 11.to_s %&gt;
     &lt;%= link_to "Edit 2", edit_highway_path(@n), :remote =&gt; true %&gt;
   &lt;/div&gt;  
  </code></pre>
  
  <p>This hard coded version works but I could not find a way to modify that link from within the  javascript code so that it reflected the selected row id, or to call a function which would return the row id into the variable @n.</p>
  
  <p>I realize that there must be some fundamentals I am missing so some suggested starting points for my education would be appreciated. I have read many other related questions but do not have enough knowledge to extract what I need.</p>
  
  <p>PS I see that DataTables has an Editor feature which does pretty much what I want to achieve  in the long run, but it is not 'Rails ready'.</p>
  
  <p>Thanks!</p>
  
  <p><strong>EDIT:</strong>
  In preparing this question I did not properly restore my code to the stage I wanted to discuss. So I have changed the controller code and the subsequent development log. So instead of a template error the problem is that the view is not rendered.</p>
  
  <p><strong>EDIT</strong>
  I have proceeded with this problem and now have a result. I added a new div (class of 'result') to the top of my index view and changed my js code as follows:</p>
  
  <pre><code>var n = '/highways/' + aData[0][4] + '/edit'
  $.get(n, function(data) {
      $('.result').html(data);
  </code></pre>
  
  <p>and the edit view is rendered in that div. The result is ugly as it pushes the table down and doubles up the DataTable headers and footer. But at least it renders. I don't understand why this works when both ways go via the Edit method in the controller. I can now work on the cosmetics, or better still have the edit view appear as a modal overlay. </p>