I would like set ID to a specific div and show this one after clicking a button.
The ID correspond to the concatenation of a string "#container-" and the ID of the button.
My div is use to show a Highcharts graph. Into the highcharts files, the ID is "#container-example1" or "#container-example2".
To summarize, I would like to have a div which when I click on a specific button makes me appear my specific graph.
Here is my code but it does not work ... do you have any ideas?
Thanks in advance
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello!</title>
<link href="css/bulma.min.css" rel="stylesheet">
<link href="css/fontawesome-all.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar has-shadow">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="#"><img src="./img/logo.png" alt=""></a>
</div>
<div id="navMenu" class="navbar-menu">
<div class="navbar-end">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">About</a>
<div class="navbar-dropdown">
<a href="documentation.html" class="navbar-item"><span class="icon"><i class="fas fa-book"></i></span><span class="name">Documentation</span></a>
</div>
</div>
</div>
</div>
</div>
</nav>
<div class="columns" id="">
<aside class="column is-2 aside hero is-fullheight">
<div>
<div class="main">
<a href="index.html" class="item"><span class="icon"><i class="fas fa-home"></i></span><span class="name">Home</span></a>
</div>
</div>
</aside>
<div class="column is-1 is-fullheight" id="" style="border:1px solid black;">
<section class="section">
<div class="contain" >
<p class="field"><span class="button is-dark is-small" id="example1">Example1</span></p>
<p class="field"><span class="button is-dark is-small" id="example2">Example2</span></p>
</div>
</sec>
</div>
<div class="column is-9 is-fullheight" id="" style="border:1px solid red;">
<section class="section">
<div class="content" style="border:1px solid green;">
<div class="group" id="" style="display: none;"></div>
</div>
</sec>
</div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/example1.js"></script>
<script src="js/example2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.button').on('click', function(){
$('.button').removeClass('is-success');
$(this).addClass('is-success');
$(".group").attr("id","#container-"+this.id).css("display","block");
});
});
</script>
</html>
Your approach is wrong, because you are assigning the id to div after the all JavaScript was loaded, so the files displaying graphs in specific id will not render. There must be ID present while the js/example1.js is loading.
You would either need to load both graphs in hidden divs and show the div on click as example bellow. Or on click load specific script via ajax call.
$(document).on('click', '.button', function(){
$('.button').removeClass('is-success');
$(this).addClass('is-success');
$('#container-'+ this.id).toggle();
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<nav class="navbar has-shadow">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="#"><img src="./img/logo.png" alt=""></a>
</div>
<div id="navMenu" class="navbar-menu">
<div class="navbar-end">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">About</a>
<div class="navbar-dropdown">
<a href="documentation.html" class="navbar-item"><span class="icon"><i class="fas fa-book"></i></span><span class="name">Documentation</span></a>
</div>
</div>
</div>
</div>
</div>
</nav>
<div class="columns" id="">
<aside class="column is-2 aside hero is-fullheight">
<div>
<div class="main">
<a href="index.html" class="item"><span class="icon"><i class="fas fa-home"></i></span><span class="name">Home</span></a>
</div>
</div>
</aside>
<div class="column is-1 is-fullheight" id="" style="border:1px solid black;">
<section class="section">
<div class="contain" >
<p class="field"><span class="button is-dark is-small" id="example1">Example1</span></p>
<p class="field"><span class="button is-dark is-small" id="example2">Example2</span></p>
</div>
</section>
</div>
<div class="column is-9 is-fullheight" id="" style="border:1px solid red;">
<section class="section">
<div class="content" style="border:1px solid green;">
<div id="container-example1" style="display:none">Loaded Graph 1</div>
<div id="container-example2" style="display:none">Loaded Graph 2</div>
</div>
</section>
</div>
</div>
</body>
For the ajax load of script you could go with something like this, can't test it as I don't have your example files, but it should at least point you right direction.
$(document).on('click', '.button', function() {
$(".group").attr("id", "#container-" + this.id) //add id - must be before script loads/runs
$.getScript('js/' + this.id + '.js') //load script with the same name as id
.done(function() { //if loaded correctly
$('.button').removeClass('is-success');
$(this).addClass('is-success');
$(".group").css("display", "block"); //show chart
})
.fail(function() {
/* do something when loading fails*/
});
})<body>
<nav class="navbar has-shadow">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="#"><img src="./img/logo.png" alt=""></a>
</div>
<div id="navMenu" class="navbar-menu">
<div class="navbar-end">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">About</a>
<div class="navbar-dropdown">
<a href="documentation.html" class="navbar-item"><span class="icon"><i class="fas fa-book"></i></span><span class="name">Documentation</span></a>
</div>
</div>
</div>
</div>
</div>
</nav>
<div class="columns" id="">
<aside class="column is-2 aside hero is-fullheight">
<div>
<div class="main">
<a href="index.html" class="item"><span class="icon"><i class="fas fa-home"></i></span><span class="name">Home</span></a>
</div>
</div>
</aside>
<div class="column is-1 is-fullheight" id="" style="border:1px solid black;">
<section class="section">
<div class="contain">
<p class="field"><span class="button is-dark is-small" id="example1">Example1</span></p>
<p class="field"><span class="button is-dark is-small" id="example2">Example2</span></p>
</div>
</section>
</div>
<div class="column is-9 is-fullheight" id="" style="border:1px solid red;">
<section class="section">
<div class="content" style="border:1px solid green;">
<div class="group" id="" style="display: none;"></div>
</div>
</section>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>