JQuery - Appended Table keeps multiplying itself or duplicating itself when a toggle button is clicked
Question
I wish to have the user click a button to retrieve a table which has data from a mysql database once a button is clicked using an Ajax call using JQuery. The table is appended to a table element which toggles itself for the user to see and disappears once again by clicking a button. This has been achieved from the code below. However, every time the button is clicked, the table multiplies itself and adds two(2) additional copies of itself once it reappears. Which means every time the button is click, it appends itself once again to the table element. I wish that the user on sees the table once when a button is clicked and it disappears again when the same button is clicked again. Once it is clicked for the third time, the same table should reappear and not additional tables.
I have tried the remove method. I have tried the hide and show methods.
<HTML>
<button type = "button" id="allDataTable">Load Stores Table
Data</button>
<br/>
<br/>
<div id="storesT"></div>
<table class='table table-bordered table-striped' id='station_table'>
<JQUERY>
$(document).ready(() => {
$('#allDataTable').click(()=> {
$.ajax({
url:'http://localhost:5000/alldata',
type:'GET',
datatype:'json',
success:(data) => {
//console.log('You received some', data);
var station_data ='';
station_data
+='<tr>'+'<th>ID</th>'+'<th>Station</th>'+'<th>Address</th>'+
'<th>Monthly C-Store Sales</th>'+'<th>Operator</th>'+'<th>Top
SKU</th>'+'</tr>'
$.each(data, function (key,value){
station_data +='<tr><td>'+value.ID+'</td>
<td>'+value.Station+'</td><td>'+value.Address+'</td>
<td>'+value.monthly_cstore_sales+'</td><td>'+value.Operator+'</td>
<td>'+value.Top_SKU+'</tr></td>';
});
$('#station_table').append(station_data);
//NOT WORKING $('#station_table').remove(station_data);
//NOT WORKING $('#station_table').hide(station_data);
//NOT WORKING $('#station_table').show(station_data)
$('#station_table').toggle(station_data);
}
});
});
});
3 answers
solution1
0 2019-06-25 19:44:16
One solution would be to check if the data has already been added to the DOM before making the AJAX call. If not, make the call and then add the data. If yes, then simply toggle a class to hide/show the table.
$(document).ready(() => {
$('#allDataTable').click(()=> {
// Check for the existence of the data table here
if (!$('#station_table').children.length) {
$.ajax({
url:'http://localhost:5000/alldata',
type:'GET',
datatype:'json',
success:(data) => {
//console.log('You received some', data);
var station_data ='';
station_data +='<tr>'+'<th>ID</th>'+'<th>Station</th>'+'<th>Address</th>'+'<th>Monthly C-Store Sales</th>'+'<th>Operator</th>'+'<th>Top SKU</th>'+'</tr>';
$.each(data, function (key,value){
station_data +='<tr><td>'+value.ID+'</td> <td>'+value.Station+'</td><td>'+value.Address+'</td><td>'+value.monthly_cstore_sales+'</td><td>'+value.Operator+'</td> <td>'+value.Top_SKU+'</tr></td>';
});
$('#station_table').append(station_data);
}
});
}
else {
$('#station_table').toggleClass('hide');
}
});
});
CSS
.hide {
display: none;
}
solution2
-1 2019-06-25 19:27:43
The hide() function hides an element rather than a piece of code. I suggest adding an identifier to each row such as:
station_data +='<tr id="some-identifier"><td>...</td></tr>
You can then toggle the row visibility with
$('#some-identifier').hide() and $('#some-identifier').show()
solution3
-2 2019-06-25 19:51:49
Check if #station_table is empty first. If so, load content via Ajax. If not, toggle its visibility (if you don't want to reload its contents).
if ($('#station_table').is(':empty')) {
... load content via Ajax ...
}
else {
$('#station_table').toggle();
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.