daterangepicker.js not loading after wire:navigate

Question

I'm using this datarangepicker in my web application: Data Range picker

When i add wire:navigate to the nav link I got an error in console and obviesly datapicker is not loading:

Uncaught TypeError: $(...).daterangepicker is not a function
at <anonymous>:2:49
at swapCurrentPageWithNewHtml (livewire.js?id=951e6947:7730:19)
at livewire.js?id=951e6947:7910:11
at preventAlpineFromPickingUpDomChanges (livewire.js?id=951e6947:7987:5)
at livewire.js?id=951e6947:7900:9
at prefetches.<computed>.whenFinished (livewire.js?id=951e6947:7462:9)
at storeThePrefetchedHtmlForWhenALinkIsClicked (livewire.js?id=951e6947:7446:11)
at livewire.js?id=951e6947:7878:11
at livewire.js?id=951e6947:7438:7
at livewire.js?id=951e6947:7425:7

My Code:

 <script>
    $('input[name="dtmDispatchDateRange"]').daterangepicker({
        locale:{
            format: 'MM/DD/YYYY'
        }
    });
    var date1 = document.getElementById("date1")
    var date2 = document.getElementById("date2")
    var contentToChange = document.getElementById("dates")
    contentToChange.value = date1.textContent + " - " + date2.textContent
</script>

Without wire:navigate Click

With wire:navigate Click

Layout head section:

  <script type="text/javascript" src="{{ asset('assets-bs5/datapicker/moment.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets-bs5/datapicker/daterangepicker.min.js') }}"></script>
<link rel="stylesheet" type="text/css" href="{{ asset('assets-bs5/datapicker/daterangepicker.css') }}" />

Please help

EDIT 03.01.2025: Relevant form:

    @extends('layouts.app')
    @section('content')

    @php $title = 'Manifest' @endphp
    @include('layouts.components.page_title_content_section')
    @include('layouts.components.page_error_section')

    <div style="display: none">
        <div id="date1">{{ isset($dtmDispatchDate1) ? (\Carbon\Carbon::parse($dtmDispatchDate1)->format('m/d/Y')) : '' }}</div>
        <div id="date2">{{ isset($dtmDispatchDate2) ? (\Carbon\Carbon::parse($dtmDispatchDate2)->format('m/d/Y')) : '' }}</div>
    </div>

    <section data-bs-version="5.3">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="">
                    <blockquote style="border-color: #39b451; background-color: #EBECEE; height: 170px;">
                        <div id="externalGrids" class="">
                            <label for="intOrderId">Order No:</label><br>
                            <span id="intOrderId"></span>
                        </div>
                        <div id="externalGrids" class="">
                            <label for="strLoadId">Load Id:</label><br>
                            <span id="strLoadId"></span>
                        </div>
                        <div id="externalGrids" class="">
                            <label for="strDeliveryMethod">Delivery Method:</label><br>
                            <span  style="width: 50px" id="strDeliveryMethod"></span>
                        </div>
                        <div id="externalGrids" class="">
                            <label for="strDispatchDate">Dispatch Date:</label><br>
                            <span  style="width: 50px" id="strDispatchDate"></span>
                        </div>
                        <form method="get" action="">
                            <div id="externalGrids" class="" >
                                <label for="">Dispatch Date</label><br>
                                <input style="width: 200px"  id="dates" name="dtmDispatchDateRange" type="text" autocomplete="off" >
                            </div>
                            <div id="externalGrids" class="">
                                <label for="">Show</label><br>
                                <button style="background-color: #36b551; color: whitesmoke; width: 90px;">OK</button>
                            </div>
                        </form>
                    </blockquote>
                </div>
            </div>
        </div>
    </section>
    <section >
        <div class="container-fluid" style="">
            <table class="table table-bordered" >
                <thead>
                    <tr id="table_header">
                        <th class="text-nowrap">Order No</th>
                        <th class="text-nowrap">Load ID</th>
                        <th class="text-nowrap">Delivery Method</th>
                        <th class="text-nowrap">Dispatch Date</th>
                        <th class="text-center">Order Qty</th>
                        <th class="text-center">Status</th>
                        <th class="text-center">Status</th>
                    </tr>
                </thead>
                <tbody>
                @foreach($orders as $item)
                    <tr id="">
                        <td>..........</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </section>

    <script>
        $('input[name="dtmDispatchDateRange"]').daterangepicker({
            locale:{
                format: 'MM/DD/YYYY'
            }
        });
        var date1 = document.getElementById("date1")
        var date2 = document.getElementById("date2")
        var contentToChange = document.getElementById("dates")
        contentToChange.value = date1.textContent + " - " + date2.textContent
    </script>
@stop

Answer 1

You should also post the relevant parts of the view.

I will however try to give a solution based on the informations provided.

wire:navigate causes the update of the body of the document without reloading the page, so any references set by external libraries are lost.

Adding an event listener on the wire:navigate event to re-initialize the daterangepicker should resolve the problem:

document.addEventListener('livewire:navigated', () => {

    $('input[name="dtmDispatchDateRange"]').daterangepicker({
        locale:{
            format: 'MM/DD/YYYY'
        }
    });

    .....
});

If this doesn't work, please show the view code to help us better understand your situation

Edit

I see that you have added the code of the view in your question: it seems a plain blade view, not a livewire component, if so, using wire:navigate may not load correctly the external js libraries.

If you use a different app.blade.php for the livewire views, you can add the js libraries in its <head> section