title: Add new row dynamically with Javascript/JQuery/Rails 3
body: <p>I am building a timesheet form that consists of a calendar which enables a user to select a specified date, and search for a project. I have this functionality working. What I basically have is this:</p>
  
  <p><img src="https://i.stack.imgur.com/9WTTc.png" alt="enter image description here"></p>
  
  <p>Once the user searches for their project and press the plus button, that specified project. Which in this instance is Asda the user would then click the plus icon which would create a new row and put it into the table 'task for project. How can you do this in Javascript/JQuery.</p>
  
  <p>Sorry for asking what may be seen as such a basic question, but am still learning Javascript/JQuery.  </p>
  
  <p>I currently have the plus icon linked to <code>project_project_tasks_path( project.id )</code>. This is just temporary. </p>
  
  <p>This is what I have so far: </p>
  
  <pre><code>    &lt;div class="left"&gt;
  &lt;table border="2" width="" id='projects' class='datatable'&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Number  &amp;nbsp&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;% @projects.each do |project| %&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;%= project.project_number %&gt;&lt;/td&gt;
              &lt;td&gt;&lt;%= project.project_name %&gt;&lt;/td&gt;
              &lt;td&gt;&lt;%= link_to image_tag("icons/add.png"), project_project_tasks_path( project.id ), :remote =&gt; true %&gt;&lt;/td&gt;
                  &lt;!-- link_to image_tag("icons/add.png"), tasklist_path(project.id), :as =&gt; "tasklist" --&gt;
                          &lt;/tr&gt;
      &lt;%- end -%&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div class="right"&gt;
  &lt;b&gt;Recently Viewed&lt;/b&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;Project No.&lt;/th&gt;
      &lt;th&gt;Project names&lt;/th&gt;
      &lt;th&gt;Project Leader&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;123&lt;/td&gt;
      &lt;td&gt;Test&lt;/td&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;&lt;%= link_to image_tag("icons/add.png") %&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/fieldset&gt;
  
  &lt;fieldset&gt;
      &lt;b&gt;&lt;center&gt;Hours for Week commencing: &lt;span id="startDate"&gt;&lt;%= Date.today.beginning_of_week.strftime('%d/%m/%Y') %&gt;&lt;/span&gt;&lt;/center&gt;&lt;/b&gt;
  &lt;/fieldset&gt;
  
  &lt;!-- Task list table --&gt;
  &lt;div style="float: right; width: 300px; padding-left: 20px;"&gt;
    &lt;fieldset&gt;
      &lt;b&gt;Tasks for project&lt;/b&gt;
      &lt;ul id="task_list"&gt;
  
      &lt;/ul&gt;
    &lt;/fieldset&gt;
  &lt;/div&gt;
  
  &lt;!-- Hours list table --&gt;
  &lt;fieldset&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;Leave&lt;/td&gt;
              &lt;td&gt;&lt;input class="dayinput" type="text" name="Leave"&gt;&lt;/td&gt;
          &lt;/t&gt;
          &lt;tr&gt;
              &lt;td&gt;TOIL&lt;/td&gt;
              &lt;td&gt;&lt;input class="dayinput" type="text" name="TOIL"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Sick&lt;/td&gt;
              &lt;td&gt;&lt;input class="dayinput" type="text" name="Sick"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Total&lt;/td&gt;
              &lt;td&gt;&lt;input id="total" class="total_low" type="text" value="0" disabled=""&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>Edited: </p>
  
  <p>I have created a <strong>task_list.js.erb</strong> which is as followed: </p>
  
  <pre><code>$('#task_list').html('');
  
  &lt;% @project.project_tasks.each do |task| %&gt;
    $('#task_list').append('&lt;ul&gt;&lt;%= task.task_name %&gt;');
  &lt;% end %&gt;
  </code></pre>
  
  <p><strong>Project Controller</strong> </p>
  
  <pre><code> def index
      # check if we've got a project id parameter
      if( params[:project_id].nil? )
        @project = nil
      else
        @project = Project.find(params[:project_id])
      end
  
      if @project.nil?
        @project_tasks = ProjectTask.all
      else
        @project_tasks = Project.find(params[:project_id]).project_tasks
      end
      respond_to do |format|
        format.html # index.html.erb
        format.xml  { render :xml =&gt; @project_tasks }
        format.js   # index.js.erb
      end
    end
  </code></pre>
  
  <p>From the changes made, it outputs: </p>
  
  <p><img src="https://i.stack.imgur.com/sslLK.png" alt="Inital Outlook if possible"></p>
  
  <p>JQuery Ui autocomplete code: </p>
  
  <pre><code>$(function() {
      function log(message) {
          $( "&lt;div/&gt;" ).text( message ).prependTo("#log");
      }
      $("#tags").autocomplete({
          source : function(request, response) {
              $.ajax({
                  url : "/projectlist",
                  dataType : "json",
                  data : {
                      style : "full",
                      maxRows : 12,
                      term : request.term
                  },
                  success : function(data) {
                      var results = [];
                      $.each(data, function(i, item) {
                          var itemToAdd = {
                              value : item,
                              label : item
                          };
                          results.push(itemToAdd);
                      });
                      return response(results);
                  }
              });
          }
      });
  }); 
  </code></pre>