How to add custom JavaScript in laravel application

Question

Hi guys in my laravel project I have some javascript helpers function that utilizes jquery I want to extract to a separate place that all parts of the application can use. These are the function stored in helper.js :

// bootbox function to delete records
// it utitlizes the bootbox library


window.bootbox_delete = function (message, route, row) {
    // body...
    bootbox.dialog({
        message: message,
        title: "<i class='glyphicon glyphicon-trash'></i> Delete !",
        buttons: {
            success: {
                label: "No",
                className: "btn-success",
                callback: function callback() {
                    $('.bootbox').modal('hide');
                }
            },
            danger: {
                label: "Delete!",
                className: "btn-danger",
                callback: function callback() {

                    $.ajax({
                        type: 'DELETE',
                        url: route
                    }).done(function (data) {
                        bootbox.alert('<b>' + data.name + '</b> successfully deleted');
                        //removing the row that have been deleted
                        jQuery(row).fadeOut('slow');
                    }).fail(function () {
                        bootbox.alert('Something Went Wrong .... Please contact administrator');
                    });
                }
            }
        }
    });
}


// function that displays notification
window.notify = function(message) {
    // body...
    $.notify({
        icon: 'fa fa-check',
        message: message
    }, {
        type: 'success',
        timer: 4000,
        offset: 20,
        spacing: 10,
        z_index: 1031,
        delay: 5000,
        placement: {
            from: "top",
            align: "right"
        },

        animate: {
            enter: 'animated fadeInDown',
            exit: 'animated fadeOutUp'
        }
    });
}

What I have done is that I added helper.js to resources/assets/js and compile to public/js/app.js with npm run dev but whenever I tried to see if things are working I get these errors:

notify is not defined

bootbox_delete is not defined

Answer 1

To get these function to work globally you will just need bind them to the window object :

function notify(message) {

becomes

window.notify = function (message) {

and

function bootbox_delete(message, route, row) {

becomes

window.bootbox_delete = function (message, route, row) {

---

To install notify.js you'll need to run

npm install notifyjs-browser --save

(or if you're using yarn)

yarn add notifyjs-browser 

Then you should just need to require the package at the top of your helper.js file using

require('notifyjs-browser')

---

Helper.js

This is what your helper.js should look like now:

require('notifyjs-browser')

// bootbox function to delete records
// it utitlizes the bootbox library
window.bootbox_delete = function (message, route, row) {
    // body...
    bootbox.dialog({
        message: message,
        title: "<i class='glyphicon glyphicon-trash'></i> Delete !",
        buttons: {
            success: {
                label: "No",
                className: "btn-success",
                callback: function callback() {
                    $('.bootbox').modal('hide');
                }
            },
            danger: {
                label: "Delete!",
                className: "btn-danger",
                callback: function callback() {

                    $.ajax({
                        type: 'DELETE',
                        url: route
                    }).done(function (data) {
                        bootbox.alert('<b>' + data.name + '</b> successfully deleted');
                        //removing the row that have been deleted
                        jQuery(row).fadeOut('slow');
                    }).fail(function () {
                        bootbox.alert('Something Went Wrong .... Please contact administrator');
                    });
                }
            }
        }
    });
}


// function that displays notification
window.notify = function (message) {
    // body...
    $.notify({
        icon: 'fa fa-check',
        message: message
    }, {
        type: 'success',
        timer: 4000,
        offset: 20,
        spacing: 10,
        z_index: 1031,
        delay: 5000,
        placement: {
            from: "top",
            align: "right"
        },

        animate: {
            enter: 'animated fadeInDown',
            exit: 'animated fadeOutUp'
        }
    });
}

Hope this helps!

Answer 2

If it is saying that function is not defined then chances are that you are not including right JS file. Can you please share code where you are including your JS file and check also in the console in dev tool if you see a 404 error, maybe you are including file but from the wrong directory.