Добавить новую строку динамически с помощью Javascript / JQuery / Rails 3

Question

Я создаю форму расписания, которая состоит из календаря, который позволяет пользователю выбрать указанную дату и выполнить поиск проекта.У меня эта функциональность работает.То, что я в основном имею, это:

Как только пользователь ищет свой проект и нажимает кнопку «плюс», указанный проект.В данном случае это Asda, после чего пользователь щелкает значок плюса, который создает новую строку и помещает ее в задачу таблицы для проекта.Как вы можете сделать это в Javascript / JQuery.

Извините за вопрос, что может показаться таким базовым вопросом, но я все еще изучаю Javascript / JQuery.

У меня есть значок плюса, связанный с project_project_tasks_path( project.id ).Это просто временно.

Это то, что у меня пока есть:

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

Отредактировано:

Я создал task_list.js.erb , который выглядит следующим образом:

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

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

Контроллер проекта

 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

Из внесенных изменений выводится:

Код автозаполнения JQuery Ui:

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

Добавление в DOM с помощью jQuery очень просто с помощью метода добавления или добавления.

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

Проверьте также пустой метод в документах jQuery.

Кроме того, у вас естькакая-то плохая разметка.Список задач <ul> не имеет <li>, а таблица содержит дополнительные </tr>.

Редактировать: из вашего обновленного поста кажется, что вы хотите не только вставить строку втаблицы, но и сохранить данные в базу данных одновременно.В этом случае вы захотите сделать ajax-вызов метода контроллера, который сохранит данные в вашей БД.Затем добавьте обновленную строку в таблицу, если вызов успешен.

$.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.
    }
});