Currently, I am engaged in a project that was initiated with bootstrap version 4.3.1.
I have a keen interest in both JavaScript and HTML coding.
<a class="dropdown-item" href="{{ route('user.panel') }}">
User panel
</a>Encountering this error message in the console:
SyntaxError: 'http://localhost:8000/user/panel' is not a valid selector
bootstrap.min.js:6 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'http://localhost:8000/user/panel' is not a valid selector. at Object.getSelectorFromElement (http://localhost:8000/themes/js/bootstrap.min.js:6:1466) at http://localhost:8000/themes/js/bootstrap.min.js:6:46766 at Array.map () at n.t.refresh (http://localhost:8000/themes/js/bootstrap.min.js:6:46740) at new n (http://localhost:8000/themes/js/bootstrap.min.js:6:46381)
I have identified that the issue arises due to the dropdown element, causing it not to function as expected. Upon investigation, it was observed that using `href="javascript:void(0);` or `href="#!"` triggers this error, whereas omitting `href` or using `href="#"` ensures proper functionality.
https://i.sstatic.net/YkZUx.png
Note: Seeking a resolution with `href="javascript:void(0);`, as opposed to `href="#"`, to maintain aesthetic appeal and prevent page scrolling to the top.
<ul class="navbar-nav">
@guest
<li class="navbar-item dropdown">
<a href="#" class="nav-link" data-toggle="dropdown">Register/Login<i class="fas fa-sort-down"></i></a>
<div class="dropdown-menu text-right m-2 position-absolute" style="width:300px;left:-111px;">
<a href="{{ route('login') }}" class="btn btn-primary d-block m-3">Login</a>
<span class="m-3">Are you a new user? <a href="{{ route('register') }}" class="link-sign">Sign up</a></span>
</div>
</li>
@else
...
(The rest of the ul content)
...
@endguest
</ul>An error is surfacing in the line below:
$('body').scrollspy({
target: '#mainNav',
offset: 50
});script.js
(function($) {
"use strict";
// Content for script.js
AOS.init({
easing: 'ease-in-out-sine'
});
$('#logout-button').on('click', function(e) {
e.preventDefault();
$('#logout-form').submit();
});
// Additional functions and logic here
})(jQuery); // End of use strict