Traversing the DOM. How to get onclick value from a li - javascript

I am really stuck. I have tried lots of things but none are working. I am trying to store the value of onclick event from a . I think I am getting my parent & child nodes confused but have spent so long on it I am now super confused and now completely stuck and nothing is making sense.
here is my code so far
/* random word generator */
function pickWord() {
let words = [
'dog',
'horse',
'kitchen',
'javascript',
'computer',
'programming',
'chair',
'towel',
'music',
'zoo',
'oxygen'
];
return words[Math.floor(Math.random() * words.length)];
}
/* display word.length when start button is clicked */
const startButton = document.getElementById('game-button');
startButton.onclick = () => {
const word = pickWord();
const answerArray = displayWord(word);
document.getElementById('game-word').innerHTML = answerArray;
return answerArray;
}
function displayWord(word) {
const answerArray = [];
for (let i = 0; i < word.length; i++) {
answerArray[i] = "_";
}
return answerArray.join(" ");
}
const getGuess = document.getElementsByClassName('game-letters');
getGuess.onclick = () => {
const input = getGuess.value // stuck here
}
console.log(getGuess)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hangman</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/typed.js#2.0.9"></script>
<script type="text/javascript" src="script.js" async=""></script>
<script type="text/javascript" src="typed.js"></script>
<link href="https://fonts.googleapis.com/css?family=Nova+Flat|Nova+Slim" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-12">
<h1 class="header">H A N G M A N</h1>
<div class="id-strings">
<h3 class="typed-text"><span id="typed"></span></h3>
</div>
<div id="game">
<ul id="game-list">
<li class="game-letters">A</li>
<li class="game-letters">B</li>
<li class="game-letters">C</li>
<li class="game-letters">D</li>
<li class="game-letters">E</li>
<li class="game-letters">F</li>
<li class="game-letters">G</li>
<li class="game-letters">H</li>
<li class="game-letters">I</li>
<li class="game-letters">J</li>
<li class="game-letters">K</li>
<li class="game-letters">L</li>
<li class="game-letters">M</li>
<li class="game-letters">N</li>
<li class="game-letters">O</li>
<li class="game-letters">P</li>
<li class="game-letters">Q</li>
<li class="game-letters">R</li>
<li class="game-letters">S</li>
<li class="game-letters">T</li>
<li class="game-letters">U</li>
<li class="game-letters">V</li>
<li class="game-letters">W</li>
<li class="game-letters">X</li>
<li class="game-letters">Y</li>
<li class="game-letters">Z</li>
</ul>
</div>
<div id="game-word"></div>
<div id="game-begin">
<button id="game-button">Start Game</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>


You need to attach event listener to every specific instance of game-letters class
Also, you cannot use getGuess as value, you have to pass that object as this argument
Example: instead doing this
const getGuess = document.getElementsByClassName('game-letters');
getGuess.onclick = () => {
const input = getGuess.value // stuck here
}
Do this:
for (let i = 0; i < getGuess.length; i++) {
getGuess[i].addEventListener("click", (this) => {
const inputValue = this.textContent;
console.log(inputValue);
});
}


Thefunction currently alerts but you can use as you want
function theFunction(e)
{ alert(e.target.innerHTML);}
<head>
<meta charset="UTF-8">
<title>Hangman</title>
<link rel="stylesheet" =
</head>
<body onclick="theFunction(event)">
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-12">
<h1 class="header">H A N G M A N</h1>
<div class="id-strings">
<h3 class="typed-text"><span id="typed"></span></h3>
</div>
<div id="game">
<ul id="game-list">
<li class="game-letters">A</li>
<li class="game-letters">B</li>
<li class="game-letters">C</li>
<li class="game-letters">D</li>
<li class="game-letters">E</li>
<li class="game-letters">F</li>
<li class="game-letters">G</li>
<li class="game-letters">H</li>
<li class="game-letters">I</li>
<li class="game-letters">J</li>
<li class="game-letters">K</li>
<li class="game-letters">L</li>
<li class="game-letters">M</li>
<li class="game-letters">N</li>
<li class="game-letters">O</li>
<li class="game-letters">P</li>
<li class="game-letters">Q</li>
<li class="game-letters">R</li>
<li class="game-letters">S</li>
<li class="game-letters">T</li>
<li class="game-letters">U</li>
<li class="game-letters">V</li>
<li class="game-letters">W</li>
<li class="game-letters">X</li>
<li class="game-letters">Y</li>
<li class="game-letters">Z</li>
</ul>
</div>
<div id="game-word"></div>
</div>
</div>
</div>
</div>
</body>
</html>

