javascript - Why does popper.js doesnt work in laravel

i already tried a lot of option that can be found on the internet but i can't get it to work..

I ran in the terminal:

npm install popper.js --save

next i editted my "resources/js/bootstrap.js";

 window._ = require('lodash');      
 import Popper from 'popper.js/dist/umd/popper.js';
 /**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = Popper;
    require('bootstrap');
} catch (e) {}

then i added this to my webpack.mix.js

mix.autoload({
jquery: ['$', 'window.jQuery',"jQuery","window.$","jquery","window.jquery"],
'popper.js': ['Popper']
})

i then added this code to my include template that contains my header

 <script src="{{ asset('js/app.js') }}" defer>

 $(function () {
 $('[data-toggle="popover"]').popover()
 })
 </script>

and this to my page

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

then i ran

npm run dev

This is my package.json

"devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.3.1",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.5",
        "popper.js": "^1.14.4",
        "vue": "^2.5.7"
    },
    "dependencies": {
        "popper": "^1.0.1",
        "tooltip.js": "^1.3.0"
    }

I'm kind of a newbie when it es to javascript, but i'm interested in learning

please tell me what i am missing

Thanks in advance

include file (header)

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer>
  $(function () {
  $('[data-toggle="popover"]').popover()
})
    </script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="">
    <link href="" rel="stylesheet" 
type="text/css">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
        @include('inc.navbar')
        <div class="container">
        @include('inc.messages')
        @yield('content')
        </div>
    </body>
    <!--<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
    <script src="/vendor/unisharp/laravel-ckeditor/adapters/jquery.js"></script>
    <script>
    $('textarea').ckeditor();
    </script>-->

</body>
</html>

i already tried a lot of option that can be found on the internet but i can't get it to work..

I ran in the terminal:

npm install popper.js --save

next i editted my "resources/js/bootstrap.js";

 window._ = require('lodash');      
 import Popper from 'popper.js/dist/umd/popper.js';
 /**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = Popper;
    require('bootstrap');
} catch (e) {}

then i added this to my webpack.mix.js

mix.autoload({
jquery: ['$', 'window.jQuery',"jQuery","window.$","jquery","window.jquery"],
'popper.js': ['Popper']
})

i then added this code to my include template that contains my header

 <script src="{{ asset('js/app.js') }}" defer>

 $(function () {
 $('[data-toggle="popover"]').popover()
 })
 </script>

and this to my page

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

then i ran

npm run dev

This is my package.json

"devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.3.1",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.5",
        "popper.js": "^1.14.4",
        "vue": "^2.5.7"
    },
    "dependencies": {
        "popper": "^1.0.1",
        "tooltip.js": "^1.3.0"
    }

I'm kind of a newbie when it es to javascript, but i'm interested in learning

please tell me what i am missing

Thanks in advance

include file (header)

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer>
  $(function () {
  $('[data-toggle="popover"]').popover()
})
    </script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="https://fonts.gstatic.">
    <link href="https://fonts.googleapis./css?family=Nunito" rel="stylesheet" 
type="text/css">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
        @include('inc.navbar')
        <div class="container">
        @include('inc.messages')
        @yield('content')
        </div>
    </body>
    <!--<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
    <script src="/vendor/unisharp/laravel-ckeditor/adapters/jquery.js"></script>
    <script>
    $('textarea').ckeditor();
    </script>-->

</body>
</html>

Share Improve this question edited Oct 15, 2018 at 21:30 asked Oct 15, 2018 at 21:12 RMCS 3935 silver badges18 bronze badges

Have you tried using CDN? <script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> You should place this before the bootstrap script. – nakov Commented Oct 15, 2018 at 21:16
i tried but still nothing, <script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"> $(function () { $('[data-toggle="popover"]').popover() }) </script> <script src="{{ asset('js/app.js') }}" defer></script> – RMCS Commented Oct 15, 2018 at 21:22
do you want it only for bootstrap? Because I use the CDN links from here: http://getbootstrap./docs/4.1/getting-started/download/ And don't forget both jquery and popper need to be above the bootstrap link and before the </body> tag. – nakov Commented Oct 15, 2018 at 21:25
ill edit my question so you can see my whole setup – RMCS Commented Oct 15, 2018 at 21:29

Add a ment |

4 Answers 4

Sorted by: Reset to default 4

I know this is an old post, but this confused me on a few different occasions and I ended up here looking for the answer, before I found it elsewhere. I am by no means an expert, but for me, it was the 'defer' in this line:

<script src="{{ asset('js/app.js') }}" defer>

The 'defer' causes the scripts to load after the page loads, which is also after you load your popper scripts. jQuery is loaded in your js/app.js, so it's not loading until after your popper scripts, even though js/app.js is located above them on the page.

You can remove the 'defer' from that line, which will cause it to load right away and before your popper scripts, but that broke some other things for me (things that were looking for elements in the body that hadn't yet loaded). So I added the 'defer' to my other <script> lines as well, which caused them to load in the right order. Hopefully this might work for you as well.

You have two closing body tags. Then you are loading the scripts in the header. When you use src in the script it will load the file, it will not use the body. So you should use:

<script src="{{ asset('js/app.js') }}" defer />

<script>
    $(function () {
        $('[data-toggle="popover"]').popover()
    });
</script>

But put this at the end of your body content, just before the </body> tag.

-- EDIT --

Using CDN links

<script src="https://code.jquery./jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn./bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

edit package.json add .js

"dependencies": {
    "popper.js": "^1.0.1",
    "tooltip.js": "^1.3.0"
}

and don't ever use popper.js or popper.min.js as CDN or script tag on head or body, case it will conflict with app.js script tag

Just add before closing body tag </body>

<script src="{{ asset('js/app.js') }}" defer />

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744938874a4602196.html

javascript - Why does popper.js doesnt work in laravel - Stack Overflow

4 Answers 4

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Why does popper.js doesnt work in laravel - Stack Overflow

4 Answers 4

相关推荐