user10705797
Reputation:
Drop-Down links are not showing In HTML table
I Have an HTML table inside which i am creating drop-down in one column which will have two links to go forward or to show something, i have successfully created the drop-down button but the drop-down links are not showing.
please refer to the snippet
var currentlyClickedCode = "";
$(document).ready(function (){
$dropdown = $("#contextMenu");
$(".actionButton").click(function() {
//move dropdown menu
$(this).after($dropdown);
//update links
$(this).dropdown();
currentlyClickedCode = $(this).attr("data-place");
console.log(currentlyClickedCode)
});
var tableData=[
{
"CATEGORY CODE": "C001",
"CATEGORY NAME": "Beverages",
"QUANTITY": "1.0000",
"AMOUNT": 18
},
{
"CATEGORY CODE": "C002",
"CATEGORY NAME": "Shakes",
"QUANTITY": "1.0000",
"AMOUNT": 80
},
{
"CATEGORY CODE": "C003",
"CATEGORY NAME": "Juices",
"QUANTITY": "1.0000",
"AMOUNT": 70
},
{
"CATEGORY CODE": "C004",
"CATEGORY NAME": "Soups",
"QUANTITY": "1.0000",
"AMOUNT": 55
},
{
"CATEGORY CODE": "C005",
"CATEGORY NAME": "Cookies",
"QUANTITY": "1.0000",
"AMOUNT": 46
},
{
"CATEGORY CODE": "C006",
"CATEGORY NAME": "Buns",
"QUANTITY": "1.0000",
"AMOUNT": 21
},
{
"CATEGORY CODE": "C007",
"CATEGORY NAME": "Breads",
"QUANTITY": "1.0000",
"AMOUNT": 40
},
{
"CATEGORY CODE": "C008",
"CATEGORY NAME": "Rusks",
"QUANTITY": "1.0000",
"AMOUNT": 52
},
{
"CATEGORY CODE": "C009",
"CATEGORY NAME": "Biscuits",
"QUANTITY": "1.0000",
"AMOUNT": 38
},
{
"CATEGORY CODE": "C010",
"CATEGORY NAME": "Puff",
"QUANTITY": "4.0000",
"AMOUNT": 132
},
{
"CATEGORY CODE": "C011",
"CATEGORY NAME": "Savouries",
"QUANTITY": "0.1000",
"AMOUNT": 29
},
{
"CATEGORY CODE": "C012",
"CATEGORY NAME": "Cake",
"QUANTITY": "1.0000",
"AMOUNT": 46
},
{
"CATEGORY CODE": "C014",
"CATEGORY NAME": "IceCream",
"QUANTITY": "1.0000",
"AMOUNT": 70
},
{
"CATEGORY CODE": "C019",
"CATEGORY NAME": "Curry",
"QUANTITY": "1.0000",
"AMOUNT": 180
},
{
"CATEGORY CODE": "C021",
"CATEGORY NAME": "Starter",
"QUANTITY": "1.0000",
"AMOUNT": 165
},
{
"CATEGORY CODE": "C022",
"CATEGORY NAME": "Roti",
"QUANTITY": "1.0000",
"AMOUNT": 60
},
{
"CATEGORY CODE": "C023",
"CATEGORY NAME": "Chawal",
"QUANTITY": "1.0000",
"AMOUNT": 185
},
{
"CATEGORY CODE": "C024",
"CATEGORY NAME": "Dessert",
"QUANTITY": "1.0000",
"AMOUNT": 66
},
{
"CATEGORY CODE": "C026",
"CATEGORY NAME": "Soup",
"QUANTITY": "1.0000",
"AMOUNT": 100
},
{
"CATEGORY CODE": "C027",
"CATEGORY NAME": "Salad",
"QUANTITY": "1.0000",
"AMOUNT": 50
},
{
"CATEGORY CODE": "C028",
"CATEGORY NAME": "Set Menu",
"QUANTITY": "3.0000",
"AMOUNT": 1290
},
{
"CATEGORY CODE": "C029",
"CATEGORY NAME": "Pastry",
"QUANTITY": "1.0000",
"AMOUNT": 80
},
{
"CATEGORY CODE": "C030",
"CATEGORY NAME": "Packed Meals",
"QUANTITY": "1.0000",
"AMOUNT": 25
},
{
"CATEGORY CODE": "C031",
"CATEGORY NAME": "Packaging",
"QUANTITY": "1.0000",
"AMOUNT": 5
},
{
"CATEGORY CODE": "C034",
"CATEGORY NAME": "Bhath",
"QUANTITY": "1.0000",
"AMOUNT": 68
},
{
"CATEGORY CODE": "C036",
"CATEGORY NAME": "Snacks",
"QUANTITY": "1.0000",
"AMOUNT": 10
},
{
"CATEGORY CODE": "C037",
"CATEGORY NAME": "Breakfast",
"QUANTITY": "5.0000",
"AMOUNT": 119
},
{
"CATEGORY CODE": "C038",
"CATEGORY NAME": "Evening Snacks",
"QUANTITY": "1.0000",
"AMOUNT": 70
},
{
"CATEGORY CODE": "C040",
"CATEGORY NAME": "Sandwich",
"QUANTITY": "1.0000",
"AMOUNT": 75
},
{
"CATEGORY CODE": "C042",
"CATEGORY NAME": "Burger",
"QUANTITY": "1.0000",
"AMOUNT": 75
},
{
"CATEGORY CODE": "C043",
"CATEGORY NAME": "Meals",
"QUANTITY": "1.0000",
"AMOUNT": 220
},
{
"CATEGORY CODE": "C044",
"CATEGORY NAME": "Curd",
"QUANTITY": "1.0000",
"AMOUNT": 12
},
{
"CATEGORY CODE": "C048",
"CATEGORY NAME": "Combo",
"QUANTITY": "2.0000",
"AMOUNT": 180
},
{
"CATEGORY CODE": "C051",
"CATEGORY NAME": "Silver Thali",
"QUANTITY": "1.0000",
"AMOUNT": 450
},
{
"CATEGORY CODE": "C052",
"CATEGORY NAME": "Sweets",
"QUANTITY": "1.0000",
"AMOUNT": 115
},
{
"CATEGORY CODE": "C054",
"CATEGORY NAME": "Instant Mixes",
"QUANTITY": "1.0000",
"AMOUNT": 66
},
{
"CATEGORY CODE": "C055",
"CATEGORY NAME": "RTE",
"QUANTITY": "1.0000",
"AMOUNT": 228
},
{
"CATEGORY CODE": "C057",
"CATEGORY NAME": "Spices",
"QUANTITY": "1.0000",
"AMOUNT": 40
},
{
"CATEGORY CODE": "C061",
"CATEGORY NAME": "Fast Food",
"QUANTITY": "1.0000",
"AMOUNT": 15
}
]
function addTable(tableData) {
var col = Object.keys(tableData[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableData.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
var tabledata = tableData[i][col[j]];
if(tabledata && !isNaN(tabledata)){
tabledata = parseInt(tabledata).toLocaleString('en-in')
}
if( tableData[i]['CATEGORY CODE'] === tableData[i][col[j]]){
a = document.createElement("a");
tabCell.classList.add("dropdown");
a.classList.add("btn");
a.classList.add("btn-default");
a.classList.add("actionButton");
/* a.classList.add("text-center"); */
/* a.setAttribute("data-place", outlet);
a.setAttribute("data-plac", element); */
a.setAttribute("data-toggle", "dropdown");
a.setAttribute("data-place", tableData[i]['CATEGORY CODE']); //this to print on console which drop-down button is clicked.
a.innerHTML = tabledata;
tabCell.appendChild(a);
} else {
span = document.createElement("span");
span.innerHTML = tabledata;
tabCell.appendChild(span)
}
if (j > 1)
{
tabCell.classList.add("text-right");
}
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("table1");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableData)
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link
rel="stylesheet"
type="text/css"
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
/>
<script
type="text/javascript"
src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"
></script>
<div id="table1">
</div>
<ul id="contextMenu" class="dropdown-menu" role="menu">
<li><a href="test1.jsp" class="link1">BillSummary</a></li>
<li><a href="test.jsp" class="link2">Item Summary</a></li>
</ul>in my above snippet code is running successfully and creating the dropdown button ,but not showing the links.
What i am trying to achieve is
- To show the drop-down link when click on drop-down button.
- Print on console which drop-down button is clicked
i am applying the right approach but don't know where it is going wrong. so please guide me,any kind of help or guidance will be helpful.
my code is throwing error this "TypeError: $(...).dropdown is not a function
Upvotes: 0
Views: 375
Answers (1)
Ahmad
Reputation: 12727
You can't attach .click() event listener to dynamically generated elements.
You have to use .on() instead:
$(document).on("click",".actionButton",function() {
... code here ...
}
var currentlyClickedCode = "";
$(document).ready(function() {
$dropdown = $("#contextMenu");
$(document).on("click",".actionButton",function() {
//move dropdown menu
$(this).after($dropdown);
//update links
$(this).dropdown();
currentlyClickedCode = $(this).attr("data-place");
console.log(currentlyClickedCode);
});
var tableData = [{
"CATEGORY CODE": "C001",
"CATEGORY NAME": "Beverages",
"QUANTITY": "1.0000",
"AMOUNT": 18
},
{
"CATEGORY CODE": "C002",
"CATEGORY NAME": "Shakes",
"QUANTITY": "1.0000",
"AMOUNT": 80
},
{
"CATEGORY CODE": "C003",
"CATEGORY NAME": "Juices",
"QUANTITY": "1.0000",
"AMOUNT": 70
},
{
"CATEGORY CODE": "C004",
"CATEGORY NAME": "Soups",
"QUANTITY": "1.0000",
"AMOUNT": 55
},
{
"CATEGORY CODE": "C005",
"CATEGORY NAME": "Cookies",
"QUANTITY": "1.0000",
"AMOUNT": 46
},
{
"CATEGORY CODE": "C006",
"CATEGORY NAME": "Buns",
"QUANTITY": "1.0000",
"AMOUNT": 21
},
{
"CATEGORY CODE": "C007",
"CATEGORY NAME": "Breads",
"QUANTITY": "1.0000",
"AMOUNT": 40
},
{
"CATEGORY CODE": "C008",
"CATEGORY NAME": "Rusks",
"QUANTITY": "1.0000",
"AMOUNT": 52
},
{
"CATEGORY CODE": "C009",
"CATEGORY NAME": "Biscuits",
"QUANTITY": "1.0000",
"AMOUNT": 38
},
{
"CATEGORY CODE": "C010",
"CATEGORY NAME": "Puff",
"QUANTITY": "4.0000",
"AMOUNT": 132
},
{
"CATEGORY CODE": "C011",
"CATEGORY NAME": "Savouries",
"QUANTITY": "0.1000",
"AMOUNT": 29
},
{
"CATEGORY CODE": "C012",
"CATEGORY NAME": "Cake",
"QUANTITY": "1.0000",
"AMOUNT": 46
},
{
"CATEGORY CODE": "C014",
"CATEGORY NAME": "IceCream",
"QUANTITY": "1.0000",
"AMOUNT": 70
},
{
"CATEGORY CODE": "C019",
"CATEGORY NAME": "Curry",
"QUANTITY": "1.0000",
"AMOUNT": 180
},
{
"CATEGORY CODE": "C021",
"CATEGORY NAME": "Starter",
"QUANTITY": "1.0000",
"AMOUNT": 165
},
{
"CATEGORY CODE": "C022",
"CATEGORY NAME": "Roti",
"QUANTITY": "1.0000",
"AMOUNT": 60
},
{
"CATEGORY CODE": "C023",
"CATEGORY NAME": "Chawal",
"QUANTITY": "1.0000",
"AMOUNT": 185
},
{
"CATEGORY CODE": "C024",
"CATEGORY NAME": "Dessert",
"QUANTITY": "1.0000",
"AMOUNT": 66
},
{
"CATEGORY CODE": "C026",
"CATEGORY NAME": "Soup",
"QUANTITY": "1.0000",
"AMOUNT": 100
},
{
"CATEGORY CODE": "C027",
"CATEGORY NAME": "Salad",
"QUANTITY": "1.0000",
"AMOUNT": 50
},
{
"CATEGORY CODE": "C028",
"CATEGORY NAME": "Set Menu",
"QUANTITY": "3.0000",
"AMOUNT": 1290
},
{
"CATEGORY CODE": "C029",
"CATEGORY NAME": "Pastry",
"QUANTITY": "1.0000",
"AMOUNT": 80
},
{
"CATEGORY CODE": "C030",
"CATEGORY NAME": "Packed Meals",
"QUANTITY": "1.0000",
"AMOUNT": 25
},
{
"CATEGORY CODE": "C031",
"CATEGORY NAME": "Packaging",
"QUANTITY": "1.0000",
"AMOUNT": 5
},
{
"CATEGORY CODE": "C034",
"CATEGORY NAME": "Bhath",
"QUANTITY": "1.0000",
"AMOUNT": 68
},
{
"CATEGORY CODE": "C036",
"CATEGORY NAME": "Snacks",
"QUANTITY": "1.0000",
"AMOUNT": 10
},
{
"CATEGORY CODE": "C037",
"CATEGORY NAME": "Breakfast",
"QUANTITY": "5.0000",
"AMOUNT": 119
},
{
"CATEGORY CODE": "C038",
"CATEGORY NAME": "Evening Snacks",
"QUANTITY": "1.0000",
"AMOUNT": 70
},
{
"CATEGORY CODE": "C040",
"CATEGORY NAME": "Sandwich",
"QUANTITY": "1.0000",
"AMOUNT": 75
},
{
"CATEGORY CODE": "C042",
"CATEGORY NAME": "Burger",
"QUANTITY": "1.0000",
"AMOUNT": 75
},
{
"CATEGORY CODE": "C043",
"CATEGORY NAME": "Meals",
"QUANTITY": "1.0000",
"AMOUNT": 220
},
{
"CATEGORY CODE": "C044",
"CATEGORY NAME": "Curd",
"QUANTITY": "1.0000",
"AMOUNT": 12
},
{
"CATEGORY CODE": "C048",
"CATEGORY NAME": "Combo",
"QUANTITY": "2.0000",
"AMOUNT": 180
},
{
"CATEGORY CODE": "C051",
"CATEGORY NAME": "Silver Thali",
"QUANTITY": "1.0000",
"AMOUNT": 450
},
{
"CATEGORY CODE": "C052",
"CATEGORY NAME": "Sweets",
"QUANTITY": "1.0000",
"AMOUNT": 115
},
{
"CATEGORY CODE": "C054",
"CATEGORY NAME": "Instant Mixes",
"QUANTITY": "1.0000",
"AMOUNT": 66
},
{
"CATEGORY CODE": "C055",
"CATEGORY NAME": "RTE",
"QUANTITY": "1.0000",
"AMOUNT": 228
},
{
"CATEGORY CODE": "C057",
"CATEGORY NAME": "Spices",
"QUANTITY": "1.0000",
"AMOUNT": 40
},
{
"CATEGORY CODE": "C061",
"CATEGORY NAME": "Fast Food",
"QUANTITY": "1.0000",
"AMOUNT": 15
}
]
function addTable(tableData) {
var col = Object.keys(tableData[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableData.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
var tabledata = tableData[i][col[j]];
if (tabledata && !isNaN(tabledata)) {
tabledata = parseInt(tabledata).toLocaleString('en-in')
}
if (tableData[i]['CATEGORY CODE'] === tableData[i][col[j]]) {
a = document.createElement("a");
tabCell.classList.add("dropdown");
a.classList.add("btn");
a.classList.add("btn-default");
a.classList.add("actionButton");
/* a.classList.add("text-center"); */
/* a.setAttribute("data-place", outlet);
a.setAttribute("data-plac", element); */
a.setAttribute("data-toggle", "dropdown");
a.setAttribute("data-place", tableData[i]['CATEGORY CODE']); //this to print on console which drop-down button is clicked.
a.innerHTML = tabledata;
tabCell.appendChild(a);
} else {
span = document.createElement("span");
span.innerHTML = tabledata;
tabCell.appendChild(span)
}
if (j > 1) {
tabCell.classList.add("text-right");
}
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("table1");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableData)
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="table1">
</div>
<ul id="contextMenu" class="dropdown-menu" role="menu">
<li><a href="test1.jsp" class="link1">BillSummary</a></li>
<li><a href="test.jsp" class="link2">Item Summary</a></li>
</ul>Upvotes: 1
Related Questions
- Drop-downs are not showing in my HTML table while calling ajax or putting static JSON
- HTML table not working with javascript dropdown box
- Dropdown links not displaying correctly
- Drop down table and jquery
- jQuery - Can't show dropdown list upon clicking a link
- links in table are not working
- Links not working in drop-down menu
- Links in the dropdown menu are not working
- Links not working in JavaScript drop down menu
- drop down menu links dont work