Related

How to get information id of outer container from event listener set on inner list items

I am trying to learn about javascript so this might be quite a noob question. I would appreciate if someone with more experience could see what I am attempting and correct any problems I have with the approach, so if this looks weird please let me know!
I have a side navigation bar that divides into different groups. Within each group there is an ul that contains some li, which themselves contain an a with two p tags nested. The reason for this nesting is that I want to have each side nav "button" look like it has a label (the first p) on the left and a number (the second p) on the right (like a number of notifications or something).
I want to add an event listener to each li.nav-task-list so that if that li or any of its descendants is clicked then it selects that li and gives access to the "group" that it belongs to (defined by the id in the div that is the grandparent to the selected li). I had problems with this because the e.target in the click event would return any of the li, a, or p elements.
I have pasted my solution and it seems to do what I want. But the problem is that this took a lot of effort and testing compared to the examples of event listeners that I was reading from, and this makes me think I have either misunderstood something or overcomplicated it somehow. This also seems like such a common thing to do, so I want to know if I have overlooked something.
Here is my code:
const sideBar = document.getElementById('sidebar');
const navTaskLists = document.getElementsByClassName('nav-task-list');
Array.from(navTaskLists).forEach(function(e) {
e.addEventListener('click', function() {
console.log(e.querySelector('p.label').innerText);
if (e.classList.contains('active')) {
return;
}
removeAllActive(navTaskLists);
let parentLi = e.closest('li.nav-task-list')
parentLi.classList.toggle('active');
let parentGroup = e.closest('div.nav-task-list-group')
if (parentGroup.id != '') {
console.log(`clicked in the ${parentGroup.id} group.`)
}
});
})
function removeAllActive(elements) {
// Loops over all elements and removes active class
Array.from(elements).forEach(function(e) {
e.classList.remove('active');
})
}
#sidebar {
min-width: 300px;
max-width: 300px;
}
.nav-group-header {
cursor: pointer;
}
.nav-task-list:hover {
background-color: #eee;
}
.nav-task-list.active {
background-color: #bed;
}
<!DOCTYPE html>
<html lang="en">
<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">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col border" id="sidebar">
<div class="nav-task-list-group" id="group-one">
<ul class="nav flex-column">
<li class="nav-item nav-task-list">
<a class="nav-link flex-grow-1 d-flex" href="#" id="today-task-list">
<p class="flex-grow-1 mb-0 label">G1 Item 1</p>
<p class="num-tasks mb-0 fs-6">3</p>
</a>
</li>
<li class="nav-item nav-task-list">
<a class="nav-link flex-grow-1 d-flex" href="#" id="upcoming-task-list">
<p class="flex-grow-1 mb-0 label">G1 Item 2</p>
<p class="num-tasks mb-0 fs-6">21</p>
</a>
</li>
</ul>
</div>
<hr>
<div class="nav-task-list-group" id="group-two">
<ul class="nav flex-column">
<li class="nav-item nav-task-list">
<a class="nav-link flex-grow-1 d-flex" href="#" id="today-task-list">
<p class="flex-grow-1 mb-0 label">G2 Item 1</p>
<p class="num-tasks mb-0 fs-6">3</p>
</a>
</li>
<li class="nav-item nav-task-list">
<a class="nav-link flex-grow-1 d-flex" href="#" id="upcoming-task-list">
<p class="flex-grow-1 mb-0 label">G2 Item 2</p>
<p class="num-tasks mb-0 fs-6">21</p>
</a>
</li>
</ul>
</div>
</div>
<div class="col border">
Stuff
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>

User Frontend Selection That Loads Images From Database With Django

