Laravel livewire with turbolinks sidebar toggle is not working when visit to second page

Viewed 2520

Creating an application using livewire and turbolinks but now I am facing issue with the sidebar toggler in my app. Its showing "can not read the property toggle of undefind"

Very first the dropdowns were not working I have researched and fix the dropdowns but now new error.

This script was I found on my application js file. sidebar was not working when I visit to second page as It is in SPA app so I thought may be this is not able to read the js properly so added a the click function in main page but still showing same error.

enter image description here

<script>
        document.addEventListener("turbolinks:load", function() {
            $('.dropdown-toggle').dropdown();
            $('.navbar-toggler').click(function(){
                "use strict";
                var t = document.querySelectorAll('[data-toggle="sidebar"]');
                (t = Array.prototype.slice.call(t)).forEach((function (t) {
                    t.addEventListener("click", (function (t) {
                        var e = t.currentTarget.getAttribute("data-target") || "#default-drawer",
                            o = document.querySelector(e);
                        o && o.mdkDrawer.toggle()
                    }))
                }));
                var e = document.querySelectorAll(".mdk-drawer");
                (e = Array.prototype.slice.call(e)).forEach((function (t) {
                    t.addEventListener("mdk-drawer-change", (function (t) {
                        if (t.target.mdkDrawer) {
                            document.querySelector("body").classList[t.target.mdkDrawer.opened ? "add" : "remove"]("has-drawer-opened");
                            var e = document.querySelector('[data-target="#' + t.target.id + '"]');
                            e && e.classList[t.target.mdkDrawer.opened ? "add" : "remove"]("active")
                        }
                    }))
                })), $(".sidebar .collapse").on("show.bs.collapse", (function (t) {
                    t.stopPropagation(), $(this).parent().closest("ul").find(".open").find(".collapse").not(this).collapse("hide"), $(this).closest("li").addClass("open")
                })), $(".sidebar .collapse").on("hidden.bs.collapse", (function (t) {
                    t.stopPropagation(), $(this).closest("li").removeClass("open")
                }))

            });
        })
</script>

sidebar toggle button------------

<button class="navbar-toggler w-auto mr-16pt d-block rounded-0" type="button" data-toggle="sidebar" data-turbolinks-eval=false>
 <span class="material-icons">short_text</span>
</button>

sidebar ------------

<!-- drawer -->
<div class="mdk-drawer js-mdk-drawer" id="default-drawer" data-turbolinks-eval=false>
    <div class="mdk-drawer__content">
        <div class="sidebar sidebar-dark-dodger-blue sidebar-left" data-perfect-scrollbar>


            <div class="d-flex align-items-center navbar-height">
                <form action="" class="search-form search-form--black mx-16pt pr-0 pl-16pt">
                    <input type="text" class="form-control pl-0" placeholder="Search">
                    <button class="btn" type="submit"><i class="material-icons">search</i></button>
                </form>
            </div>



            <a href="fixed-index.html" class="sidebar-brand ">
                <!-- <img class="sidebar-brand-icon" src="assets/images/illustration/student/128/white.svg" alt="Luma"> -->

                <span class="avatar avatar-xl sidebar-brand-icon h-auto">

                    <span class="avatar-title rounded bg-primary"><img src="{{ asset('assets/images/illustration/student/128/white.svg') }}" class="img-fluid" alt="logo" /></span>

                </span>
                <span>Logic Edx</span>
            </a>
            <div class="sidebar-heading">Student</div>
            <ul class="sidebar-menu">


                <li class="sidebar-menu-item @if(Request::route()->getName() == 'home') active @endif ">
                    <a class="sidebar-menu-button" href="{{ route('home') }}">
                        <span class="material-icons sidebar-menu-icon sidebar-menu-icon--left">home</span>
                        <span class="sidebar-menu-text">Home</span>
                    </a>
                </li>
                <li class="sidebar-menu-item @if(\Request::route()->getName() == 'test-series.index')active @endif">
                    <a class="sidebar-menu-button" href="{{ route('test-series.index') }}">
                        <span class="material-icons sidebar-menu-icon sidebar-menu-icon--left">local_library</span>
                        <span class="sidebar-menu-text">Browse Test-Series</span>
                    </a>
                </li>
                <li class="sidebar-menu-item @if(\Request::route()->getName() == 'free.test-series.index')active @endif">
                    <a class="sidebar-menu-button" href="{{ route('free.test-series.index') }}">
                        <span class="material-icons sidebar-menu-icon sidebar-menu-icon--left">style</span>
                        <span class="sidebar-menu-text">Free Test-Series</span>
                    </a>
                </li>
                @if(auth()->check())
                <li class="sidebar-menu-item">
                    <a class="sidebar-menu-button" href="fixed-student-my-courses.html">
                        <span class="material-icons sidebar-menu-icon sidebar-menu-icon--left">search</span>
                        <span class="sidebar-menu-text">My Test-Series</span>
                    </a>
                </li>
    
                <li class="sidebar-menu-item">
                    <a class="sidebar-menu-button" href="fixed-student-quiz-result-details.html">
                        <span class="material-icons sidebar-menu-icon sidebar-menu-icon--left">live_help</span>
                        <span class="sidebar-menu-text">Result</span>
                    </a>
                </li>
                @endif
            </ul>
        </div>
    </div>
</div>
2 Answers

you have to add "data-no-turbolink" to the dropdowns to get them working

I have same problem with turbolinks and bootstrap. I resolved this problem as follow:

  1. remove turbolinks from app.js and put app.js on "head" of layout page. app.js inclueds bootstrap, jquery and ...

  2. call turbolinks on another js file (ex: turbo.js) and put this file on "body" of layout page

Related