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

Can you show how your including helper.js in your app.js file? I.e. are you requiring helper.js file in your app.js file or are you compiling it in your wekpack.mix.js file? Either can you show the code for this. — Rwd
– Rwd, Commented Jul 14, 2017 at 10:00

Rwd · Accepted Answer · 2017-07-14 10:31:05Z

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!

In what file do I stored helper.js and where do I do the binding?
your method seem to work but now I'm getting $.notify is not a function I do have jquery included in my master layout.
@NathanSiafa Have you used npm to add Notify.js to your app or are you using a cdn... (or something else)?
Notify.js is a javascript library for displaying notifications. I have it reference in my view like this <script src="{{ asset ("/bower_components/AdminLTE/plugins/bootstrap-notify/bootstrap-notify.js") }}"></script>

Zohaib Aslam · Accepted Answer · 2017-07-14 09:55:17Z

0

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.

answered Jul 14, 2017 at 9:55

Zohaib Aslam

508 bronze badges

Collectives™ on Stack Overflow

How to add custom JavaScript in laravel application

2 Answers 2

8 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Related