I have a drop down bar with a multi selection tool. A user picks from titles of graphs stored in a model for the graphs they want to display. How can I use those selections to display these graphs? I am using Ajax to send the data to the backend. From that data I created a new context_dict full of the model objects we want displayed. I want to either display in the same template or link to another template that can use this context dict. I do not know the best way to do this. Here is some of my code below.
Models:
from django.db import models
class ChartPrac(models.Model):
title = models.CharField(max_length=256)
chart = models.ImageField()
def __str__(self):
return self.title
Views:
def querier(request):
if request.method == 'POST':
options_arr = request.POST.get('optionsArr')
options = options_arr.split(':')
options = options[1:]
print(options)
context_arr = []
context_graphs = {}
i = 0
for elements in options:
charts_to_display = ChartPrac.objects.get(title=elements)
context_arr.append(charts_to_display)
i += 1
context_graphs['titles'] = context_arr
return HttpResponse(options_arr)
else:
graph_titles = ChartPrac.objects.all()
context_dict = {'titles': graph_titles}
print(context_dict)
print(type(context_dict['titles']))
return render(request, 'graph_querier/base.html', context=context_dict)
Urls:
from django.urls import path
from graph_querier import views
app_name = 'graph_querier'
urlpatterns = [
path('', views.index, name='index'),
path('querier/', views.querier, name='querier'),
# path('graph/', views.graph, name='graph'),
]
Template:
<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Marketing Querier</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006288/BBBootstrap/choices.min.css?version=7.0.0">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006273/BBBootstrap/choices.min.js?version=7.0.0"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="{% static 'graph_querier\querier.css' %}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: rgba(0,96,155,255)";>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{% url 'main_dash:main_dash' %}">Main Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Marketing Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Sales Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Input</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Input</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Input</a>
</li>
</ul>
</div>
</nav>
<div id="title">
<h1 id="graph-querier-text">Graph Querier</h1>
</div>
<div class="row d-flex justify-content-center mt-100" id='search'>
<div class="col-md-6"> <select class="select-option" id="choices-multiple-remove-button" placeholder="Select up to 10 Graphs" multiple>
{% for graphs in titles %}
<option class="option-rend" value={{ graphs.title }}>{{ graphs.title }}</option>
{% endfor %}
</select> </div>
</div>
<script>
$(document).ready(function(){
var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
removeItemButton: true,
maxItemCount:10,
searchResultLimit:1000,
renderChoiceLimit:1000
});
});
</script>
<script src="{% static '\graph_querier\javascript\base.js' %}"></script>
<div id='render-graphs'>
<button type="button" class="btn btn-primary btn-lg" onclick='rendGraphs();'>Render Graphs</button>
{% csrf_token %}
</div>
</body>
</html>
JS:
function rendGraphs(){
var select = document.getElementById('choices-multiple-remove-button');
var csrf = $("input[name=csrfmiddlewaretoken]").val();
var optionsArr = [];
for (var x = 0; x < select.length; x++){
var temp = select.options[x].text;
optionsArr.push(temp);
}
var stringOptions = ''
for (var i= 0; i < optionsArr.length; i++){
var stringOptions = stringOptions.concat(":" + String(optionsArr[i]));
}
$.ajax({
url: '/query/querier/',
type: 'POST',
data: {'optionsArr': stringOptions,
'csrfmiddlewaretoken': csrf
}
}).done(function(response){
console.log(response)
});
}

Javascript submenu duplicated

I'm doing a javascript vertical submenu, I'm using yui tools but the submenu is duplicated, I don't know what part of code is wrong.
YAHOO.util.Event.onContentReady("menu_vertical", function() {
var elMenu = new YAHOO.widget.Menu("menu_vertical", {
width: '550px'
});
elMenu.render();
elMenu.show();
});
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/
build/menu/assets/skins/sam/menu.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/
yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/
container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/menu/
menu-min.js"></script>
<div id="menu_vertical" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">MENU1
</li>
<li class="yuimenuitem">MENU2
</li>
<li class="yuimenuitem">MENU3
<div id="consectetuer" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">SUBMENU1
</li>
<li class="yuimenuitem">SUBMENU2
</li>
<li class="yuimenuitem">SUBMENU3
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">MENU4
</li>
</ul>

