I’m creating a dashboard page for a reporting server we have here on site. It’s just a collection of links to reports and a brief description of them. I thought it would be nice to allow users to keep a collection of their favorite reports in a div at the top of the page be checking a box next to the report. I’ve got a js file that is to handle the storing of favorites in localstorage and updating the favorites div on page loads or when a user clicks a checkbox to add it or an X button I fudged to remove it. The first block of code is a snapshot of a portion of the body of the page. The second is the js file. The problem I’m seeing is if there is already a checkbox checked and I check a second box. It seems to be adding the wrong p element although when I deselect some check boxes it sorts itself out. Any help with this weirdness would be appreciated!
<h2>Report Server Dashboard<a href="https://www.freecounterstat.com" title="free website counter"><img src="https://counter6.optistats.ovh/private/freecounterstat.php?c=c4af1t599kzkrhdd7yl7z7qx81nnwrcq" border="0" title="website counter" alt="website counter" style="float:right;"></a></h2>
<div class="ng-binding">
<div class="innerdiv" style="padding-left: 8px; padding-right: 18px; float:left;">
<a style="text-decoration: none" href="/Reports/report/ReportsRun" title="Click here to run a report showing your last 30 days of reports." target="_blank">My last 30 days of reports</a>
</div>
<div class="innerdiv" style="float: inline-start; padding-left: 18px; padding-right: 18px;">
<a style="text-decoration: none" href="mailto:[email protected]?subject=Report%20Server%20report%20or%20customization%20request" title="Click here to start an email to the IT department.">***These are all custom reports displaying information pulled from the live Visual database. If you need a report created or modified please reach out to the IT department***</a>
</div>
<div class="innerdiv" id="expander" style="float: inline-start; padding-left: 18px; padding-right: 18px;">
<span id="spanner" style="text-decoration: none; cursor: pointer;" title="Click to open all sections"></span>
</div>
</div>
<br>
<!--MY FAVORITES-->
<button class="collapsible_nobutton"><strong>MY FAVORITES</strong> - This section contains reports where you've checked the "Add to MY FAVORITES" checkbox.</button>
<div id="favorites">
<p><br></p>
</div>
<br>
<!--INFO REPORTS-->
<button class="collapsible"><strong>INFO REPORTS</strong> - General information reports that don't fall under another specific category</button>
<div class="content">
<p class="paragraph" data-id="1"><input type="checkbox" title="Add to MY FAVORITES section" class="favorite-checkbox" data-id="1"><a href="/Reports/report/INFO%20REPORTS/Customer%20List" target="_blank">CUSTOMER LIST</a>
- This report provides a listing of customers with address and contact information. It shows customers with a Last Order Date both in the date range you select and customers with no Last Order Date.</p>
<p class="paragraph" data-id="2"><input type="checkbox" title="Add to MY FAVORITES section" class="favorite-checkbox" data-id="2"><a href="/Reports/report/INFO%20REPORTS/CUSTOMERS" target="_blank">CUSTOMERS</a>
- This report provides a listing of customers with address and contact information. It has a filterable drop down containing customer names. It also shows the Last Order Date.</p>
</div>
script.js
// Load favorites from local storage on page load
var favorites = JSON.parse(localStorage.getItem('newfavorites')) || [];
// Update the favorites div
updateFavoritesDiv(favorites);
// Handle checkbox clicks
$('.favorite-checkbox').on('change', function() {
var index = $(this).index('.favorite-checkbox');
var isChecked = $(this).is(':checked');
if (isChecked) {
favorites.push(index);
} else {
favorites = favorites.filter(function(i) {
return i !== index;
});
}
// Update local storage and the favorites div
localStorage.setItem('newfavorites', JSON.stringify(favorites));
updateFavoritesDiv(favorites);
});
function updateFavoritesDiv(favorites) {
$('#favorites').empty();
favorites.forEach(function(index) {
var $p = $('p').eq(index).clone();
// Remove the checkbox from the cloned paragraph
$p.find('.favorite-checkbox').remove();
var $removeBtn = $('<button class="button" title="Remove from MY FAVORITES section">X</button><span style="width:12px; display: inline-block;"></span>');
$removeBtn.click(function() {
// Remove the paragraph from favorites and update the display
favorites = favorites.filter(function(i) {
return i !== index;
});
localStorage.setItem('newfavorites', JSON.stringify(favorites));
updateFavoritesDiv(favorites);
});
$p.prepend($removeBtn);
$('#favorites').append($p);
});
}
});