Menu selection popper JavaScript

Struggling to create a dropdown menu and encountering this error:

"Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
    at bootstrap.min.js:6
    at bootstrap.min.js:6
    at bootstrap.min.js:6"

Explored various solutions in forums but none seems to resolve it. How can I successfully import popper.js?

Edit1:

Discovered a method to import using a script tag, which was all along in the Bootstrap documentation. However, another issue emerged - despite having error-free code, my dropdown button remains unresponsive. Attempted multiple dropdown examples from the Bootstrap docs by copying and pasting, but clicking on the button yields no result :(

 !doctype html>
<html>
<head>
<meta charset="utf-8">
<title>About us</title>

<link href="bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="Sobre-Nós.css" rel="stylesheet" type="text/css">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<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>

</head>
javascriptjqueryhtmlcssbootstrap-4

Answer №1

Make sure to refer to the following documentation for detailed instructions on how to install popper.js: https://github.com/FezVrasta/popper.js#installation

There are multiple methods available for installing the popper library.

Best of luck with your installation!

Answer №2

After much troubleshooting, I finally cracked the code:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Any tips for avoiding a new line when generating html attribute values to prevent my json string from breaking?

When working with JSON string values in button element attributes, I have encountered an issue where a single quote causes the value to break and create newlines. For example: var $json = JSON.stringify('{"Long_text":"This is \'my json stri ...

javascripthtml

CSS Malfunctioning in MVC 5.2

Incorporating MVC 5.2 into my project, I am currently working on incorporating prewritten CSS from the Bootswatch website's Lumen theme. The process involved downloading the Bootstrap file, renaming it to bootstrap-lumen.css, and placing it in the con ...

asp.netasp.net-mvcvisual-studiobootstrap-4

The function cannot be accessed during the unit test

I have just created a new project in VueJS and incorporated TypeScript into it. Below is my component along with some testing methods: <template> <div></div> </template> <script lang="ts"> import { Component, Vue } from ...

javascripttypescriptunit-testingvue.jsjestjs

What steps should I take to ensure that the <select> tag is compatible with Microsoft Edge?

Currently, I am working on editing jsp files that utilize struts1. <html:select property="someProperty" style="width:110;height:110" styleClass="someClass"> However, when viewing it in Microsoft Edge, I noticed that the drop-down menu already ...

javascripthtmlmicrosoft-edgecompatibilitystruts-1

Encountering some difficulties while setting up my development tool (specifically webpack)

I have embarked on a journey to learn modern JavaScript with the help of Webpack and Babel. As a beginner in this field, my instructor is guiding me through the principles of modern JavaScript by building an app called Forkify - a recipe application. While ...

javascripthtmlnode.jsnpmwebpack

When using jQuery's $.when in a loop, it does not pause for each call to finish before moving on to the next iteration of the loop

Using $.when to make AJAX calls within a loop is causing unexpected results: for ( var i = 0; i < 4; i++ ){ $.when(get_total_price("var1","var2")).then(function (v) { console.log("i= "+i); }); } The expected output should be: i= 1 i= ...

jqueryajaxloops.when

Choice pick, fails to display default

Default value is content1, but "text default show" is not displayed Please assist me.. jQuery(document).ready(function($) { jQuery('#select123').change(function() { jQuery('.co ...

jqueryhtml

Craft a dynamic menu of categories using PHP

As a beginner in coding and PHP, I am working on creating an online shop for a school project. I am looking for a simple code that can select categories from my database and display them on the homepage. Additionally, when a user clicks on a category, I ...

phphtmlmysql

What is the best way to upload a file without finalizing the form submission?

I have been working on a task to upload a file using ajax and php without refreshing the page when submitting. My code seems to be functioning well and alerts a valid message when I use the preg_match function. However, when I include the rest of the valid ...

phpjqueryhtmlajax

Unable to process JavaScript function

Still in the process of developing my "mvc/social" PHP project, I am currently focusing on securing user input for the status message. I have created both a PHP and JavaScript function for this purpose, but it seems like the JavaScript function is not bein ...

javascriptphp

I'm having trouble making my jQuery banner responsive - which property should I be using in this situation?

I am experiencing an issue with my jQuery banner not shrinking properly. In my mobile.css file, I have set the class .banner width to 100%, but it is not shrinking to a width of 260px as expected. I would like to know which property I need to use in orde ...

jqueryhtmlcss

What is the reason for the maximum alias number in the npm YAML library?

I have been utilizing the npm module yaml to convert complex, interdependent JavaScript objects into a text format that can be easily restored in Javascript. Additionally, I use this package for deep copying of deeply nested objects by serializing and then ...

javascriptnpmyaml

Sending a POST request to a PHP file in React: A Step-by-Step Guide

Just starting out with reactjs and trying to figure out how to send an ajax request to a server (php file). Here's the structure of my project: check it out here src/index.js import React from 'react'; import ReactDOM from 'react-dom& ...

javascriptreactjs

Encountered difficulties implementing Chart.js with Angular2

Greetings! I am currently attempting to utilize one of the Charts provided by http://www.chartjs.org, however, I seem to be encountering difficulties in getting it to function properly. I have followed the documentation by installing 'npm install char ...

javascripthtmlangularchartschart.js

Utilizing JavaScript to showcase information retrieved from the database

After implementing this code example for a cascaded drop-down menu, I would like to incorporate the names of individuals residing in a specific city. How can I achieve this functionality once a city is selected? Demo link: Complete code snippet below: ...

javascriptphpjquerymysql

Controlling the position of a <div> element using JavaScript

Is there a way to adjust the position and size of a <div>? I have already set it to float with this CSS code: div.grid_tooltip { position: absolute; left: 0px; top: 0px; } ...

javascriptcsshtmlpositioning

Unique backgrounds with varied images on each grid block

Hi there! I'm currently exploring options to display different images for each section of a grid I've put together: Take a look at the CSS I'm using: background-image: url("my_image.jpg"); background-size: 50px auto; float: right; height: ...

javascriptjqueryhtmlcss

No success with Laravel Ajax Request and empty $request result

My view contains an AJAX post request method that looks like this: $.ajax({ data: { test : 1337, _token: "{{csrf_token()}}" }, type: "POST", url: '{{ route("get_image_by_parent_id") }}', ...

jqueryajaxlaravellaravel-5

Unexpected behavior with Jquery code execution

I'm experiencing an issue with a simple jQuery AJAX script that is supposed to send a value to a web service for processing, but for some reason, the jQuery script does not run at all. <!DOCTYPE html> <html> <head> <meta charset= ...

jquery

Apply a new class to the containing div only if it includes a nested span element

In my shop, I have a variety of filters to display products. To style the filters (dropdowns), I am utilizing bootstrap-select. Whenever I adjust a filter value, the other filters automatically hide options if there are no results available for that speci ...

javascriptjqueryhtml