我正在嘗試在我的應用程式上使用 lightpick datepicker。不幸的是,當我不遵循標準時,這有效,而當我這樣做時,這不起作用。
刀刃 :
@section('page_script')
<script src="{{ url('js/themeFiles/moment/moment.min.js') }}"></script>
<script src="{{ url('js/themeFiles/lightpick/lightpick.js') }}"></script>
<script src="{{ url('js/custom/datePicker.js') }}"></script>
<script src="{{ url('js/custom/planningStats.js') }}"></script>
@endsection
@section('content')
@include('planning.partials.planningStatsForm')
@endsection
日期選擇器.js:
var picker = new Lightpick({
field: document.getElementById('ddebut_picker'),
secondField: document.getElementById('dfin_picker'),
repick: true,
lang: 'fr',
singleDate: false,
selectForward: true
});
錯誤(如果我使用上面的代碼):

如果我在里面使用腳本標簽@section('content')并且不使用單獨的@section('page_script')部分,那么一切都會完美運行。但是對于當前的代碼,它不起作用。我沒有更改 js、控制器、刀片或模型中的任何內容。
uj5u.com熱心網友回復:
我的 JS 無法找到元素,因為我的順序不正確(即使當我檢查頁面源時它是正確的。雖然令人困惑。)。我使用defer屬性來解決我的問題。
[defer, 一個布爾屬性] 設定為向瀏覽器指示腳本將在檔案被決議之后但在觸發 DOMContentLoaded 之前執行。
根據這個答案,順序很重要。還有其他方法可以解決這個問題,但我發現defer對外部腳本最有用。
@section('page_script')
<script src="{{ url('js/themeFiles/moment/moment.js') }}" defer></script>
<script src="{{ url('js/themeFiles/moment/moment.min.js') }}" defer></script>
<script src="{{ url('js/themeFiles/lightpick/lightpick.js') }}" defer></script>
<script src="{{ url('js/custom/datePicker.js') }}" defer></script>
<script src="{{ url('js/custom/planningStats.js') }}" defer></script>
@endsection
uj5u.com熱心網友回復:
它加深了布局中包含的 page_scripts 的位置。我在腦海里想。在您的代碼中搜索@stack('page_script')。
您可以在您的布局中添加關閉正文上方的部分。@stack('custom_scripts'). 如果您“遵循標準”,那將是可行的。僅將名稱從 page_script 更改為@section('custom_script').
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/419154.html
標籤:
