Cakephp 3.6.14: Перезагрузить содержимое BootstrapTable после отправки в ajax-форме с новым содержимым

Question

У меня есть форма в модале, которая добавляет новые строки в BootstrapTable.Я хочу, чтобы таблица была перезагружена после успешной отправки формы без перезагрузки всей страницы.

Я пытался это сделать:

$('#table').bootstrapTable('refresh');

Но не работает.Как я могу добиться того, что хочу?

Это BootstrapTable:

<table class="table-striped" id="table" data-toggle="table"
                         data-search="true"
                         data-filter-control="true"
                         data-click-to-select="true"
                         data-escape="false"
                         >
                    <thead>
                        <tr>
                            <th data-field="name" data-filter-control="input" data-sortable="true" data-sorter="linksSorter" scope="col"><?= __('Title') ?></th>

                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($tasks as $task):
                            <tr>
                                 <td><?= $task->has('name') ? $this->Html->link($task->name, ['controller' => 'Tasks', 'action' => 'edit', $task->id], ['data-target' => '#exampleFormModal', 'data-toggle'=>'modal']) : '' ?></td>
                            </tr>

                        <?php endif;
                         endforeach; ?>
                    </tbody>
                </table>

Это код jquery для отправки формы:

$(function () {
    $("#DAbtn").click(function () { //Direct Assign button

        //e.preventDefault(); // avoid to execute the actual submit of the form.
        var input = $("<input>")
               .attr("type", "hidden")
               .attr("name", "btn").val("Direct Assign");
        $('#newTaskForm').append(input);
        var task = $("#newTaskForm").serialize();


        $.ajax({
            type: 'POST',
            url: '/app/tasks/createTask',
            datatype: 'json',
            data: task,
            success: function( data )
            {
                $('.modal').modal('hide');
                $(".success").fadeIn(500).delay(2000).fadeOut(500);
                $("#newTaskForm")[0].reset();
                clearForm("newTaskForm");

                $('#table').bootstrapTable('refresh');
            }
        });

        return false;

    });
});

А вот код контроллера (функция createTask):

public function createTask($userid = null, $projectid = null, $copiedtaskid = null)
    {
        $this->viewBuilder()->layout(false);
        $this->autoRender = false;
        $http = new Client();


        $task = $this->Tasks->newEntity();
        if ($this->request->is('ajax')) {  
             //....code to create the task......
        }
        $this->response->statusCode(200);
        return $this->response;
}

Answer 1

Вот как я выполняю свои представления в форме ajax:

1.Поместите свой код BootstrapTable в элемент.

2.В вашем классическом представлении вам нужно вызвать новый созданный элемент, чтобы отобразить BootstrapTable (с соответствующим $ argumentsArray).Приложите с тегом для последующего использования AJAX:

echo '<div id="container">'.$this->Element('element_name', $argumentsArray).'</div>';

3.Убедитесь, что ваша функция контроллера createTask возвращает то, что нужно для вашего элемента.Например, вам понадобится

$this->set('tasks', $tasks);

Он также понадобится для визуализации вашего элемента:

$this->render('element_name', 'ajax');

4.Замените в вашем случае успеха Ajax:

$('#table').bootstrapTable('refresh');

на

$('#container').html(data);