switchView function is not Working to access next page content - javascript

I,m going to design admin panel for my application.I divided my home into containers. I want to show detail of clicked items in Images.html and Categories.html . when I click on menu item in 2nd container(also called side bar).I want to show detailed of images and categories but my switchView function is not working, I don,t know why I,m unable to show content of images.html and categories.html using views, but I,m unable to access my next html page,s data.Please Sincere attention here.
Here is my admin.html(home page) code:
<!DOCTYPE html>
<html class="h-100">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="stylesheet.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.2/firebase-app.js"></script>
</head>
<body class="h-100">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Wallpaper App Admin
</a>
<div class="dropdown navbar-right">
<button
id="user-email"
class="btn btn-secondary dropdown-toggle"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
probelalkhan#gmail.com
</button>
<div
class="dropdown-menu"
aria-labeledby="user-email"
>
<a class="dropdown-item" id="btn-logout" href="#">
Logout
</a>
</div>
</div>
</div>
</nav>
<div class="row h-100 bg-light">
<div class="col-lg-2 bg-secondary">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#" onclick="switchView('images.html')">
<span class="text-dark">Images</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="switchView('categories.html')">
<span class="text-dark">Categories</span>
</a>
</li>
</ul>
</div>
<div class="col-lg-10">
<div class="container" id="container">
<h1>Images</h1>
</div>
</div>
</div>
<script src="app.js"></script>
<script>
firebase.auth().onAuthStateChanged(function(user){
if(!user){
window.location.href = "index.html";
}
});
</script>
</body>
</html>
Here is my app.js:
var firebaseConfig = {
apiKey: "AIzaSyA0nFgIbrXfWULyd9QJPZd60qfRhfAzC0Y",
authDomain: "mywallpaperapp-8ed57.firebaseapp.com",
databaseURL: "https://mywallpaperapp-8ed57.firebaseio.com",
projectId: "mywallpaperapp-8ed57",
storageBucket: "mywallpaperapp-8ed57.appspot.com",
messagingSenderId: "900270634824",
appId: "1:900270634824:web:4dfbcc86520c6f637ba57d"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.auth.Auth.Persistence.LOCAL;
$("#btn-login").click(function(){
var email = $("#email").val();
var password = $("#password").val();
var result = firebase.auth().signInWithEmailAndPassword(email, password);
result.catch(function(error){
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode);
console.log(errorMessage);
});
});
$("#btn-logout").click(function(){
firebase.auth().signOut();
});
function switchView(view){
$.get({
url:view,
cache: false,
}).then(function(data){
$("#container").html(data);
});
}
The Problem in this block of code beacuse my switchView function is not working to access images.html and categories.html, although I coded it perfectly:
<div class="col-lg-2 bg-secondary">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#" onclick="switchView('images.html')">
<span class="text-dark">Images</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="switchView('categories.html')">
<span class="text-dark">Categories</span>
</a>
</li>
</ul>
</div>
Please Sincere Attention here. I,ll be very Thankful to you.


change your switchView function as below:
function switchView(view){
$.get({url: view, cache: false},function(data){
$("#container").html(data);
});
}

Related

How to create a side menu with php and add it to all Views? The views do not stay in the side menu, they scroll down