In your JSFiddle you linked, your href and src tags have spaces in the path and these link and script tags must not be embedded inside of a script since they are raw HTML. Here is an updated JSFiddle, but you still have issues.
You are attempting to reference plain http over an https connection, this is not safe, and JSFiddle and Stackoverflow will not allow you to do such a thing.
Other than that, your code looks fine. The Menu Family: Multi-tiered Menu From Markup example that I found using Google may be a good place to check if your code is correct. Here is the "clean page" of that example.
YAHOO.util.Event.onContentReady("menu_vertical", function () {
var elMenu = new YAHOO.widget.Menu("menu_vertical", {
width: '550px'
});
elMenu.render();
elMenu.show();
});
<script src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.3.0/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.3.0/build/menu/menu-min.js"></script>
<link href="http://yui.yahooapis.com/2.3.0/build/menu/assets/skins/sam/menu.css" rel="stylesheet"/>
<div id="menu_vertical" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">MENU1</li>
<li class="yuimenuitem">MENU2</li>
<li class="yuimenuitem">MENU3
<div id="consectetuer" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">SUBMENU1</li>
<li class="yuimenuitem">SUBMENU2</li>
<li class="yuimenuitem">SUBMENU3 </li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">MENU4</li>
</ul>
</div>
</div>

JavaScript to JQuery, Converting a Sorting Gallery

I need to convert this working filter gallery from JavaScript JQuery. I'm a complete novice in both these languages so I was hoping someone could give me a little help. Below is the JavaScript that will have to be converted,
(function() {
var filterButtons = document.querySelectorAll(".filterList a");
imageNodes = document.querySelectorAll("img");
console.log(filterButtons, imageNodes);
function staggerImage() {
TweenMax.staggerFromTo(imageNodes, 0.7, {opacity:0}, {opacity:1}, 0.3);
}
function doImageSwitch(event) {
console.log("fire");
console.log(event.target.parentNode.id);
for(i=0; i<imageNodes.length; i++) {
imageNodes[i].style.display = "inline";
if(!imageNodes[i].classList.contains(event.target.parentNode.id)) {
imageNodes[i].style.display = "none";
}
}
staggerImage();
}
[].forEach.call(filterButtons, function(el) {
el.addEventListener("click", doImageSwitch, false);
});
staggerImage();
})();
And this is the HTML code I have set up,
<?php
include './includes/functions.php';
$conn = connect($config);
$result = mysqli_query($conn, "SELECT * FROM main_content");
//echo mysqli_num_rows($result); ?>
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Filter Gallery</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script>
</head>
<body>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>Something</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
Right Button with Dropdown
<ul class="dropdown filterList">
<li id="flower">Flower </li>
<li id="puppy" >Puppy </li>
<li id="kitten" >Kitty </li>
</ul>
</li>
</ul>
</section>
</nav>
<div class="row">
<div class="small-12 columns text-center">
<div class="images">
<?php
while($row = $result -> fetch_assoc()) {
echo "<img class=\"{$row['img_class']}
img-responsive\" src=\"img/{$row['img_src']}\"
alt=\"{$row['img_alt']}\">";
}
?>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<script src="js/myScript.js"></script>
</body>
</html>
Any help would be greatly appreciated. Thank you!

