Agregar nueva fila dinámicamente con Javascript/JQuery/Rails 3

Question

Estoy creando un formulario de planilla de horas que consta de un calendario que permite al usuario seleccionar una fecha específica y buscar un proyecto. Tengo esta funcionalidad funcionando. Lo que básicamente tengo es la siguiente:

Una vez que el usuario busca su proyecto y pulse el botón de más, que especifica proyecto. En este caso, Asda, el usuario haría clic en el icono más que crearía una nueva fila y la colocaría en la tabla 'tarea para el proyecto'. ¿Cómo puedes hacer esto en Javascript/JQuery?

Lo siento por preguntar lo que se puede ver como una pregunta tan básica, pero todavía estoy aprendiendo Javascript/JQuery.

Actualmente tengo el icono más vinculado a project_project_tasks_path(project.id). Esto es solo temporal.

Esto es lo que tengo hasta ahora:

<div class="left"> 
<table border="2" width="" id='projects' class='datatable'> 
    <thead> 
     <tr> 
      <th>Number &nbsp</th> 
      <th>Name</th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
    <% @projects.each do |project| %> 
     <tr> 
      <td><%= project.project_number %></td> 
      <td><%= project.project_name %></td> 
      <td><%= link_to image_tag("icons/add.png"), project_project_tasks_path(project.id), :remote => true %></td> 
       <!-- link_to image_tag("icons/add.png"), tasklist_path(project.id), :as => "tasklist" --> 
         </tr> 
    <%- end -%> 
    </tbody> 
</table> 
</div> 

<div class="right"> 
<b>Recently Viewed</b> 
<table> 
    <tr> 
    <th>Project No.</th> 
    <th>Project names</th> 
    <th>Project Leader</th> 
    <th></th> 
    </tr> 
    <tr> 
    <td>123</td> 
    <td>Test</td> 
    <td>1</td> 
    <td><%= link_to image_tag("icons/add.png") %></td> 
    </tr> 
</table> 
</div> 
</fieldset> 

<fieldset> 
    <b><center>Hours for Week commencing: <span id="startDate"><%= Date.today.beginning_of_week.strftime('%d/%m/%Y') %></span></center></b> 
</fieldset> 

<!-- Task list table --> 
<div style="float: right; width: 300px; padding-left: 20px;"> 
    <fieldset> 
    <b>Tasks for project</b> 
    <ul id="task_list"> 

    </ul> 
    </fieldset> 
</div> 

<!-- Hours list table --> 
<fieldset> 
    <table> 
     <tr> 
      <td>Leave</td> 
      <td><input class="dayinput" type="text" name="Leave"></td> 
     </t> 
     <tr> 
      <td>TOIL</td> 
      <td><input class="dayinput" type="text" name="TOIL"></td> 
     </tr> 
     <tr> 
      <td>Sick</td> 
      <td><input class="dayinput" type="text" name="Sick"></td> 
     </tr> 
     <tr> 
      <td>Total</td> 
      <td><input id="total" class="total_low" type="text" value="0" disabled=""> 
     </tr> 
    </table> 
</fieldset> 

Editado:

He creado una task_list.js.erb que es como sigue:

$('#task_list').html(''); 

<% @project.project_tasks.each do |task| %> 
    $('#task_list').append('<ul><%= task.task_name %>'); 
<% end %> 

Proyecto Controlador

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 => @project_tasks } 
     format.js # index.js.erb 
    end 
    end 

A partir de los cambios realizados, se da salida:

jQuery Ui código de autocompletar:

$(function() { 
    function log(message) { 
     $("<div/>").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); 
       } 
      }); 
     } 
    }); 
}); 

Answer 1

Agregando a la DOM con jQuery es muy simple con el método de agregación o anteponer.

$('element_to_add_to').append('the html to append'); 
$('element_to_add_to').prepend('the html to append'); 

Consulte también el método vacío en los documentos de jQuery.

Además, tiene un marcado incorrecto. La task_list <ul> no tiene <li> y la tabla tiene un </tr> extra.

Editar: Desde su publicación actualizada, parece que desea no solo insertar una fila en una tabla, sino también guardar los datos en su base de datos al mismo tiempo. En ese caso, deseará hacer una llamada ajax a un método de controlador que guardará los datos en su base de datos. A continuación, agregue la fila actualizada a la tabla si la llamada fue exitosa.