I am learning MySQL and for this I am creating a simple inventory system.
I've created a side menu that also has a top navigation bar, from a simple template created with just html, bootstrap.
From this menu, we will have access to all the content of the application: Users, Products, Categories, etc...
I want this side menu to be displayed in all views or pages that are added to the application in the future, that is, all views must have this side menu (Sidebar) and the navigation bar (NavBar)
Each view is created independently, for now the application only has 3 views: home, login and 404
The teacher has created a system to call the different views from the index.php, since the application will have a login as follows:
<?php require "./inc/sesionStart.php" ?>
<!DOCTYPE html>
<html lang="es">
<head>
<?php include "./inc/headsidebar.php" ?>
<title>Administrador de inventario</title>
</head>
<body>
<?php
if (!isset($_GET['vista']) || $_GET['vista'] == "") {
$_GET['vista'] = "login";
}
if (is_file("./vistas/" . $_GET['vista'] . ".php") && $_GET['vista'] != "login" && $_GET['vista'] != "404") {
include "./inc/sidebar.php";
include "./vistas/" . $_GET['vista'] . ".php";
} else {
if ($_GET['vista'] == "login") {
include "./vistas/login.php";
} else {
include "./vistas/404.php";
}
}
?>
</body>
</html>
The Login and 404 Views work perfectly, since these pages should not have the side menu (Sidebar) and the Navigation Bar (NavBar)
The problem arises when I have added a new View (HOME), this view needs to have the Side Menu and the Navigation Bar.
However, when I add the URL to the browser: http://localhost:8888/index.php?vista=home , it shows what you see in the screenshot below, the interface created for the HOME View, it shows after of the Sidebar view, that is, we must scroll to be able to see the content of HOME.
Actually, HOME and all views (except Login and 404) must have the SIDEBAR and the NAVBAR
And this is what is displayed when I want to enter HOME:
How can I correct this?
What do I have to do so that all the views that I create in the future have a Side Menu and a Navigation Bar?
I am really following the course and trying to learn with the structure system that the tutorial shows, I do not have the knowledge to make my corrections.
This is the file system I have in the project:
I show the file with which the Side Menu and the NavBar are created and the HOME view file with its corresponding css.
If you don't understand the code, I've created a repository on GitHub to record the changes I make to the project:
https://github.com/dianacuentagithub/inventario
I don't want to continue with the tutorial until I get this corrected, I hope to find an idea or advice to learn how to avoid this.
I hope to see explained well what I need for the application, it is difficult to use the translator
Thank you
sidebar.php
<head>
<?php include "./inc/headsidebar.php" ?>
</head>
<body>
<div class="wrapper">
<nav id="sidebar">
<div class="sidebar-header">
<img src="./img/gato-2.png" class="rounded-circle" alt="logo">
<h3 class="tituloPanel"> Panel Administrador </h3>
<strong>PA</strong>
</div>
<ul class="list-unstyled components">
<li class="usuarioColor active ">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="sidebaruser dropdown-toggle">
<i class="fas fa-user"></i>
Usuarios
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Nuevo
</li>
<li>
Lista
</li>
<li>
Buscar
</li>
</ul>
</li>
<li class="categoriasColor">
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Categorias
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Nuevo
</li>
<li>
Buscar
</li>
</ul>
</li>
<li class="productosColor">
<a href="#pageProductos" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-cubes"></i>
Productos
</a>
<ul class="collapse list-unstyled" id="pageProductos">
Nuevo
Lista
Por Categoria
Buscar
</ul>
</li>
</nav>
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-justify"></i>
<span></span>
</button>
<button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-align-justify"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<button type="button" class="btn btn-outline-success">Mi Cuenta</button>
<button type="button" class="btn btn-outline-danger">Salir</button>
</ul>
</div>
</div>
</nav>
</div>
</div>
<?php include "inc/script.php"; ?>
</body>
</html>
home.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/homeStyle.css">
<title>home</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="jimena">
<div class="row">
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" id="texto">
<h1 class="text-center hi">Hello...
<link rel="stylesheet" href="./css/homeStyle.css">
</h1>
<div class="div-center underline">
</div>
<p class="text-center intro"> This is the view of HOME</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
headsidebar.php
<title>Menu Lateral</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="./css/sidebarStyle.css">
<link rel="stylesheet" href="./css/styles.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
script.php
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar').toggleClass('active');
});
});
</script>
<script src="./js/ajax.js"></script>
I have searched the internet for examples similar to what I need for my project and studied their code, but my limited experience in the php language prevents me from correcting it by myself, so I have come to this place in search of advice

