Hello everyone, I recently encountered an issue while trying to use dropdown in my project after updating to bootstrap 4. It was working perfectly fine before the update, but now I'm getting an error in the JavaScript. The error that pops up when I try to click the dropdown button is:
Uncaught TypeError: Bootstrap dropdown require Popper.js (https://popper.js.org)
at Dropdown.toggle (bootstrap.js:1533)
at HTMLButtonElement.<anonymous> (bootstrap.js:1690)
at Function.each (jquery-3.0.0.js:359)
at jQuery.fn.init.each (jquery-3.0.0.js:152)
at jQuery.fn.init._jQueryInterface [as dropdown] (bootstrap.js:1675)
at HTMLButtonElement.<anonymous> (bootstrap.js:1842)
at HTMLDocument.dispatch (jquery-3.0.0.js:5087)
at HTMLDocument.elemData.handle (jquery-3.0.0.js:4895)
I've tried extensively to solve this issue by including the popper.js from umd and from a direct link into the Master Page or on the same page, but to no avail.
I also attempted to change the cssClass but it didn't make any difference.
Here is a snippet from my master page (Default added by Visual Studio):
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - Arabian Food Supplies</title>
// Code continues...
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server" EnablePageMethods="true" EnableCdn="True">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts and references--%>
// Additional script references...
</Scripts>
</asp:ScriptManager>
For my first try:
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li>
<asp:LinkButton ID="LinkButton2" runat="server">Solve</asp:LinkButton></li>
<li>
<asp:LinkButton ID="LinkButton3" runat="server">Abort</asp:LinkButton></li>
</ul>
</div>
And for my second try:
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Action<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Solve</a></li>
<li><a href="#">Abort</a></li>
</ul>
</div>