I need to update the page content when item in a Bootstrap sidebar is clicked. All examples I find are just showing how to create a responsive sidebar but ends there. E.g. following this tutorial only gets the boilerplate up.
What I want is to have each of the items in the sidebar to load a section to the right of the sidebar with a new div. The way I do it now is with JavaScript.
window.addEventListener("hashchange", (event) => {
let allPages = [
"#network",
"#tally",
"#mesh",
"#admin",
];
allPages.splice(allPages.indexOf(window.location.hash), 1);
$( window.location.hash ).removeClass("d-none");
allPages.forEach(item => {
$( item ).addClass("d-none");
});
$("#pageTitle").html(window.location.hash.replace("#", ""));
});
But it must be a better way of doing it. Also, the selected item in the sidebar does not update....
Edited after comment:
Basically i just copied the link code straight off, changed some of the links et.c. Problem is in the <main> tag there , how to change the content. My approach is to hide/show the divs using bootstrap classes, but there must be a better way. And the sidebars active item does not update when clicking it, of course since I have not programed it to do that, but how do I do that :) .
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">dashboard</a>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#network">
<span data-feather="globe"></span>
Network <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tally">
<span data-feather="sun"></span>
Tally
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#board">
<span data-feather="hard-drive"></span>
Board
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mesh">
<span data-feather="share-2"></span>
Mesh
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#admin">
<span data-feather="user"></span>
Admin
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Saved configurations</span>
<a class="d-flex align-items-center text-muted" href="#">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
example
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 id="pageTitle" class="h2">Network</h1>
</div>
<div id="network" class="justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
<form action="/network">
<div class="form-group">
<label for="ssid">WiFi SSID:</label>
<input type="text" class="form-control" required id="ssid" name="ssid" value="%WIFI_SSID%" list="foundWifis">
<datalist id="foundWifis">
%FOUND_WIFI_NETWORKS%
</datalist>
</div>
<div class="form-group">
<label for="wpwd">WiFi Password:</label>
<input type="password" class="form-control" required id="wpwd" value="%WIFI_PWD%" name="wpwd">
</div>
<div class="form-group">
<label for="manual">Manual configuration</label>
<input type="checkbox" id="manual" name="Manual" %MANUAL_CFG% onclick="disableUnused()"></p>
<div id="manualCfg">
<label for="tid">IP</label>
<input type="text" minlength="7" maxlength="15" required pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" id="tip" name="tip" value="%TALLY_IP%">
<label for="tnmid">netmask:</label>
<input type="text" minlength="7" maxlength="15" required pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" id="tnm" name="tnm" value="%TALLY_NETMASK%">
</div>
</div>
<button type="submit" class="btn btn-primary">Update</button>
</form>
</div>
<div id="tally" class="d-none justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
<form action="/tally">
<div class="form-group">
<label for="gsip">Target IP</label>
<input type="text" class="form-control" minlength="7" maxlength="15" required pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" id="gsip" name="gsip" value="%TARGET_IP%">
</div>
<div class="form-group">
<label for="smart">Smart assign</label>
<input type="checkbox" id="smart" %SMART_MODE% name="smart" onclick="disableUnused()">
</div>
<button type="submit" class="btn btn-primary">Update</button>
</form>
</div>
</main>
I need to update the page content when item in a Bootstrap sidebar is clicked. All examples I find are just showing how to create a responsive sidebar but ends there. E.g. following this tutorial only gets the boilerplate up.
What I want is to have each of the items in the sidebar to load a section to the right of the sidebar with a new div. The way I do it now is with JavaScript.
window.addEventListener("hashchange", (event) => {
let allPages = [
"#network",
"#tally",
"#mesh",
"#admin",
];
allPages.splice(allPages.indexOf(window.location.hash), 1);
$( window.location.hash ).removeClass("d-none");
allPages.forEach(item => {
$( item ).addClass("d-none");
});
$("#pageTitle").html(window.location.hash.replace("#", ""));
});
But it must be a better way of doing it. Also, the selected item in the sidebar does not update....
Edited after comment:
Basically i just copied the link code straight off, changed some of the links et.c. Problem is in the <main> tag there , how to change the content. My approach is to hide/show the divs using bootstrap classes, but there must be a better way. And the sidebars active item does not update when clicking it, of course since I have not programed it to do that, but how do I do that :) .
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">dashboard</a>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#network">
<span data-feather="globe"></span>
Network <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tally">
<span data-feather="sun"></span>
Tally
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#board">
<span data-feather="hard-drive"></span>
Board
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mesh">
<span data-feather="share-2"></span>
Mesh
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#admin">
<span data-feather="user"></span>
Admin
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Saved configurations</span>
<a class="d-flex align-items-center text-muted" href="#">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
example
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 id="pageTitle" class="h2">Network</h1>
</div>
<div id="network" class="justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
<form action="/network">
<div class="form-group">
<label for="ssid">WiFi SSID:</label>
<input type="text" class="form-control" required id="ssid" name="ssid" value="%WIFI_SSID%" list="foundWifis">
<datalist id="foundWifis">
%FOUND_WIFI_NETWORKS%
</datalist>
</div>
<div class="form-group">
<label for="wpwd">WiFi Password:</label>
<input type="password" class="form-control" required id="wpwd" value="%WIFI_PWD%" name="wpwd">
</div>
<div class="form-group">
<label for="manual">Manual configuration</label>
<input type="checkbox" id="manual" name="Manual" %MANUAL_CFG% onclick="disableUnused()"></p>
<div id="manualCfg">
<label for="tid">IP</label>
<input type="text" minlength="7" maxlength="15" required pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" id="tip" name="tip" value="%TALLY_IP%">
<label for="tnmid">netmask:</label>
<input type="text" minlength="7" maxlength="15" required pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" id="tnm" name="tnm" value="%TALLY_NETMASK%">
</div>
</div>
<button type="submit" class="btn btn-primary">Update</button>
</form>
</div>
<div id="tally" class="d-none justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
<form action="/tally">
<div class="form-group">
<label for="gsip">Target IP</label>
<input type="text" class="form-control" minlength="7" maxlength="15" required pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" id="gsip" name="gsip" value="%TARGET_IP%">
</div>
<div class="form-group">
<label for="smart">Smart assign</label>
<input type="checkbox" id="smart" %SMART_MODE% name="smart" onclick="disableUnused()">
</div>
<button type="submit" class="btn btn-primary">Update</button>
</form>
</div>
</main>
- Can you provide a bit more code and a demo showing what exactly is not working? What you have looks OK to me on the surface, but since there is no HTML to go along with it, it's hard to tell what is actually happining – Chris Barr Commented Mar 14 at 12:18
- ok, updated with some more info. – Johan Commented Mar 14 at 12:30
- One thing that comes to my mind is the use of multiple template tags in your html code and load them via javascript, if you want to go pure javascript route. Pl see this link for more help: w3schools/tags/tag_template.asp. – SoftwareDveloper Commented Mar 14 at 14:37
- @SoftwareDveloper that’s a nice solution! I guess that you can use id tag in the template so you can use getElementById and don’t have to index them – Johan Commented Mar 14 at 19:34
- @Yogi I gave that a shot , I could not get it to work immediately but it was a very quick try , I will get back to it . This was more in line which what I thought would be doable out of the box with bootstrap . Dividing the areas into different pages might be pretty smart actually, I’m using a VERY rudementary templating engine and the if statements are getting quite many now . It would make the backend code nicer to divide into more pages . Need to look into how to do that – Johan Commented Mar 14 at 19:37
2 Answers
Reset to default 2Bootstrap is a framework for doing layout. It has a couple of loosely associated other features, but it isn't a routing system for a SPAs (see React Router for example). The examples you've found end with the layout part because the actual business of navigating has a lot of different approaches, all of which are out of scope for the thing the tutorials are trying to cover.
In most cases, the best way to change the content in the main section is to use a regular link.
<li class="nav-item">
<a class="nav-link" href="tally.html">
<span data-feather="sun"></span>
Tally
</a>
</li>
And then have the menu portion of the page duplicated in tally.html.
It is simple, it is accessible, it is reliable, and it is search engine friendly.
There are a variety of technologies you can use to do this without copy/pasting by hand, and this answer goes into more detail (including covering approaches like the one you are currently attempting but with a reliable server-based approach underneath).
I copied and pasted your code into a snippet, and then added links to jquery, bootstrap JS and bootstrap CSS. Everything seems to work just fine.
NOTE: Press the full page link when running the snippet. It looks like you haven't yet set up anything to deal with mobile/smaller screens and a menu for that.
window.addEventListener("hashchange", (event) => {
let allPages = [
"#network",
"#tally",
"#mesh",
"#admin",
];
allPages.splice(allPages.indexOf(window.location.hash), 1);
$( window.location.hash ).removeClass("d-none");
allPages.forEach(item => {
$( item ).addClass("d-none");
});
$("#pageTitle").html(window.location.hash.replace("#", ""));
});<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">dashboard</a>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#network">
<span data-feather="globe"></span>
Network <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tally">
<span data-feather="sun"></span>
Tally
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#board">
<span data-feather="hard-drive"></span>
Board
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mesh">
<span data-feather="share-2"></span>
Mesh
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#admin">
<span data-feather="user"></span>
Admin
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Saved configurations</span>
<a class="d-flex align-items-center text-muted" href="#">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
example
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 id="pageTitle" class="h2">Network</h1>
</div>
<div id="network" class="justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
<form action="/network">
<div class="form-group">
<label for="ssid">WiFi SSID:</label>
<input type="text" class="form-control" required id="ssid" name="ssid" value="%WIFI_SSID%" list="foundWifis">
<datalist id="foundWifis">
%FOUND_WIFI_NETWORKS%
</datalist>
</div>
<div class="form-group">
<label for="wpwd">WiFi Password:</label>
<input type="password" class="form-control" required id="wpwd" value="%WIFI_PWD%" name="wpwd">
</div>
<div class="form-group">
<label for="manual">Manual configuration</label>
<input type="checkbox" id="manual" name="Manual" %MANUAL_CFG% onclick="disableUnused()"></p>
<div id="manualCfg">
<label for="tid">IP</label>
<input type="text" minlength="7" maxlength="15" required pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" id="tip" name="tip" value="%TALLY_IP%">
<label for="tnmid">netmask:</label>
<input type="text" minlength="7" maxlength="15" required pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" id="tnm" name="tnm" value="%TALLY_NETMASK%">
</div>
</div>
<button type="submit" class="btn btn-primary">Update</button>
</form>
</div>
<div id="tally" class="d-none justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
<form action="/tally">
<div class="form-group">
<label for="gsip">Target IP</label>
<input type="text" class="form-control" minlength="7" maxlength="15" required pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" id="gsip" name="gsip" value="%TARGET_IP%">
</div>
<div class="form-group">
<label for="smart">Smart assign</label>
<input type="checkbox" id="smart" %SMART_MODE% name="smart" onclick="disableUnused()">
</div>
<button type="submit" class="btn btn-primary">Update</button>
</form>
</div>
</main>