Did you write the javascript code yourself? If so it should not be a problem finding the answer. StackOverflow is as said not a coding service. I can try to help you, but I will not be wasting time on this question if it's for homework or some programming job ;)
If you first try to convert the code, I will be happy to help you (try).
the following uses an html structure that is presumably the same as your php echo output.
(function() {
// Selecting all of the img tags within the document that have to be changed
var imageNodes = $(".images img");
// TweenMax syntax stays the same
function staggerImage() {
TweenMax.staggerFromTo(imageNodes, 0.7, {opacity:0}, {opacity:1}, 0.3);
}
$(".filterList a").on("click", function(e) {
console.log("fire");
// parent() - http://api.jquery.com/parent/
//console.log('This: %o - Parent - %o - ParentId - %o', $(this), $(this).parent(), $(this).parent().attr("id"));
var parentId = $(this).parent().attr("id");
// [parentId] will be used as a scoped variable on the nested anonymous function declared in [.each] below.
// .each([array],func) | [array].each(func) - http://api.jquery.com/jquery.each/
$(imageNodes).each(function(index, value) {
console.log("index: %o | value: %o | parentId: %o", index, value, parentId);
// .hasClass([string]) - http://api.jquery.com/hasclass/
if($(value).hasClass(parentId))
{
$(value).css("display","inline");
} else {
$(value).css("display","none");
}
});
staggerImage();
});
staggerImage();
})();
img {width:5em; height:5em;border:0.1em solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>Something</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
Right Button with Dropdown
<ul class="dropdown filterList">
<li id="flower">Flower </li>
<li id="puppy" >Puppy </li>
<li id="kitten" >Kitty </li>
</ul>
</li>
</ul>
</section>
</nav>
<div class="row">
<div class="small-12 columns text-center">
<div class="images">
<img class="flower img-responsive" src="img/test.png" alt="flower 1" />
<img class="flower img-responsive" src="img/test.png" alt="flower 2" />
<img class="puppy img-responsive" src="img/test.png" alt="puppy 1" />
<img class="flower img-responsive" src="img/test.png" alt="flower 3" />
<img class="kitten img-responsive" src="img/test.png" alt="kitten 1" />
<img class="puppy img-responsive" src="img/test.png" alt="puppy 3" />
</div>
</div>
</div>
jsFiddle: http://jsfiddle.net/1m4LmLhx/1/
pastebin: http://pastebin.com/bfDL5NLU
Note: when you click on the hyperlinks, that we've attached click event handlers to, the viewport is being directed back to the top of the page.. this is usually undesirable, but it seems to be outside of the scope of this question to address that behavior.

javascript for create tabs

I have a function in Javascript like this :
!function($) {
function add_tab(num, name){
var $newDiv = $("<div class='tab-pane' />")
.attr("id", "tab_"+name)
.html("Content " + name);
//.html("<div class='row'>");
$("#graphTabsContent").append($newDiv);
var $newLi = $("<li/>");
if(num==0){
$newLi.attr("class", "active");
}
var $newA = $("<a data-toggle='tab' />")
.attr("href", "#tab_"+name)
.html(name);
$newLi.append($newA);
$("#ul_tabs").append($newLi);
};
function update_graph_tabs(){
$.getJSON("call/json/get_role", {}, function(roles) {
$("#ul_tabs").empty();
$("#graphTabsContent").empty();
$.each(roles, function (key, role){
add_tab(key, role);
});
});
}
// Run
update_graph_tabs();
}(jQuery);
this function get the data from JSON and after it create tabs tabbable, in my HTML like this(http://getbootstrap.com/2.3.2/components.html#navs).
this is my HTML code :
<div class="row">
<div class="span3">
<div class="dropdown">
<select class="selectpicker btn-warning" id="groupe" data-style="btn-primary">
<option value="">Awaiting data...</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="span4"><div id="reportingContainer"></div></div>
<div class="span8">
<div id="dashboard">
<div id="combochart"></div>
<div id="control"></div>
</div>
</div>
</div>
<div class="tabbable" >
<ul id="ul_tabs" class="nav nav-tabs">
</ul>
<div class="tab-content" id="graphTabsContent">
</div>
</div>
Now, I want in every tab it to show me one chart that I code. For example, in my HTML O have this code that create one piechart and one combochart in my page but it is not in my tabs.

This may help you:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Basic Tab Based Navigation Example</title>
<meta name="description" content="Twitter Bootstrap Basic Tab Based Navigation Example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav nav-tabs">
<li class="active">
Home </li>
<li>Tutorials</li>
<li>Practice Editor </li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>
- See more at: http://www.w3resource.com/twitter-bootstrap/nav-tabs-and-pills-tutorial.php#sthash.a9cP7aDC.dpuf
Source: W3Resource

Categories

Resources