Your sidebar.php is defining the <body> tag which is conflicting with the <body> tag in home.php
Remove the <head> and <body> tags from sidebar.php
Once you do that your layout should work correctly.
Heres how youre files should look:
home.php
<link rel="stylesheet" href="./css/homeStyle.css">
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 h-100" id="jimena">
<div class="row h-100">
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 h-100" id="texto">
<h1 class="text-center hi">Hello...
<link rel="stylesheet" href="./css/homeStyle.css">
</h1>
<div class="div-center underline">
</div>
<p class="text-center intro"> This is the view of HOME</p>
<!--<p class="text-center nombre"> Miguel Espeso </p>-->
</div>
</div>
</div>
</div>
</div>
sidebar.php
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<img src="./img/gato-2.png" class="rounded-circle" alt="logo">
<h3 class="tituloPanel"> Panel Administrador </h3>
<strong>PA</strong>
</div>
<ul class="list-unstyled components">
<li class="usuarioColor active ">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="sidebaruser dropdown-toggle">
<i class="fas fa-user"></i>
Usuarios
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Nuevo
</li>
<li>
Lista
</li>
<li>
Buscar
</li>
</ul>
</li>
<li class="categoriasColor">
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Categorias
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Nuevo
</li>
<li>
Lista
</li>
<li>
Buscar
</li>
</ul>
</li>
<li class="productosColor">
<a href="#pageProductos" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-cubes"></i>
Productos
</a>
<ul class="collapse list-unstyled" id="pageProductos">
Nuevo
Lista
Por Categoria
Buscar
</ul>
</li>
<!-- <li>
<a href="#">
<i class="fas fa-briefcase"></i>
Detalles
</a>
</li>
<li class="alertasColor">
<a href="#">
<i class="fas fa-image"></i>
Alertas
</a>
</li>
<li>
<a href="#">
<i class="fas fa-question"></i>
FAQ
</a>
</li>
<li>
<a href="#">
<i class="fas fa-paper-plane"></i>
Contacto
</a>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>
Muestra
</li>
<li>
Muestras
</li>
</ul> -->
</nav>
<!-- Nav Bar -->
<?php include "inc/script.php"; ?>
index.php
<?php require "./inc/sesionStart.php" ?>
<!DOCTYPE html>
<html lang="es">
<head>
<?php include "./inc/headsidebar.php" ?>
<title>Administrador de inventario</title>
</head>
<body>
<?php
if (!isset($_GET['vista']) || $_GET['vista'] == "") {
$_GET['vista'] = "login";
}
if (is_file("./vistas/" . $_GET['vista'] . ".php") && $_GET['vista'] != "login" && $_GET['vista'] != "404") {
#include "./inc/navbar.php";
?>
<div class="row h-100" style="margin:0 !important">
<div class="col-auto h-100" style="padding: 0px !important; margin: 0px !important;">
<?php include "./inc/sidebar.php";?>
</div>
<div class="col h-100" style="padding: 0px !important; margin: 0px !important;">
<?php include "./vistas/" . $_GET['vista'] . ".php";?>
</div>
</div>
<?php
#include "./inc/script.php";
} else {
if ($_GET['vista'] == "login") {
include "./vistas/login.php";
} else {
include "./vistas/404.php";
}
}
?>
</body>
</html>

using element of one div from another div using javascript

I have a file, and there is a fragment for navbar. In the navbar, we have listItems, and based on the click of those listItems, we plan to open another subnavigationbar below it.
To achieve this, I have the following code:
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<body>
<div>
<div th:fragment="navbar">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<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>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><a id="movies"
th:class="(${#httpServletRequest.requestURI}=='/movies') ? 'nav-link active' : 'nav-link'"
href="#subNavbarId">Movies</a></li> <!-- href fails -->
<li class="nav-item"><a id="hr"
th:class="(${#httpServletRequest.requestURI}=='/info') ? 'nav-link active' : 'nav-link'"
href="/info">Info</a></li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right">
<div sec:authorize="isAuthenticated()">
Logged in: <span sec:authentication="name"></span>
</div>
</ul>
</nav>
<script type="text/javascript">
var projects = document.getElementById("movies");
var subNavBar = document.getElementById("subNavbarId"); //Failure
projects.addEventListener("click", function() {
subNavBar.style = "display:block;"
})
</script>
</div>
<div class = "subNavClass" id="subNavbarId" th:fragment="subnavbar" style="display: none;">
<nav id="navbar-nav ms-auto" class="navbar navbar-expand-lg"
style="background-color: #F5F5F5;">
<div class="collapse navbar-collapse">
<a class="navbar-brand px-5"></a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item"><a id="subnavbar-content"
href="/movieList"> movieList</a></li>
</ul>
</div>
</nav>
<script type="text/javascript">
var subNavBar = document.getElementById("subNavbarId");
subNavBar.addEventListener("mouseleave", function() {
subNavBar.style = "display:none;"
})
</script>
</div>
</div>
</body>
</html>
I want to have a scenario, where I click the "movie" on the navbar, and I get a subnavbar displayed with movieList. Similarly, when I click somewhere outside, the subnavbar fades away.
Guide me here.
PS: total noob

