First of all, I will paste my whole html code here:
{% extends "base.html" %}
{% block content %}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Postgresqlabfragen -->
</head>
<body>
<div >
<div >
<nav id="sidebarMenu" >
<div >
<ul >
<ul>
<li> <strong>Verfügbare Abfragen:</strong> </li>
</ul>
<li >
<a aria-current="page" href="{{url_for('server.epex')}}">
EPEX
</a>
</li>
<li >
<a aria-current="page" href="{{url_for('server.post')}}">
Show Partner
</a>
</li>
</ul>
</div>
</nav>
<main >
<div >
<h1 >EPEX Strompreise</h1>
<div >
<div >
</div>
<div >
<button type="button" data-bs-toggle="dropdown">
Aktueller Stand
</button>
<ul >
<li><a onclick="loadNewGraph(1)">Aktueller Stand</a></li>
<li><a onclick="loadNewGraph(1)">Letzte Woche</a></li>
<li><a onclick="loadNewGraph(2)">Maximum</a></li>
</ul>
</div>
</div>
</div>
<img id="graph" src="" width="900" height="600" >
<!-- <script src="{{ url_for('static', filename='EPEX_dashboard.js') }}"></script>-->
<script>
function loadNewGraph(id){
let req_url = '/postgresql/epex/get_graph/'
//if (window.location.href.includes("partner")){
// req_url = '/postgresql/partner/get_graph/'
//}
// ajax call to url get_graph, cf.: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
const xhttp = new XMLHttpRequest();
xhttp.open("GET", req_url id, true);
xhttp.send();
xhttp.onload = function(e){
imgurl = document.getElementById('graph')
imgurl.src = '/static/Bilder/new_plot.png' "?ts=" Date.now()
}
}
loadNewGraph(0)
</script>
</body>
{% endblock %}
My problem is that I want to change the button name "Aktueller Stand" with the selected one. In this case I have 3 possible selections:
'
But clicking on them still leaves in the window "Aktueller Stand". I didnt find a satysfying solution on the internet. Can you help me out guys? Here is a photo of my linked Bootstrap Dropdownmenu: https://ibb.co/gbKk53Z "dropdown menu"
CodePudding user response：
Add an id to your button to use it in js. I said lnkButton, you can name anything.
<button type="button" data-bs-toggle="dropdown" id="lnkButton">
Add a text input to your function as the click options text :
function loadNewGraph(id, text){
...
Use this input to change the button text at the very bottom of your function
...
document.getElementById("lnkButton").innerText = text;
}
Add text input values into your link as their button text :
<li><a onclick="loadNewGraph(0, 'Aktueller Stand')">Aktueller Stand</a></li>
<li><a onclick="loadNewGraph(1, 'Letzte Woche')">Letzte Woche</a></li>
<li><a onclick="loadNewGraph(2, 'Maximum')">Maximum</a></li>
Finally add the first button text as the initial value when you call your function:
loadNewGraph(0, 'Aktueller Stand');
CodePudding user response：
You can pass the content of the clicked option as second parameter like this
<div >
<button type="button" data-bs-toggle="dropdown">
Aktueller Stand
</button>
<ul >
<li>
<!-- The keyword this refer to the a tag -->
<a onclick="loadNewGraph(this, 0)">Aktueller Stand</a>
</li>
<li>
<a onclick="loadNewGraph(this, 1)">Letzte Woche</a>
</li>
<li>
<a onclick="loadNewGraph(this, 2)">Maximum</a>
</li>
</ul>
</div>
<img id="graph" src="" width="900" height="600" />
<script>
// Your dropdown button you can give an id for more specificity
let dropdownBtn = document.querySelector(".dropdown button");
function loadNewGraph(el, id) {
// Update label depending on what you click
dropdownBtn.innerText = el.innerText;
//.....
}
// Default option
loadNewGraph(dropdownBtn, 0);
</script>
CodePudding user response：
Thank you Batu.Khan and the rest of community :-).
I post here my solution leaned on the answer of Batu.kha, which is now working wonderful.
{% extends "base.html" %}
{% block content %}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Postgresqlabfragen -->
</head>
<body>
<div >
<div >
<nav id="sidebarMenu" >
<div >
<ul >
<ul>
<li> <strong>Verfügbare Abfragen:</strong> </li>
</ul>
<li >
<a aria-current="page" href="{{url_for('server.epex')}}">
EPEX
</a>
</li>
<li >
<a aria-current="page" href="{{url_for('server.post')}}">
Show Partner
</a>
</li>
</ul>
</div>
</nav>
<main >
<div >
<h1 >EPEX Strompreise</h1>
<div >
<div >
</div>
<div >
<button type="button" data-bs-toggle="dropdown" id="lnkButton">
Aktueller Stand
</button>
<ul >
<li><a onclick="loadNewGraph(0,'Aktueller Stand')">Aktueller Stand</a></li>
<li><a onclick="loadNewGraph(1, 'Letzte Woche')">Letzte Woche</a></li>
<li><a onclick="loadNewGraph(2, 'Maximum')">Maximum</a></li>
</ul>
</div>
</div>
</div>
<img id="graph" src="" width="900" height="600" >
<!-- <script src="{{ url_for('static', filename='EPEX_dashboard.js') }}"></script>-->
<script>
function loadNewGraph(id,text){
let req_url = '/postgresql/epex/get_graph/'
//if (window.location.href.includes("partner")){
// req_url = '/postgresql/partner/get_graph/'
//}
// ajax call to url get_graph, cf.: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
const xhttp = new XMLHttpRequest();
xhttp.open("GET", req_url id, true);
xhttp.send();
xhttp.onload = function(e){
imgurl = document.getElementById('graph')
imgurl.src = '/static/Bilder/new_plot.png' "?ts=" Date.now()
}
document.getElementById("lnkButton").innerText = text;
}
loadNewGraph(0, 'Aktueller Stand')
</script>
</body>
{% endblock %}