Buttons not showing when using Laravel with webpack (Laravel Mix)

Buttons not showing when using Laravel with webpack (Laravel Mix)

dodobratdodobrat Posts: 4Questions: 1Answers: 0

I am using Laravel 5.8 with Laravel Mix and Webpack and I can't display any buttons when I include the extension in app.js.
All other extensions work, displaying properly and functioning, except for the buttons.

@section('js')
   //--------------------------------------------------------------------------------------
   // When file is included separately from app.js it works
   //-------------------------------------------------------------------------------------
   // <script src="{{ asset('/js/dataTables.buttons.min.js') }}"></script>
   //--------------------------------------------------------------------------------------
    <script>
        $(document).ready(function () {
            let table = $('#example').DataTable({
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                rowReorder: {
                    selector: 'button.btn-move'
                },
                responsive: true,
                order: [[4, 'asc']],
                rowGroup: {
                    dataSrc: 4
                },
                columnDefs: [{
                    className: 'control',
                    orderable: false,
                    targets: 0
                },
                    {
                        className: 'select-checkbox',
                        orderable: false,
                        targets: 1
                    },
                    {
                        orderable: false,
                        targets: -1
                    }],
                select: {
                    style: 'multi',
                    selector: 'td:nth-child(2)'
                },
                dom: "<'row'<'col-sm-12 col-md-5'l><'col-sm-12 col-md-7'<'row'<'col-10'f><'col-2'B>>>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                buttons: [
                    {
                        text: 'My button',
                        action: function (e, dt, node, config) {
                            alert('Button activated');
                        }
                    }
                ]

            });

            $('.table-box table').parent().addClass('table-container-responsive');
        });
    </script>
@append

also my includes in app.js :

require('datatables.net-bs4')();
require('datatables.net-buttons')();
require('datatables.net-buttons/js/buttons.print.js')();
require('datatables.net-rowgroup-bs4')();
require('datatables.net-select-bs4')();
require('datatables.net-rowreorder-bs4')();
require('datatables.net-responsive-bs4')();

webpack.mix:

const mix = require('laravel-mix');

mix.webpackConfig({
    module: {
        rules: [
            {
                parser: {
                    amd: false
                }
            }
        ]
    }
});

mix.js('resources/assets/js/app.js', 'public/js/app.js')
    .sass('resources/assets/sass/app.scss', 'public/css/app.css')
    //Datatable Buttons
    .copy('node_modules/datatables.net-buttons/js/dataTables.buttons.min.js', 'public/js/dataTables.buttons.min.js', true)
    //-----------------
    .copy('resources/assets/fonts', 'public/fonts', true)
    .copy('resources/assets/summernote-fonts', 'public/css/font', true)
    .copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts', true)
    .copy('resources/assets/img', 'public/img', true)
    .version()
    .options({
        processCssUrls: false
    });

Any suggestions are welcomed.

Thanks in advance :smile:

Answers

  • allanallan Posts: 61,438Questions: 1Answers: 10,049 Site admin

    Interesting. Your configuration looks okay, so I don't immediately see what is going wrong there I'm afraid. Can you give me a link to your page please?

    Thanks,
    Allan

  • dodobratdodobrat Posts: 4Questions: 1Answers: 0
    edited August 2019

    Hi Allan,
    Here is a link to my git repo : https://github.com/Dodobrat/charlottev2-front

    Current version is with included file in the blade, copied from node_modules with webpack.

    The datatable is in resources/views/boxes/datatable.blade.php

  • allanallan Posts: 61,438Questions: 1Answers: 10,049 Site admin

    You'll need to forgive me please, but how to I get that to run so I can see the resulting output?

    Thanks,
    Allan

  • dodobratdodobrat Posts: 4Questions: 1Answers: 0
    edited August 2019

    Hi Allan,

    Firstly you would need PHP 7.2 or later, Composer, Node JS and Git.
    Create a folder, right click and after installing Git, you will have an option "Git Bash Here" and git clone the repo.

    Open the folder in your IDE (which should include a terminal) and run:
    composer install, npm install and finally npm run dev.

    Then you need a virtual host, which I can recommend Laragon, because it is the easiest to setup, if you are on windows, and that should be all for the setup.

    Then you open the cloned_name_of_folder.loc in the browser.

    All files that you would probably need for debugging are:
    app.js ( resources/assets/js/app.js )
    app.scss ( resources/assets/sass/app.scss )
    datatable.blade.php ( resources/views/boxes/datatable.blade.php ) - the html and js for init
    webpack.mix.js ( webpack.mix.js )

    Hope that helps.

    Thanks,
    Deyan

  • allanallan Posts: 61,438Questions: 1Answers: 10,049 Site admin

    Then you need a virtual host

    Sorry - you'll need to explain that one to me. I've got a VM with PHP set up on it and the install commands above all run. But I've no idea how to then actually load your page! I've tried all sorts of tricks but it doesn't seem happy on my nginx server (which is used to host my dev copies of the DataTables examples).

    Allan

  • dodobratdodobrat Posts: 4Questions: 1Answers: 0
    edited August 2019

    I am using apache and am not really familiar with nginx, but you should still be able to open the page if you go to /public at the end of the URL.

  • allanallan Posts: 61,438Questions: 1Answers: 10,049 Site admin

    Are you able to run this on a server somewhere? I've made some progress but I'm getting permission errors for creating a cache file for the view and I cannot for the life of me see why that is. The apache user (I'm using Apache now and its running under that name) has full write access to the required directories:

    [14-Aug-2019 09:17:31 UTC] PHP Fatal error:  Uncaught ErrorException: file_put_contents(/var/www/html/charlottev2-front/storage/framework/views/02c050d4144cc73771c56feb6a652a763cdbf74c.php): failed to open stream: Permission denied
    

    Anyway, if you are able to host a running copy it will save us both a lot of time I think :).

    Allan

This discussion has been closed.