Show different records in table on button click - javascript

I have a website where i have two divs that acts as button. I have two table in my database namely 'users' and 'stores'. I would like to show the tables based on the button clicked. Is there a way to achieve this without a page reload and without using ajax if possible.
below is the code i used for the buttons.
<html>
<head>
</head>
<body>
<div class="btn_container">
<div class="buttons" id="btn_products"><i class="fas fa-store"></i>
<h1 class="products_text">Total Products</h1>
</div>
<div class="buttons" id="btn_users"><i class="fas fa-users"></i>
<h1 class="users_text">Total Users</h1>
</div>
<div class="buttons">btn3</div>
</div>
<div class="table_container">
<!--the table should be loaded here-->
</div>
</body>
</html>

If you don't want to use Ajax you have no other choice to have all tables in your HTML code when the page is loaded.
Here is what I propose
const tables = [...document.getElementsByClassName('table')];
[...document.getElementsByClassName('buttons')].forEach(button => {
button.addEventListener('click', evt => {
const id = button.id.replace('btn_', '');
tables.forEach(table => {
table.style.display = table.id === id ? 'block' : '';
});
});
});
.table {
display: none;
}
<div class="btn_container">
<div class="buttons" id="btn_products"><i class="fas fa-store"></i>
<h1 class="products_text">Total Products</h1>
</div>
<div class="buttons" id="btn_users"><i class="fas fa-users"></i>
<h1 class="users_text">Total Users</h1>
</div>
<div class="buttons">btn3</div>
</div>
<div class="table_container">
<table class="table" id="products">
<tbody>
<tr>
<th>Table products</th>
</tr>
</tbody>
</table>
<table class="table" id="users">
<tbody>
<tr>
<th>Table users</th>
</tr>
</tbody>
</table>
</div>
Note that if you want one of the two table to be shown when the page is loaded change the CSS to
#products /* #users */ {
display: none
}

Related

JS - How to find specific element TAG from a button click event to remove it?

If a button in my HTML is clicked, it should search / find the next parent 'table' element and delete it completly. How can I do that? Please check JS to find out what I have already test it.
My HTML:
<table class="table table-bordered">
<!-- OTHER HTML CODE with div etc. DONT REMOVE/TOUCH THIS! -->
</table>
<table class="table table-bordered"> <!-- THIS table element should delete, if the button is clicked -->
<hr class="my-4 border-dark" id="hereWeGo">
<div class="row">
<div class="col-auto justify-content-around d-flex flex-column border">
<button type="button" class="remove btn btn-danger" id="RemoveBtn">Remove</button>
</div>
<div class="col border">
<B>Title...</B><br />
<hr class="my-1">
Link...
</div>
</div>
</table>
<table class="table table-bordered">
<!-- OTHER HTML CODE with div etc. DONT REMOVE/TOUCH THIS! -->
</table>
My JS:
$(document).on('click', '.remove', function() {
//$(this).parents('table').remove();
//alert("im here");
//$(this).parents('table').remove();
//alert($(this).parents('hr').html());
//$('div.row').remove();
// after this is run, it should remove the <table class="table table-bordered"> element....
});
Use closest:
$(this).closest("table").remove();
However, your HTML is not valid: table cannot have div or hr tags as direct children, and so the table is not really the parent of the button. Browsers "fix" the error, and move all those invalid child elements out of the table.
This solution will only work if you make your table structure valid HTML. So, no children of it should be div.
For instance:
$(document).on('click', '.remove', function() {
$(this).closest("table").remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<hr class="my-4 border-dark" id="hereWeGo">
<table class="table table-bordered"> <!-- THIS table element should delete, if the button is clicked -->
<tr class="row">
<td class="col-auto justify-content-around d-flex flex-column border">
<button type="button" class="remove btn btn-danger" id="RemoveBtn">Remove</button>
</td>
<td class="col border">
<B>Title...</B><br />
<hr class="my-1">
Link...
</td>
</tr>
</table>
What you are looking for is the JQuery closest() function.

clipboard.js hover for tables

I am using clipboard.js to display a button that will allow a user to copy the specific table that the mouse is hovering over. I got it to work for one table, but I need it to work for two. Here is what I have so far:
JS
new ClipboardJS('.btn');
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
e.clearSelection();
});
HTML
Table 1
<div class="container">
<h3>Table 1</h3>
<div id="table1" class="table1">
<div class="overlay">
<button type ="btn" class="btn btn-default pull-right tooltip" title="Copied!" style="display:none;" data-clipboard-target="#table1">
<img src="clippy.png" width="20px" title="Copy to clipboard">
</button>
</div>
<script>
$(document).ready(function () {
$(document).on('mouseenter', '.table1', function () {
$(this).find(":button").show();
}).on('mouseleave', '.table1', function () {
$(this).find(":button").hide();
});
});
</script>
<!-- TABLE 1 -->
<table>
</table>
<!-- END TABLE 1 -->
</div>
</div>
Table 2
<div class="container">
<h3>Table 2</h3>
<div id="table2" class="table2">
<div class="overlay">
<button type ="btn" class="btn btn-default pull-right tooltip" title="Copied!" style="display:none;" data-clipboard-target="#table2">
<img src="clippy.png" width="20px" title="Copy to clipboard">
</button>
</div>
<script>
$(document).ready(function () {
$(document).on('mouseenter', '.table2', function () {
$(this).find(":button").show();
}).on('mouseleave', '.table2', function () {
$(this).find(":button").hide();
});
});
</script>
<!-- TABLE 2 -->
<table>
</table>
<!-- END TABLE 2 -->
</div>
</div>
CSS
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.overlay:before{
content: ' ';
display: block;
height: 15%;
}
The hover works but it does not go away unless I am off the page rather than off the table and only one hover shows. I would like a button for each table. Could someone help? Also, if you are so kind to offer your help could you please post the code here instead of JSFiddle? I'm on my work computer at the moment and it has been blocked. Thanks!
There are several issues I have found here:
First: your buttons seem to be on the same place, this is why you only see one of them. This also makes the hover handle weirdly.
Change the CSS to:
.overlay {
position: relative;
}
Second, you can factorize all events into one jQuery call by using the same class for the containers.
<div class="container">
<h3>Table 1</h3>
<div id="table1" class="table">
<div class="overlay">
<button style="display:none;">Button A</button>
</div>
<table>
<tr>
<td>Table 1</td>
</tr>
</table>
</div>
</div>
<div class="container">
<h3>Table 2</h3>
<div id="table2" class="table">
<div class="overlay">
<button style="display:none">Button B</button>
</div>
<table>
<tr>
<td>Table 2</td>
</tr>
</table>
</div>
</div>
<script>
$(document).ready(function() {
$(document).on('mouseenter', '.table', function() {
$(this).find("button").show();
}).on('mouseleave', '.table', function() {
$(this).find(":button").hide();
});
});
</script>

