Thêm hàng mới động với Javascript/JQuery/Rails 3

Question

Tôi đang tạo biểu mẫu timesheet bao gồm lịch cho phép người dùng chọn ngày cụ thể và tìm kiếm dự án. Tôi có chức năng này hoạt động. Những gì tôi về cơ bản có điều này là:

Một khi người dùng tìm kiếm dự án của họ và nhấn nút dấu cộng, mà theo quy định của dự án. Trong trường hợp này là Asda người dùng sau đó sẽ nhấp vào biểu tượng dấu cộng sẽ tạo một hàng mới và đặt nó vào bảng 'nhiệm vụ cho dự án. Làm thế nào bạn có thể làm điều này trong Javascript/JQuery.

Xin lỗi vì đã hỏi những gì có thể được xem như một câu hỏi cơ bản, nhưng tôi vẫn đang học Javascript/JQuery.

Tôi hiện có biểu tượng dấu cộng được liên kết với project_project_tasks_path(project.id). Đây chỉ là tạm thời.

Đây là những gì tôi có cho đến nay:

<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> 

được sửa đổi:

tôi đã tạo ra một task_list.js.erb đó là như sau:

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

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

Dự án Bộ điều khiển

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 

Từ những thay đổi được thực hiện, nó sẽ tạo ra:

JQuery UI code autocomplete:

$(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

Thêm vào DOM với jQuery là rất đơn giản với append hoặc phương pháp thêm vào trước.

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

Kiểm tra phương thức trống trong tài liệu jQuery.

Ngoài ra, bạn có một số đánh dấu không tốt. Task_list <ul> không có <li> và bảng trong đó có thêm </tr>.

Chỉnh sửa: Từ bài đăng được cập nhật của bạn, có vẻ như bạn không muốn chèn một hàng vào bảng mà còn lưu dữ liệu vào cơ sở dữ liệu của bạn cùng một lúc. Trong trường hợp đó, bạn sẽ muốn thực hiện cuộc gọi ajax đến một phương thức điều khiển sẽ lưu dữ liệu trong DB của bạn. Sau đó thêm hàng được cập nhật vào bảng nếu cuộc gọi thành công.

$.ajax({ 
    type: "POST", 
    url: "path to your route", 
    data: "the data to send to your controller", 
    success: function(data){ 
     // here is where you process the return value from your controller method 
     // the data variable will hold the return value if the call is successful 
     // you can make your controller return the html to be inserted in your table 
     // and insert it from here or just return a status message and build and add 
     // the html manually here. 
    } 
});