How can I fix this console problem: "Bootstrap dropdown requires Popper.js"

Navigation
0

I am creating a web page. Where I have an index and at the same level a folder js with three javascript files (bootstrap.min, jquery.min, popper.min). And another folder called css with two ficeros inside (styles.css and bootstrap.min.css). I have this small block of code where I try to create a responsive header. 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Etiqueta que sirve para IE -->
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Hara que la web tenga un tamaño normal independientemente del dispositivo -->

    <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Cargamos el css de bootstrap.min.css -->
    <link rel="stylesheet" href="css/estilos.css"> <!-- Cargamos el css de estilos.css -->

    <title>Pagina</title>
</head>
<body>    
    <script src="js/jquery.min.js"></script> <!-- Cargamos el js de jquery -->
    <script src="js/bootstrap.min.js"></script> <!-- Cargamos el js de bootstrap -->
    <script src="js/popper.min.js"></script> <!-- Cargamos el js de popper -->

    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toogle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                   <span class="sr-only">Este boton cambia la barra de navegacion</span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">DAW208</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li href="#">Inicio</li>
                    <li href="#">1</li>
                    <li href="#">2</li>
                </ul>
            </div>
        </div>
    </nav>
</body>
</html>

And I get this error in console:

I imagine that the problem comes from the fact that I am not loading the popper.min.js well but I am unable to solve it. The file is downloaded from the following link:

link

    
asked by Eduardo 28.09.2017 в 16:12
source

2 answers

2

Be careful when making calls to JS files that require other files, here is a clear example: 

<script src="js/jquery.min.js"></script> <!-- Cargamos el js de jquery -->
<script src="js/bootstrap.min.js"></script> <!-- Cargamos el js de bootstrap -->
<script src="js/popper.min.js"></script> <!-- Cargamos el js de popper -->

Here is calling bootstrap.min.js and this marks an error, since it uses some functions of another file (popper.min.js) in this case, then bootstrap occupies the functionalities of popper to work, but as The popper file has not been read, these features do not exist. The same thing would happen if we call bootstrap.js without first calling Jquery.js.

Moral: The order in which we call the JS files is important.

    
answered by 28.09.2017 / 18:47
source
1

I would recommend uploading it through CDN, check if that works, in the following way: 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    
answered by 28.09.2017 в 17:48
How to get value from several labels to and display in an input text? How to send data from a second activity the first