angular print printing a second blank page

I'm trying to print an content of my html page.
I'm using this angularPrint but the problem im having is that in the page preview i'm getting to pages. the first one has content and the second one is a blank page. I'm trying to get rid of the blank page.
this is my html
<div id="invoice" print-section="" print-only="">
<div class="invoice">
<div class="invoice-company">{{user.store.name}}</div>
<div class="invoice-header">
<div class="invoice-from"><small>from</small>
<address class="m-t-5 m-b-5"><strong>{{user.store.name}}.</strong><br/>{{user.store.address.street}}<br/>{{user.store.address.city}}, {{user.store.address.zipCode}}<br/>Phone: {{user.store.phone}}</address>
</div>
<div class="invoice-date">
<div class="date m-t-5">{{saleDate | date:'MM/dd/yyyy'}}</div>
<div class="invoice-detail"># {{saleId}}<br/>Cashier {{user.firstName}}</div>
</div>
</div>
<div class="invoice-content">
<div class="table-responsive">
<table class="table table-invoice">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in sale.items">
<td>{{item.name}} {{item.size}}</td>
<td>{{item.price | currency}}</td>
</tr>
<tr ng-repeat="discount in sale.discounts">
<td>{{discount.name}}</td>
<td>- {{discount.price | currency}}</td>
</tr>
</tbody>
</table>
</div>
<div class="invoice-price">
<div class="invoice-price-left">
<div class="invoice-price-row">
<div class="sub-price"><small>SUBTOTAL</small>{{sale.subtotal | currency}}</div>
<div class="sub-price"><i class="fa fa-plus"></i></div>
<div class="sub-price"><small>TAX</small>{{sale.tax}}</div>
</div>
</div>
<div class="invoice-price-right"><small>TOTAL</small>{{sale.total | currency}}</div>
</div>
</div>
<div class="invoice-footer text-muted">
<p class="text-center m-b-5">Thank you for coming.<br/>We hope you'll visit again.</p>
</div>
</div>
</div>
this is the directive that trigger the print action
<button type="button" print-btn="">Print</button>
I want a solution it doesn't matter if I have to use plain javascript/jQuery or no directive at all. I just to be able to populate an invoice and print it.
Thank you in advance.
you could add
#invoice:last-child {
page-break-after: auto;
}
to remove the last page
Note: Not supported in IE

