如何在laravel应用程序中添加自定义的JavaScript

Question

嗨，我在laravel项目中的人我有一些javascript助手功能，利用jquery我想提取到一个单独的地方，应用程序的所有部分都可以使用。这些都是存储在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' 
     } 
    }); 
} 

我所做的是我添加helper.js到resources/assets/js并编译成public/js/app.js与npm run dev但每当我想看看，如果一切正常，我得到这些错误：

通知没有被定义

bootbox_delete没有定义

Answer 1

要得到这些功能在全球范围内工作，您只需将它们绑定到window对象：

function notify(message) { 

成为

window.notify = function (message) { 

和

function bootbox_delete(message, route, row) { 

成为

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

---

要安装notify.js你需要运行

npm install notifyjs-browser --save 

（或者，如果你使用yarn）

yarn add notifyjs-browser 

那么你应该只需要要求包在helper.js文件使用顶部

require('notifyjs-browser') 

---

个

Helper.js

这是你的helper.js应该现在是什么样子：

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' 
     } 
    }); 
} 

希望这有助于！

Answer 2

如果是说该函数没有定义，那么很可能是你没有包含正确的JS文件。如果你看到一个404错误，你可以请你共享包含你的JS文件的代码，并在开发工具的控制台中查看，也许你是包含文件，但是来自错误的目录。