I'm pretty lost with Bootstrap.js tabs. I have got this html:
<ul class="button-menu" id="stores" data-tabs="tabs">
</ul>
<div class="tab-content" id="storesGoods">
<div class="tab-pane" id="store0">test</div>
<div class="tab-pane" id="store1">test2</div>
</div>
And I generate with JS it's content
function updateShop(){
var actualStores = "";
for (var i=0;i<actualTown.store.length;i++){
actualStores=actualStores + "<li><a href='#store"+i+"' data-toggle='stores'>"+actualTown.store[i].name+"</a></li>"
$("#store"+i).html(actualTown.store[i].listGoods());
};
$("#stores").html(actualStores);
};
When I view my html via Chrome, I see that it generated this:
<ul class="button-menu" id="stores" data-tabs="tabs">
<li>24/7 Store</li>
<li>Liquiro</li>
</ul>
<div class="tab-content" id="storesGoods">
<div class="tab-pane" id="store0">
<p>24/7 Store: All day, all night, every day!</p>
<table class="table table-condensed">
<tbody>
<tr>
<th>item</th>
<th>price</th>
<th></th>
</tr>
<tr>
<td>Bottled Water</td>
<td>0.84</td>
<td><a class="buy" onclick="buyToInventory(d1)">buy</a>
</td>
</tr>
<tr>
<td>Raush Juice</td>
<td>0.9</td>
<td><a class="buy" onclick="buyToInventory(d2)">buy</a>
</td>
</tr>
<tr>
<td>Bohemia Chips</td>
<td>0.7</td>
<td><a class="buy" onclick="buyToInventory(e2)">buy</a>
</td>
</tr>
<tr>
<td>Vodka Alosuth</td>
<td>2.7</td>
<td><a class="buy" onclick="buyToInventory(d3)">buy</a>
</td>
</tr>
<tr>
<td>Pilsner beer (10°)</td>
<td>0.8</td>
<td><a class="buy" onclick="buyToInventory(d7)">buy</a>
</td>
</tr>
<tr>
<td>Pilsner beer (12°)</td>
<td>0.98</td>
<td><a class="buy" onclick="buyToInventory(d8)">buy</a>
</td>
</tr>
<tr>
<td>Bread</td>
<td>1.2</td>
<td><a class="buy" onclick="buyToInventory(e1)">buy</a>
</td>
</tr>
<tr>
<td>Rosito Schnap</td>
<td>0.68</td>
<td><a class="buy" onclick="buyToInventory(d10)">buy</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane" id="store1">
<p>Liquiro: Bad day? Liquiro will fix that, buy some boost for yourself and some chips.</p>
<table class="table table-condensed">
<tbody>
<tr>
<th>item</th>
<th>price</th>
<th></th>
</tr>
<tr>
<td>Vodka Alosuth</td>
<td>2.7</td>
<td><a class="buy" onclick="buyToInventory(d3)">buy</a>
</td>
</tr>
<tr>
<td>Pilsner beer (10°)</td>
<td>0.8</td>
<td><a class="buy" onclick="buyToInventory(d7)">buy</a>
</td>
</tr>
<tr>
<td>Pilsner beer (12°)</td>
<td>0.98</td>
<td><a class="buy" onclick="buyToInventory(d8)">buy</a>
</td>
</tr>
<tr>
<td>Rosito Schnap</td>
<td>0.68</td>
<td><a class="buy" onclick="buyToInventory(d10)">buy</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
So it's generated as it's supossed to be but switching tabs doesn't work, when I click on something in ul #stores it doesnt change tab, it just add to url www.something.com/#store0 and nothing happens.
Does anyone know how to make these tabs working, I'm totally lost.
Thanks for any help!
There is nothing like data-toggle="store" in bootstrap docs, it should be data-toggle="tab", and the plugin will figure itself out which is the right target, via the href attribute.
Their example is quite straightforward, just follow it.
Related
I have a page with a table containing customer data like customer name, quantity, price, and status. The Table looks like this:
<table>
<tr>
<th>No</th>
<th>Customer</th>
<th>Quantity</th>
<th>Price</th>
<th>Status</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Customer 1</td>
<td>5000</td>
<td>100000</td>
<td class="status-order">Order</td>
<td>
<a class="btn btn-outline-primary">Update</a>
<a class="btn btn-outline-danger">Delete</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Customer 2</td>
<td>2000</td>
<td>40000</td>
<td class="status-order">Order</td>
<td>
<a class="btn btn-outline-primary">Update</a>
<a class="btn btn-outline-danger">Delete</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Customer 3</td>
<td>3000</td>
<td>60000</td>
<td class="status-order">Delivered</td>
<td>
<a class="update btn btn-outline-primary">Update</a>
<a class="delete btn btn-outline-danger">Delete</a>
</td>
</tr>
</table>
I want to hide the Update button based on condition. Let's say the status is "Delivered", then the Update button does not appear. So I create a jQuery file like this:
$(".status-order").each(function() {
const status = $(this).text()
if (status == "Delivered"){
$(".update").hide()
console.log(true)
} else {
$(".update").show()
console.log(false)
}
})
After I try to refresh the page to see the result, the update button in each rows are hide. I know my jQuery that i create it's wrong, can you give me correct answer how to fix this? Thank you.
$(".update").hide() or $(".update").show() will both iterate through all elements matching .update and hide or show them. You only want to hide or show the .update that's in the current table row.
The .status-order you're iterating over is in a prior <td>, so use .next() to get to the next <td>, and then use .find('.update') on that to get to the descendant.
$(".status-order").each(function() {
const status = $(this).text();
const update = $(this).next().find('.update');
if (status == "Delivered") {
update.hide()
} else {
update.show()
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>No</th>
<th>Customer</th>
<th>Quantity</th>
<th>Price</th>
<th>Status</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Customer 1</td>
<td>5000</td>
<td>100000</td>
<td class="status-order">Order</td>
<td>
<a class="btn btn-outline-primary">Update</a>
<a class="btn btn-outline-danger">Delete</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Customer 2</td>
<td>2000</td>
<td>40000</td>
<td class="status-order">Order</td>
<td>
<a class="btn btn-outline-primary">Update</a>
<a class="btn btn-outline-danger">Delete</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Customer 3</td>
<td>3000</td>
<td>60000</td>
<td class="status-order">Delivered</td>
<td>
<a class="update btn btn-outline-primary">Update</a>
<a class="delete btn btn-outline-danger">Delete</a>
</td>
</tr>
</table>
I have a table which will only ever have three rows.
There is an image which is an anchor tag in the third row and from the click event of this anchor tag I want to retrieve the text value from the first row in the same column by the class name of thisEventName.
<table id="tblTimedPathwayEvents">
<tbody>
<tr>
<td>Event</td>
<td class="thisEventName">)Event #1</td>
<td class="thisEventName">)Event #2</td>
<td class="thisEventName">)Event #3</td>
</tr>
<tr>
<td>Target Day(s)</td>
<td>2</td>
<td>3</td>
<td>28</td>
</tr>
<tr>
<td>Performed Day</td>
<td><a class="performedDayLink" href="#"><img src="http://localhost:55223//graphics/pencil-square.jpg" title="Edit"></a></td>
<td><a class="performedDayLink" href="#"><img src="http://localhost:55223//graphics/pencil-square.jpg" title="Edit"></a></td>
<td><a class="performedDayLink" href="#"><img src="http://localhost:55223//graphics/pencil-square.jpg" title="Edit"></a></td>
</tr>
</tbody>
</table>
I've tried things like this but to no avail
$(this).closest('td').find('.thisEventName').text();
You can use .index() on the parent td, which will give its relative position within its parent (ie will give the column).
var idx = $(this).closest("td").index();
Then you can get the same column's td from the first row
$(this).closest("tbody").find("tr td").eq(idx)
Giving updated snippet:
$(".performedDayLink").click(function() {
var idx = $(this).closest("td").index();
var txt = $(this).closest("tbody").find("tr td").eq(idx).text();
$("#out").text(txt);
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblTimedPathwayEvents">
<tbody>
<tr>
<td>Event</td>
<td class="thisEventName">)Event #1</td>
<td class="thisEventName">)Event #2</td>
<td class="thisEventName">)Event #3</td>
</tr>
<tr>
<td>Target Day(s)</td>
<td>2</td>
<td>3</td>
<td>28</td>
</tr>
<tr>
<td>Performed Day</td>
<td>
<a class="performedDayLink" href="#">EDIT 1</a>
</td>
<td>
<a class="performedDayLink" href="#">EDIT 2</a>
</td>
<td>
<a class="performedDayLink" href="#">EDIT 3</a>
</td>
</tr>
</tbody>
</table>
<hr/>
<div id="out"></div>
I have a page with almost 2,000 DOM elements (nodes), which includes, among other things, a simple table with over 200 links to other subpages:
<div id="tabs">
<ul><li><a href="#tabs-1" >Al-Ar</a></li>
<li><a href="#tabs-2" >Ar-D</a></li>
<li><a href="#tabs-3" >E-Ha</a></li>
<li><a href="#tabs-4" >Ha-J</a></li>
<li><a href="#tabs-5" >K-Mo</a></li>
<li><a href="#tabs-6" >Mo-Ro</a></li>
<li><a href="#tabs-7" >Ro-So</a></li>
<li><a href="#tabs-8" >So-Su</a></li>
<li><a href="#tabs-9" >Su-Z</a></li></ul>
<table class="tablica_hoteli">
<tbody>
<tr class="tr1"><td></td></tr>
<tr class="tr"><td>
<div id="tabs-1">
<table class="pol">
<tbody>
<tr> <td class="td10" colspan="4">Al..Ar</td></tr>
<tr> <td class="td1">1</td>
<td class="td2">1</td></tr>
<tr> <td class="td1">2</td>
<td class="td2">2</td></tr>
...
<tr> <td class="td1">20</td>
<td class="td2">20</td></tr>
</tbody>
</table>
<table class="pol">
<tbody>
<tr> <td class="td1">21</td>
<td class="td2">21</td></tr>
<tr> <td class="td1">21</td>
<td class="td2">21</td></tr>
...
<tr> <td class="td1">30</td>
<td class="td2">30</td></tr>
</tbody>
</table>
</div>
<div id="tabs-2">
<table class="pol">
<tbody>
<tr> <td class="td10" colspan="4">Ar...</td></tr>
<tr> <td class="td1">31</td>
<td class="td2">31</td></tr>
<tr> <td class="td1">32</td>
<td class="td2">32</td></tr>
...
<tr> <td class="td1">51</td>
<td class="td2">51</td></tr>
</tbody>
</table>
<table class="pol">
<tbody>
<tr> <td class="td1">52</td>
<td class="td2">52</td></tr>
...
<tr> <td class="td1">205</td>
<td class="td2">205</td></tr>
</tbody>
</table>
</div>
</tr>
<tr class="tr1"><td></td>
</tr>
</tbody>
</table>
</div>
The start page only shows "# tabs-1", and the rest of the pages have to be clicked later to view. So the rest of the content from "# tabs-2" to "# tabs-9" does not need to load.
What's the easiest way to optimize the DOM size? How do I get the rest of the # tabs-2 "code to not load on startup?
I don't know how to do it and that's why I am asking for help.
Oh, maybe it would be helpful to know that the table is written with jQuery
I was using the code from:
https://jqueryui.com/tabs/#ajax
plus links to jQuery sites:
jquery.min.js,
jquery-ui.min.js,
jquery.lazyload.min.js
And I mean position in Lighthouse where I can see in Diagnostics "Avoid an excessive DOM size" = 1956 nodes.
And I would like to reduce this value, this means that only the first page should be loaded
I want to achieve the above image using angular-js ng-repeat. i got a problem for the third column.
<div tasty-table
bind-resource-callback="showTCS.loadAllTCS"
bind-init="showTCS.init"
bind-filters="showTCS.listParams"
bind-reload="showTCS.reloadCallback">
<table class="table table-striped table-condensed table-hover table-bordered table-overflow"
cellpadding="4"
cellspacing="4"
align="center">
<thead tasty-thead bind-not-sort-by="showMainCategory.notSortBy"></thead>
<tbody>
<tr ng-repeat="tcs in rows">
<td>{{tcs.trackName}}</td>
<td>
<table align="left">
<tbody>
<tr ng-repeat="category in tcs.category">
<td>{{category.categoryName}}</td>
<td>
<table> //this one should be on the 3rd <td> of parent table
<tbody>
<tr ng-repeat="skill in category.skill">
<td>{{skill.skillName}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td align="center">
<a ui-sref="mainCategoryDetails( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-eye-open"></a>
</td>
</tr>
<tr>
<td ng-if="(!rows.length)" colspan="4" class="text-center">No results found.</td>
</tr>
</tbody>
</table>
<div tasty-pagination bind-items-per-page="showTCS.itemsPerPage" bind-list-items-per-page="showTCS.listItemsPerPage"></div>
</div>
This is what i have tried so far and the output is not what i want as shown in the sample image. The problem is how to output the last data which is skills in the third of the parent table.
Found an answer, not quite good since it keeps repeating the tbody but its still ok
<div class="row-fluid" style="padding-top: 2%">
<div tasty-table
bind-resource-callback="showTCS.loadAllTCS"
bind-init="showTCS.init"
bind-filters="showTCS.listParams"
bind-reload="showTCS.reloadCallback">
<table class="table table-striped table-condensed table-hover table-bordered table-overflow"
cellpadding="4"
cellspacing="4"
align="center">
<thead tasty-thead bind-not-sort-by="showTCS.notSortBy"></thead>
<tbody ng-repeat="tcs in rows">
<tr ng-repeat="category in tcs.category">
<td class="text-center" style="vertical-align:middle;">{{tcs.trackName}}</td>
<td class="text-center" style="vertical-align:middle;">{{category.categoryName}}</td>
<td>
<ul class="list-unstyled" >
<li ng-repeat="skill in category.skill">{{skill.skillName}}</li>
</ul>
</td>
<td align="center">
<a ui-sref="mainCategoryDetails( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-eye-open"></a>
<a ui-sref="editMainCategory( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-edit"></a>
<a ui-sref="deleteMainCategory( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-minus-sign"></a>
</td>
</tr>
<tr>
<td ng-if="(!rows.length)" colspan="4" class="text-center">No results found.</td>
</tr>
</tbody>
</table>
<div tasty-pagination bind-items-per-page="showTCS.itemsPerPage" bind-list-items-per-page="showTCS.listItemsPerPage"></div>
</div>
I'm trying to toggle divs such that only one div is only open at one time. I have looked at the other solutions provided, however the solutions provided are such that if I clicked on the open div again, it does not close. And I am looking for the currently opened div to close again when clicked. Any help given is appreciated. Thanks in advance.
JSFIDDLE:http://jsfiddle.net/ZmDs2/78/
HTML
<table class="table">
<thead>
<tr>
<th>Title</th>
<th>From</th>
<th>Utensil</th>
</tr>
</thead>
<tbody>
<tr class="list">
<td class="title">Cupcakes</td>
<td class="from">Molly's Cupcakes</td>
<td>Chopsticks</td>
</tr>
<tr class="description">
<td>hello </td>
</tr>
<tr class="list">
<td class="title">Pizza</td>
<td>Roberta's</td>
<td>Knife</td>
</tr>
<tr class="description">
<td>bye </td>
</tr>
<tr class="list">
<td>Pasta</td>
<td>Basta Pasta</td>
<td>Spoon</td>
</tr>
<tr class="list">
<td>Chicken & Waffles</td>
<td>cell is row 3, column 1</td>
<td>Spoon</td>
</tr>
</tbody>
</table>
CSS
.description{
display:none;
}
JS:
$('.title').on('click', function() {
var $this = $(this),
$next = $this.next();
// Check if another profile is open and close it
var $last = $('.description:visible', $this.parents('table'));
if ($last.length) {
$last.slideUp('fast');
}
// Show the new profile content only if we are opening a new profile
if ($last.parents('.list').index() !== $this.parent().index()) {
$next.slideDown('fast');
}
});
Just a heads-up to avoid "reinventing the wheel" unless necessary. The bootstrap library has a Collapse element which does what you require.
Check it out and see if it fits the bill.
Created a collapse element from the Twitter Bootstrap library.
<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th>Title</th>
<th>From</th>
<th>Utensil</th>
</tr>
</thead>
<tbody>
<tr class="list">
<td data-toggle="collapse" data-target="#cupcakes" class="accordion-toggle">Cupcakes</td>
<td class="from">Molly's Cupcakes</td>
<td>Chopsticks</td>
</tr>
<tr>
<td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="cupcakes">hello</div></td>
</tr>
<tr class="list">
<td data-toggle="collapse" data-target="#pizza" class="accordion-toggle">Pizza</td>
<td class="from">Roberta's</td>
<td>Knife</td>
</tr>
<tr>
<td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="pizza">bye</div></td>
</tr>
<tr class="list">
<td data-toggle="collapse" data-target="#pasta" class="accordion-toggle">Pasta</td>
<td>Basta Pasta</td>
<td>Spoon</td>
</tr>
<tr>
<td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="pasta">hi</div></tr>
</tr>
</tbody>
</table>