I'm trying to use Bootstrap 4 in Symfony 4 using yarn package manager but somehow the JavaScript is not working. I have no errors in the console but when I try to trigger the navbar collapsed button I won't open the navbar.
This is my code:
app.js
var $ = require('jquery');
require("bootstrap/js/dist/");
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="stylesheet" href="{{ asset('build/css/app.css') }}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">CRM Fabriek</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
{% block body %}{% endblock %}
<script src="{{ asset('build/js/app.js') }}"></script>
</body>
</html>
I compiled the js to the build/js/app.js file by using yarn run encore dev
Import Bootstrap’s JavaScript by adding this line to your app’s entry point (usually index.js or app.js):
import 'bootstrap';
or indicate the path completely
import 'bootstrap/dist/js/bootstrap';
or if you prefer require()
require('bootstrap/dist/js/bootstrap');
Alternatively, you may import plugins individually as needed:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dropdown';
...
https://getbootstrap.com/docs/4.1/getting-started/webpack/#importing-javascript
In the webpack-encore documentation says that you must in your webpack.config.js file add a call .autoProvidejQuery() because Bootstrap expects jQuery to be available as a global variable.
// webpack.config.js
Encore
// ...
.autoProvidejQuery();
http://symfony.com/doc/current/frontend/encore/bootstrap.html#importing-bootstrap-javascript
Related
In my next app with the latest version 12.1.6, I'm trying to use bootstrap. I've added bootstrap CSS and js files from CDN to the head of pages/_app.js as below,
import '../styles/globals.css'
import Head from 'next/head';
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<meta charset="UTF-8"/>
<meta name="keywords" content="Ogani, unica, creative, html"/>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</Head>
<Component {...pageProps} />
</>
);
}
export default MyApp
I used bootstrap Nav as below,
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
I've noticed bootstrap CSS is loaded and executing. But its JS is loading but not executing. Because the page isn't interactive menu isn't expanding and collapsing on click. Can anyone tell me what's a problem with it?
import Head from 'next/head';
const Layout = (props) => (
<div>
<Head>
{/* import external javascript */}
<script type="text/javascript" src="..."></script>
<script type="text/javascript" src="/js/myscript.js"></script>
</Head>
<p id="demo"></p>
</div>
);
export default Layout;
The error was occurring because React/Next DOM operations were colliding with Jquery DOM operations. By deferring the jquery operations after react/next it worked. Just used useEffct hook to do jquery. It's solved here.
Replace the IIFE in mainW.js for:
// of course you perhaps want better names
function _runJQueryControls($) {
// rest of function
}
window.runJQueryControls = () => _runJQueryControls(jQuery);
Inside index.js
useEffect(() => {
window?.runJQueryControls();
}, []);
In next.config.js
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false,
};
special thanks to icyJoseph who helped.
I am working on a Laravel/Vue Single Page Application but in the very beginning I got an error saying:
Uncaught SyntaxError: Unexpected token '<'
Here is my app.blade.php which is a layout file:
<!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></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#endif
#else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
#yield('content')
</main>
</div>
</body>
</html>
Here is the home.blade.php:
#extends('layouts.app')
#section('content')
<App></App>
#endsection
Here is web.php:
<?php
Auth::routes();
Route::get('/{any}', 'AppController#index')->where('any', '.*');
Below is the app.js file:
import Vue from 'vue';
import router from './router';
import App from './components/App';
require('./bootstrap');
const app = new Vue({
el: '#app',
components: {
App
},
router
});
Below is the router.js file that includes routes:
import Vue from 'vue';
import VueRouter from 'vue-router';
import ExampleComponent from './components/ExampleComponent';
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{ path: '/', component: ExampleComponent },
],
mode: 'history'
});
I have placed all the code here in this question and there is nothing extra that causes the error.
Here is a screenshot of the Network tab which does not show any 404:
The issue is found and it was coming from the asset() function of laravel as it could not pick up the app.js from the public directory for some reasons which caused the application to return the html page because in the web.php, I have told it to hit the same controller action for anything that comes after the / in the url. Now I edited the line <script src="{{ asset('js/app.js') }}" defer></script> and changed it to <script src="{{ asset('public/js/app.js') }}" defer></script> which picks the js file properly and returns the js code that handles the Single Page Application routes and I do not see the issue anymore.
Thank you all for participating and helping me find out the issue.
I am studying Django and found the following problem when using staticsfiles, the toggler that appears when the screen is reduced does not extend my bootstrap navbar, I did not find the error.
NOTE: the rest works, dropdown, navbar (css / js)
NOTE1: when I use CDN everything works, including the toggler
here are the excerpts that I call staticsfiles and the link to the complete project on github
settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'staticfiles'),
)
scripts.html
{% load static %}
<script src="{% static 'jquery/dist/jquery.js' %}"></script>
<script src="{% static 'popper.js/dist/umd/popper.js'%}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
navbar
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Los Angeles Soccer Evolution</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="programsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Programs
</a>
<div class="dropdown-menu" aria-labelledby="programsDropdown">
<a class="dropdown-item" href="#">Lion Cubs</a>
<a class="dropdown-item" href="#">Evolution</a>
<a class="dropdown-item" href="#">Lions</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Summer Camp</a>
</li>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="tournamentsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tournaments
</a>
<div class="dropdown-menu" aria-labelledby="tournamentsDropdown">
<a class="dropdown-item" href="#">3 vs 3</a>
<a class="dropdown-item" href="#">Futsal</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Schools</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">About Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
'''
[Projeto no Github][1]
[1]: https://github.com/ChenGit55/LASE
The problem is most likely caused because on your server you are loading jQuery 3.5.0 or higher and via the CDN you were loading jQuery 3.4.1. See issue #30553.
Try downloading jQuery 3.4.1 and using that. It looks like this will be fixed in Bootstrap 4.4.2
I'm trying to collapse this Navbar but it is not working. The button is not doing anything.
This is my code:
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="/lsapp/public/">{{config ('app.name', 'LSAPP')}}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="#navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link" href="/lsapp/public/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/lsapp/public/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/lsapp/public/services" tabindex="-1">Services</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/lsapp/public/posts" tabindex="-1">Blog</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
It is working please check if you had linked the bootstrap css and js files correctly
If you are using cdn then
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
//Your navbar code here
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
if you are not using cdn then you should replace the src with the file path
i have tested your code and its working. I guess you have a javascript error before bootstrap.js can be loaded.
Or jQuery isnt loaded before bootstrap.
please check the browser console (F12)
I'm trying to add twitter-bootstrap to a django project. I've got a html file called base.html which acts as a wrapper file for other html code which is placed inside of it before it gets send back in the HttpResponse.
base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="{% static '/css/bootstrap.min.css' %}" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src = "{% static '/js/bootstrap.min.js' %}"></script>
<title>TITLE</title>
</head>
<body>
{% autoescape off %}{{ content }}{% endautoescape %}
</body>
</html>
This file is the only file which will ever get send back to the visitor of the webside so I would imagine that if I add the files bootstrap needs inside base.html that it would work also on the code in content. Infact, all the css stuff seems to work fine but whenever I try to open a dropdown menu in the navbar of my site, it does not show up.
This is the source code of the page that has difficulties:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src = "/static/js/bootstrap.min.js"></script>
<title>TITLE</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="?p=index">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="?p=channel">testchannel</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Username
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="?p=Channel">Visit Channel</a>
<a class="dropdown-item disabled" href="#">Statistics</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item disabled" href="#">Settings</a>
</div>
</li>
</ul>
</div>
</nav>
<h1>A TEST HEADER</h1>
</body>
</html>
Clicking on the "/static/css/bootstrap.min.css" or "/static/js/bootstrap.min.js" both redirects me to a file (no 404 error pops up).
what could be the problem causing the navbar to not work? How can I fix it?
EDIT:
As requested the settings.py part that handles static:
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# some more stuff here like INSTALLED_APPS and TEMPLATES
STATICFILES_DIRS = (
'/home/<name>/Desktop/django/myproject/Bootstrap',
)
STATIC_URL = '/static/'
Please make sure you have included the correct static path in the settings.py file.
I have used something like the following in one of my project and it works fine.
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)