yajra/laravel-datatables-buttons

Create button does not work

volnistii11 opened this issue · 1 comments

volnistii11 commented

Hello, I have the following error when I click on the "New" / "Create" button. What could be the problem?Print, reset buttons work.Editing data in cells also works.

dataTables.editor.js:5050 Uncaught TypeError: Cannot read property 'oFeatures' of undefined at Editor._tidy (dataTables.editor.js:5050) at Editor.create (dataTables.editor.js:2152) at C.action (dataTables.editor.js:6611) at g (dataTables.buttons.min.js:14) at HTMLButtonElement.<anonymous> (dataTables.buttons.min.js:15) at HTMLButtonElement.dispatch (jquery-3.6.0.min.js:2) at HTMLButtonElement.v.handle (jquery-3.6.0.min.js:2)

Myfiles:
index.blade.php

`

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css">

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
            integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"
            integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/"
            crossorigin="anonymous"></script>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>

    {{--    For Buttons--}}
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.bootstrap5.min.css">
    <script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.bootstrap5.min.js"></script>
    <script src="/vendor/datatables/buttons.server-side.js"></script>


    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.3/css/select.bootstrap.min.css">
    <script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
    <script src="{{asset('plugins/editor/js/dataTables.editor.js')}}"></script>
    <script src="{{asset('plugins/editor/js/editor.bootstrap.min.js')}}"></script>
</head>
<body>
<section style="padding-top: 60px;">
    <div class="container">
                {!! $dataTable->table(['id' => 'formats']) !!}
    </div>
</section>
<script>
    $(function () {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            }
        });

        var editor = new $.fn.dataTable.Editor({
            ajax: "/service/formats",
            table: "#formats",
            display: "bootstrap",
            fields: [
                {label: "id:", name: "id"},
                {label: "name:", name: "name"},
            ]
        });

        $('#formats').on('click', 'tbody td:not(:first-child)', function (e) {
            editor.inline(this);
        });

        {{$dataTable->generateScripts()}}
    })
</script>`

DataTable file
` <?php

namespace App\DataTables;

use App\Models\Format;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Html\Editor\Editor;
use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Services\DataTable;

class FormatDataTable extends DataTable
{
    /**
     * Build DataTable class.
     *
     * @param mixed $query Results from query() method.
     * @return \Yajra\DataTables\DataTableAbstract
     */
    public function dataTable($query)
    {
        return datatables()
            ->eloquent($query)
            ->setRowId('id');
    }

    /**
     * Get query source of dataTable.
     *
     * @param \App\Models\Format $model
     * @return \Illuminate\Database\Eloquent\Builder
     */
    public function query(Format $model)
    {
        return $model->newQuery();
    }

    /**
     * Optional method if you want to use html builder.
     *
     * @return \Yajra\DataTables\Html\Builder
     */
    public function html()
    {
        return $this->builder()
                    ->setTableId('format-table')
                    ->columns($this->getColumns())
                    ->minifiedAjax()
                    ->dom('B<"top"i>rt<"bottom"flp><"clear">')
                    ->orderBy(0, 'asc')
                    ->buttons(
                        Button::make('create')->editor('editor'),
                        Button::make('export'),
                        Button::make('print'),
                        Button::make('reset'),
                        Button::make('reload')
                    )
                    ->editor(
                        Editor::make()
                            ->fields([
                                Fields\Text::make('id'),
                                Fields\Text::make('name')
                            ])
                    );
    }

    /**
     * Get columns.
     *
     * @return array
     */
    protected function getColumns()
    {
        return [
            Column::make('id'),
            Column::make('name'),
        ];
    }

    /**
     * Get filename for export.
     *
     * @return string
     */
    protected function filename()
    {
        return 'Format_' . date('YmdHis');
    }
}

`

hubatruck commented

Hi,
After a long debugging session I think I've found your issue.
There were some mismatches with the table's ID, and that might've been the cause.
You can find the corrected files here: https://gist.github.com/hubatruck/fbabe1a0b4500d537079c372a4f75181
(don't want to clog this response, so I'm posting the files through Gist).

Thinks I changed in your code:

  • Reordered scripts, so they are at the bottom of the <body> tag
  • I don't know if it was intentional, but moved the $dataTable->generateScripts() outside of the custom script
  • In order to get the edit modal to show, had to change Bootstrap's JavaScript version to 4. (The specified error doesn't come up with Bootstrap 5, but the modal didn't show either)

Please make sure, you have followed the instructions listed here, and changed the create button's name to something else.