I'm having problems fixing Laravel log out button.
Registering and login in it's fixed but when i try to click on the username for the dropdown menu Logout button it's not showing.
Doesn anyone else have / had the same problem ?
public function __construct()
{
$this->middleware('guest')->except('logout');
}
This is on my loginController
<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>
This is on my app.blade.php
Auth::routes();
Route::get('/home', 'HomeController#index')->name('home');
on the routes is this.
write this all code in your app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a 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_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
and write code in youe web.php
Route::get('/', function () {
return view('welcome');
});
Auth::routes();
Related
I'm really new to Javascript, I am building a webpage and wanted the navbar to change size when the user scrolls down. This was only possible by using Javascript.
I referenced the .js file in my HTML file and added an onscroll event to the navbar with a function that I defined in the Javascript file. Thing is, the styling doesn't apply. I already checked if the function is actually being called by adding a console.log();. I found out the function is being called but the styling won't apply for some reason.
Here is my HTML
<!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', 'Remote Homework') }}</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">
<!-- Stylesheet from initial build, located in public folder -->
<link rel="stylesheet" href="{{ asset('style.css') }}" type="text/css">
</head>
<body>
<div id="app">
<nav id="navbar" onscroll="navbarSizing()" class="navbar navbar-expand-md navbar-light bg-white shadow-sm sticky-top">
<!-- Use container-fluid to arrange navbar items from edge to edge -->
<div class="container">
<a class="navbar-brand" href="{{ route('home') }}#content1">
<img src="{{ asset('images/better_logo.png') }}" alt="Logo" style="width:105px;">
</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">
<li class="nav-item">
<a class="nav-link" href="{{ route('home') }}#content1">{{ __('Home') }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('home') }}#content2">{{ __('Info') }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('home') }}#content3">{{ __('Contact') }}</a>
</li>
#auth()
#endauth
</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
<!-- only gets called when user is logged in -->
#else
<li class="nav-item">
<!-- put the route for the 'public' questions here-->
Question Feed
</li>
<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('questions.overview') }}">{{ __('My questions') }}</a>
<!--<a class="dropdown-item" href="{{ route('pages.dashboard') }}">{{ __('Dashboard') }}</a>-->
<a class="dropdown-item" href="{{ route('questions.create') }}">{{ __('Ask a question') }}</a>
<hr class="dropdownmenu-hr">
<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">
<!-- main content of the page -->
#yield('content')
</main>
<!-- the footer of the page -->
#include('pages.footer')
</div>
<script src="index.js"></script>
</body>
</html>
Here is my JS file
function navbarSizing() {
let element = document.getElementById("navbar");
element.style.color = "blue";
console.log("This works!");
}
Can somebody see the problem? I've been stuck with this issue for hours. Thanks in advance!
First problem is that since nav does not have a scrollbar, so it will not get event on scrolling. Try adding event handler on body element.
Second, the style color that you are applying is not visible in nav element, because it applies on text color, and nav element does not have any text, it contains other elements. As you said that you want to change size, try, for example:
element.style.height = "500px";
If you want to change css of the element, use can use jQuery. Here is the simple example to change the css using jQuery. I hope it helps to answer you or give you an idea.
function navbarSizing() {
let element = $("#navbar").find('ul');
element.css('background-color', 'red');
console.log("This works!");
}
In this example, it is changing the background color. So first of all you have to find the correct element to apply the css. So, if you want to change text color of li, so first you need to find the li children of the ul element.
For more reference, you can read doc from https://api.jquery.com/. Also, include jQuery in your html as
I just completed freshly installing Laravel on a VPS, relocated the public folder to the public_html folder and redirected all associated files to point to here.
Going to the default domain loads bootstrap correct, and the welcome page displays with the bootstrap formatting, I auto-generated the login/register auth pages and navigating to those doesn't utilize bootstrap formatting, logging the error that http://web.com/js/app.js ERROR 404: Not Found
Like I said, this is fresh install, except everything that was in the public folder was migrated to public_html and I edited the index.php accordingly. I've been trying to search up other people with the same issue on here except they all seem to have issues with bootstrap generally while the error with bootstrap only occurs on other pages for me, making their solutions useless. Although anyone familiar with Laravel will already know what it looks like, here's the app.blade.php file that is used to format the auxiliary pages.
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head><meta http-equiv="Content-Type" content="text/html; 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>
I'd already done a bit of editing with the routing to the JS and CSS links, adding ../ to see if that'd help as opposed to the auto-generated js/app.js but to no avail. Any help would be appreciated.
I downloaded bootstrap and configured it in my Django application and everything was good after sometime the JavaScript stopped working but the CSS is working. I don't know what is wrong with it. The JavaScript stopped after sometime of development after first of all working well.
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width ,initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Fon Desmond Ade">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% static 'tzuzz/css/bootstrap.min.css' %}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-secondary">
<a class="navbar-brand" href="#" style="color: white">Tzuzz</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 nav-item" style="color: white" href="{% url 'tzuzz:login' %}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: white" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: white" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: white" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<br> {% block body %} {% endblock %}
</body>
<footer style="padding-top: 70px" class="fixed-bottom">
<div class="card w-90">
<div class="card-body">
{% block footer %} {% endblock %}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="{% static 'todo/js/bootstrap.js' %}"></script>
</footer>
</html>
I can't seem to log out from my account in laravel. I have use the chrome development tool and it told me that it was the fault of my app.js file. So I remove it and replace it with the original copy of the app.js file but the error still remain there with the old previous code. I also didn't really touch any of the login and logout function, only the app.blade.php but in the past I was able to still logout from the account. Can anyone help? Thanks a lot
The error it return me was this
Uncaught TypeError: Cannot read property 'querySelector' of null
at app.js:2
app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<title>SideBar Menu</title>
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
</head>
<body>
<div id="sidebar">
<ul>
<li>Link 5</li>
<li>Link 5</li>
<li>Link 5</li>
<li>Link 5</li>
<li>Link 5</li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Auth::guest())
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a 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_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
app.js (I am using the old file that I had used, sorry can't upload the whole code because max word limit)
I´ve been reading some questions about this issue. Then I have checked the .js .css and bootstrap files I´m linking to my script to make the dropmenu work but it just doesn´t work.
My nav looks likes this:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{ path('homepage') }}">
<img id="logo" src="/images/logotipo.png">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Acción #1</li>
<li>Acción #2</li>
<li>Acción #3</li>
<li class="divider"></li>
<li>Acción #4</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="{{ path('signup_player') }}">
<span class="glyphicon glyphicon-user"</span>
Sign Up
</a>
</li>
<li>
<a href="{{ path('login_route') }}">
<span class="glyphicon glyphicon-log-in"></span>
Login
</a>
</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
My looks like this, and I think I have everything that is needed there:
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Squash Connection - Homepage </title>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/522ed01_part_1_bootstrap-social_1.css" />
<link rel="stylesheet" href="/css/522ed01_part_1_bootstrap-theme_2.css" />
<link rel="stylesheet" href="/css/522ed01_part_1_bootstrap-theme.min_3.css" />
<link rel="stylesheet" href="/css/522ed01_part_1_bootstrap_4.css" />
<link rel="stylesheet" href="/css/522ed01_part_1_bootstrap.min_5.css" />
<link rel="stylesheet" href="/css/522ed01_part_1_font-awesome_6.css" />
<link rel="stylesheet" href="/css/522ed01_part_1_font-awesome.min_7.css" />
<link rel="stylesheet" href="/css/522ed01_part_1_jumbotron_8.css" />
</head>
At the end of the script I insert my tagas to add the .js files.
<script src="/js/dd00e43_jquery_1.js"></script>
<script src="/js/dd00e43_bootstrap.min_2.js"></script>
<script src="/js/dd00e43_part_3_bootstrap_1.js"></script>
This is how I source my .js, .css and bootstrap files with symfony and twig:
Stylesheets compiled with Assetic
{% block stylesheets %}
{% stylesheets 'css/*.css' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
Including Javascripts with Assetic
{% block javascripts %}
{% javascripts
'js/jquery.js'
'js/bootstrap.min.js'
'js/*.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
For me everything looks right, but I don´t know the reason why when the page is loaded and I click on the dropdown menu, it just doesn´t show the links to other pages.
Does anyone know why this could be happening or if I'm missing something and I'm not noticing?
Thanks.
It works fine for me when I reproduced it with CDNs in JSBin, link below.(resize view screen to test mobile/desktop versions)
http://jsbin.com/yameludede/edit?html,css,output
I would check where you source jQuery and Bootstrap from. Try the CDNs:
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />