如何在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文件的代碼，並在開發工具的控制檯中查看，也許你是包含文件，但是來自錯誤的目錄。