HTML with id's construct dynamically

I have an html page with a div that has a bootstrap button to collapse/expand a table. I want to click on it to toggle collpase/expand.
I am inspired by this fiddle.
The javascript is
$('.meu-painel-colapsar').on('click', function () {
var id1 = $('.meu-painel-colapsar').attr('id');
var id2 = $('.colapsar-competencias').attr('id');
alert(id1);
$('#' + id2 + ' .colapsar-competencias').collapse('toggle');
});
And the html is
#foreach($dados as $dimensaoNome => $dimensao)
<div class="panel panel-{{ $cores[$dimensaoNome] }} meu-painel-colapsar" id="accordion-{{ $dimensao->id }}">
<button type="button" class="btn btn-success btn-xs"
id="dimensao_{{ $dimensao->id }}"
data-toggle="collapse" data-target="#">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> veja os resultados
</button>
<div class="panel panel-default">
#foreach($dimensao->competencias as $competenciaNome => $competencia)
<div class="panel-heading">
<div class="row">
<div class="col-md-6"><h4 class="competencia-head">{{ $competenciaNome }}</h4></div>
<div class="col-md-6" style="padding-top:8px;">
</div>
</div>
<div class="collapse colapsar-competencias" id="competencia-{{ $competencia->id }}">
<table class="table table-condensed">
<thead>
<tr>
<th>Situação atual</th>
<th class="col-md-6">Oportunidades identificadas</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>{{ $competencia->nivel->texto }}</p>
</td>
<td>
<div class="col-lg-12">
{!! $competencia->recomendacao !!}
</div>
</td>
</tr>
</tbody>
</table>
</div>
#endforeach
</div>
</div>
#endforeach
The id's accordion-{{ $dimensao->id }} and competencia-{{ $competencia->id }} are generated with the two foreach's.
The problem is that the javascript code only gets the first id's of accordion-{{ $dimensao->id }} and competencia-{{ $competencia->id }}.
I'm struggling with this for hours without success. How can I get this id's correctly when I click the button?
If I'm understanding right, you are much better off not using ids at all and just relying on classes. Use $(this).find(...) to only find .colapsar-competencias elements that are inside the clicked element.
$('.meu-painel-colapsar').on('click', function () {
$(this).find('.colapsar-competencias').collapse('toggle');
});
http://jsfiddle.net/Vq6gt/120/
$('#accordion .panel-collapse',this).collapse('toggle');

jquery hide/show work only for 1st element of foreach

Hide/Show work fine for first element of foreach cycle in asp.net view, but for another elements did not work.
Script
$('#SelectedContainer').hide();
$(".data").click(function(e) {
e.preventDefault();
$('#BrowseContainer').hide();
$('#SelectedContainer').show();
});
$("#goback").click(function(e) {
e.preventDefault();
$('#SelectedContainer').hide();
$('#BrowseContainer').show();
});
HTML:
foreach (var ....){
<table border="1">
<tr class="tableBody">
<td>
<div id="SelectedContainer" class="container-fluid">
<div class="row-fluid">
<div><a id="goback" href="#">hide</a></div>
Test
</div>
</div>
<div id="BrowseContainer" class="container-fluid">
<div class="row-fluid container">
<a class="data" href="#">Show</a>
</div>
</div>
</td>
</tr>
</table>
}
What is my problem?
IDs must be unique, You should use common classes instead. You should use $.fn.closest() then you can use $.fn.find() to target desired element.
Here in the example I have used classes instead of IDs.
HTML
<table border="1">
<tr class="tableBody">
<td>
<div class="SelectedContainer container-fluid">
<div class="row-fluid">
<div><a class="goback" href="#">hide</a></div>
Test
</div>
</div>
<div class="BrowseContainer container-fluid">
<div class="row-fluid container">
<a class="data" href="#">Show</a>
</div>
</div>
</td>
</tr>
</table>
Script
$('.SelectedContainer').hide();
$(".data").click(function (e) {
e.preventDefault();
var table = $(this).closest('table');
table.find('.BrowseContainer').hide();
table.find('.SelectedContainer').show();
});
$(".goback").click(function (e) {
e.preventDefault();
var table = $(this).closest('table');
table.find('.SelectedContainer').hide();
table.find('.BrowseContainer').show();
});

Categories