your subNavBar.style = "display:block;" looks wrong.
it should be subNavBar.style.display = "block";

According to the Bootstrap documentation, you can use a dropdown :
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">An action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
By the way, avoid changing css with javascript. You can make a css class and toggle it. Because you use Bootstrap, you can toggle the d-none provided class :
subNavBar.classList.toggle("d-none");

Reference error: variable not defined (in navbar)

I can't get my navbar to show an edit profile dropdown after logged in - receiving an error as soon as a log in as an artist (artists=user).
Error:
ReferenceError: /Users/myfiles/app/views/layouts/boilerplate.ejs:22
20|
21| <body class="d-flex flex-column vh-100">
>> 22| <%- include('../partials/navbar') %>
23|
24| <main class="container mt-5">
25| <%- include('../partials/flash') %>
/Users/myfiles/app/views/partials/navbar.ejs:21
19| </a>
20| <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
>> 21| <li><a class="dropdown-item" href="/artists/<%=artist._id%>/edit">Edit profile</a></li>
22| <li><a class="dropdown-item" href="/logout">Logout</a></li>
23| </ul>
24| </li>
boilerplate.ejs file w/ navbar partial
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boilerplate!!</title>
</head>
<body class="d-flex flex-column vh-100">
<%- include('../partials/navbar') %>
<main class="container mt-5">
<%- include('../partials/flash') %>
<%- body %>
</main>
<%- include('../partials/footer') %>
</body>
</html>
Partial for navbar.ejs
<nav class="navbar sticky-top navbar-expand-lg navbar-dark" style="background-color: #00305a;">
<div class="container-fluid">
<a class="navbar-brand" href="#">Company</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link active" href="/events">Events</a>
<a class="nav-link active" href="/artists">Artists</a>
</div>
<div class="navbar-nav ms-auto">
<% if(currentUser) {%>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="/artists/<%=artist.id%>/edit">Edit profile</a></li>
<li><a class="dropdown-item" href="/logout">Logout</a></li>
</ul>
</li>
<a class="nav-link active" href="/logout">Logout</a>
<% } else { %>
<a class="nav-link active" href="/login">Login</a>
<a class="nav-link active" href="/artists/new">Sign Up</a>
<% } %>
</div>
</div>
</div>
</nav>
Global variables from app.js
app.use((req, res, next) => {
console.log(req.session);
res.locals.currentUser = req.user;
res.locals.success = req.flash('success');
res.locals.error = req.flash('error');
next();
})
How do I structure my navbar ejs so I can allow logged-in artists to "edit" their user profile? I'm thinking it has something to do with my global variables on app.js so I've included a snippet of the file.

Figured it out-- I had to change the name of the ejs variable because I had already defined currentUser:
From:
href="/artists/<%=artist.id%>/edit">Edit profile
To:
href="/artists/<%=currentUser.id%>/edit">Edit profile
The artist's id had already been passed into currentUser so I was able to pull it out of there.

how can I pull the navbar on left side and fixed on it using bootstrap

hello there I want to try on this like the gallery button and user side dropdown on the left side and its not show on mobile mode when the screen minimize but show on the top like ackta ltd the complete code is on snippet but i try many time to do but its can't solved to me please help me in this query if you people want pic i will upload the pic for you but i think the snippet code is enough for you pepole
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap All in One Navbar</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merienda+One">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="assets/css/headerstyle.css" rel="stylesheet">
<script>
function myFunction() {
var x = document.getElementById("navbarCollapse");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "display";
}
}
</script>
</head>
<body>
<nav class="navbar navbar-expand-xl navbar-light bg-light">
<i class="fa fa-cube"></i>Ackta LTD UK</b>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse" id="navbarCollapse" onclick="myFunction()">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<div class="navbar-nav">
<a class="nav-link " href="index.php"><i class="fa fa-home"></i> Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="index.php"><i class="fa fa-upload"></i> Upload</a>
<div class="nav-item dropdown">
<i class="fa fa-user-circle"></i> About
<div class="dropdown-menu">
<a class="dropdown-item" href="privacypolicy.php">Privacy Policy</a>
<a class="dropdown-item" href="termofuse.php">Terms & Use</a>
<a class="dropdown-item" href="team.php">Teams</a>
<a class="dropdown-item" href="contact.php">Contact Us</a>
</div>
</div>
</div>
<div class="d-none d-lg-block ">
<div class="navbar-nav ml-auto ">
<div class=" container pr-5 ">
<button type="button" class="btn btn-outline-primary btn-sm btn-block "><i class="fa fa-file-image-o" aria-hidden="true"></i> Gallery</button>
</div>
<div class="nav-item dropdown pr-5">
<img src="assets/i/face.png" class="avatar" alt="Avatar"> Paula Wilson <b class="caret"></b>
<div class="dropdown-menu">
<i class="fa fa-user-o"></i> Profile</a>
<i class="fa fa-calendar-o"></i> Calendar</a>
<i class="fa fa-sliders"></i> Settings</a>
<div class="dropdown-divider"></div>
<i class="material-icons"></i> Logout</a>
</div>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>

