In the code snippet below, real-time markup is generated and automatically updates using the setInterval
function. The markup includes buttons and hidden content within div
elements. Each button reveals its corresponding div
, but the div
reverts to a hidden state after each interval refresh. I am looking for a way to retain the visibility of a particular div
even after the interval refresh, especially after it has been clicked. Is there a method in front-end JavaScript to remember which div
was previously shown before the interval refresh? Please note that I am seeking a solution without involving server-side operations. Thank you!
setInterval(itemMenu,1500);
function itemMenu() {
$.ajax({
type: "GET",
url: "Administration/data/people.xml"
}).done(function (xml) {
$("#loadMe").empty();
$("#toadMe").empty();
$(xml).find('fullName').each(function(index) {
// Generate markup for 'loadMe'
var i = index + 1;
var fullName = $(this).text();
$('<button type="button" class="mybutton" name="users" onclick="itemContent(this.value)"></button>').attr('value', i).html(fullName).appendTo('#loadMe');
// Generate markup for 'toadMe'
var firstName = $(this).siblings('firstName');
var lastName = $(this).siblings('lastName');
var age = $(this).siblings('age');
var hometown = $(this).siblings('hometown');
var job = $(this).siblings('job');
$('<div></div>').attr('id', i).appendTo('#toadMe');
$('<h1></h1>').html(firstName).appendTo('#' + i);
$('<h1></h1>').html(lastName).appendTo('#' + i);
$('<h1></h1>').html(age).appendTo('#' + i);
$('<h1></h1>').html(hometown).appendTo('#' + i);
$('<h1></h1>').html(job).appendTo('#' + i);
$('#'+i).hide();
});
}).fail(function (response, error) {
$('#info').text('Error!');
});
};
function itemContent(k) {
$("#"+k).show();
};