I cant figure out firebase authentication [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am trying to build my own workout tracking tool. I have built my front end with bootstrap studio. I am figuring out how to use firebase and its authentication tool. Its working but only in a plain html file. The one I created with BSStudio doesnt want to work. I hope somebody can help me out.
First I used a js file for every page, but I handle it now from just one file.
Its called backend.js. :
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
// User is signed in.
alert("logged in")
document.getElementById("user_div").style.display = "block";
document.getElementById("login_div").style.display = "none";
document.getElementById("logoutsucceed").style.display = "none";
document.getElementById("logoutfailed").style.display = "block";
var user = firebase.auth().currentUser;
if (user != null) {
var email_id = user.email;
document.getElementById("user_para").innerHTML = "Welcome User : " + email_id;
}
} else {
// No user is signed in.
alert("logged out")
document.getElementById("user_div").style.display = "none";
document.getElementById("login_div").style.display = "block";
document.getElementById("logoutsucceed").style.display = "block";
document.getElementById("logoutfailed").style.display = "none";
}
});
document.getElementById('btlogin').onclick = function () {
login();
};
document.getElementById('btlogout').onclick = function () {
logout();
};
function login() {
alert("try to login")
var userEmail = document.getElementById("email_field").value;
var userPass = document.getElementById("password_field").value;
firebase.auth().signInWithEmailAndPassword(userEmail, userPass).catch(function (error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
alert("Error : " + errorMessage);
// ...
});
}
function logout() {
alert("logged out")
firebase.auth().signOut();
href = "index.html"
}
function register() {
alert("register command")
}
Here is my working page:
<html>
<head>
<title>Firebase Login</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="login_div" class="main-div">
<h3>Firebase Web login Example</h3>
<input type="email" placeholder="Email..." id="email_field" />
<input type="password" placeholder="Password..." id="password_field" />
<button id="btlogin">Login to Account</button>
</div>
<button onclick="window.location.href = 'homepage.html';">Hier klicken</button>
<div>
</div>
<div id="user_div" class="loggedin-div">
<h3>Welcome User</h3>
<p id="user_para">Welcome to Firebase web login Example. You're currently logged in.</p>
<button id="btlogout">Logout</button>
</div>
<script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
[config from firebase]
};
firebase.initializeApp(config);
</script>
<script src="assets/js/backend.js">
</script>
</body>
</html>
And my bsstudio created page (which doesnt work). I have 100% put the same firebase config, so thats not the problem:
<!DOCTYPE html>
<html>
<head>
login()
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Login - FitBy</title>
<meta name="description" content="A gym website by Kevin Kumar. Providing various gym tools from workout tracking to informative blogs.">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Actor">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css">
<link rel="stylesheet" href="assets/fonts/simple-line-icons.min.css">
<link rel="stylesheet" href="assets/css/beautiful-danger-alert.css">
<link rel="stylesheet" href="assets/css/beautiful-success-alert.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
<link rel="stylesheet" href="assets/css/Profile-Card.css">
<link rel="stylesheet" href="assets/css/smoothproducts.css">
<link rel="stylesheet" href="assets/css/untitled.css">
</head>
<body>
<nav class="navbar navbar-light navbar-expand-lg fixed-top bg-white clean-navbar" style="margin-bottom: 0;">
<div class="container"><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1" style="float: right;"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="text-left align-self-start order-1" style="position: absolute;float: left;margin-bottom: 0px;"></div>
<div class="collapse navbar-collapse" id="navcol-1"><span class="navbar-text" style="min-width: 220px;"><a class="navbar-brand logo" href="#" style="margin-right: 0;">FitBy</a><a class="navbar-brand logo" href="#"
style="transform: scale(-1,1);margin-right: 0;margin-left: 0px;padding: 0;font-family: Actor, sans-serif;font-size: 30px;">K</a><a class="navbar-brand logo" href="#"
style="margin-right: 0;margin-left: -2px;font-family: Actor, sans-serif;font-size: 30px;">K</a><a class="navbar-brand logo" href="#" style="margin-left: 2;padding: 0;margin-right: 0;">nowledge</a></span>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="/features.html">Features</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="/forum.html">Forum</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="/blog-post-list.html">Blog</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="/about-us.html">About Us</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="/contact-us.html">Contact Us</a></li>
<li class="nav-item dropdown show"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="true" href="#">my account</a>
<div class="dropdown-menu show" role="menu">
<div class="col"><img id="userprofileimg" src="assets/img/scenery/image1.jpg" style="margin: 0;padding: 0px;background-position: 100%;margin-left: auto;margin-right: auto;"></div>
<h6 class="dropdown-header" role="presentation">Overview</h6><a class="dropdown-item" role="presentation" href="/userpage.html">My Information</a><a class="dropdown-item #lblogout" role="presentation"
href="/login.html">Login</a><a class="dropdown-item" role="presentation" id="lbregister" href="registration.html">Register</a><a class="dropdown-item" role="presentation" id="lbLogout" href="logout.html">Logout</a>
<h6 class="dropdown-header" role="presentation">Tracking</h6><a class="dropdown-item" role="presentation" href="tracking-dashboard.html">Tracking Dashboard</a><a class="dropdown-item" role="presentation" href="#">Create
Workout</a><a class="dropdown-item" role="presentation" href="#">Excercises</a>
<h6 class="dropdown-header" role="presentation">Blog</h6><a class="dropdown-item" role="presentation" href="#">My Posts</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<main class="page login-page">
<section class="clean-block clean-form dark">
<div class="container">
<div class="block-heading">
<h2 class="text-info">Log In</h2>
<p>Welcome!</p>
</div>
<div id="login_div">
<form>
<div class="form-group"><label for="email">Email</label><input class="form-control item" type="email" id="email"></div>
<div class="form-group"><label for="password">Password</label><input class="form-control" type="password" id="password"></div>
<div class="form-group">
<div class="form-check"><input class="form-check-input" type="checkbox" id="checkbox"><label class="form-check-label" for="checkbox">Remember me</label></div>
</div><button class="btn btn-primary btn-block" id="btlogin" type="button">Log In</button>
</form>
</div>
</div>
<div id="user_div">
<div class="alert alert-success beautiful" role="alert" id="succeed"><Strong>Success!</Strong> You are logged in! To add more details just open your Overview (link)</div>
</div>
</section>
</main>
<footer class="page-footer dark">
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>Get started</h5>
<ul>
<li>Home</li>
<li>Sign up</li>
</ul>
</div>
<div class="col-sm-3">
<h5>About us</h5>
<ul>
<li>Company Information</li>
<li>Contact us</li>
<li>Reviews</li>
</ul>
</div>
<div class="col-sm-3">
<h5>Support</h5>
<ul>
<li>FAQ</li>
<li>Help desk</li>
<li>Forums</li>
</ul>
</div>
<div class="col-sm-3">
<h5>Legal</h5>
<ul>
<li>Terms of Service</li>
<li>Terms of Use</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<p>© 2020 Copyright Text</p>
</div>
</footer>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/chart.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script src="assets/js/smoothproducts.min.js"></script>
<script src="assets/js/theme.js"></script>
<script src="assets/js/backend.js"></script>
</body>
</html>

The input fields - email and password, have different id in HTML and bsstudio.
In backend.js change var userEmail = document.getElementById("email").value and var userPass = document.getElementById("password").value; and run with bsstudio. Ideally it should work. If it doesn't do post your output( even if it gives error).

Categories