On my website, I have a side menu with multiple navigation items. In the admin section, there is a table where I can manage these items. The issue arises when I delete an item from the table using ajax - it gets deleted from both the table and the side menu. I used the load function to refresh the items in the menu. However, if I delete multiple items, I end up getting multiple confirmation pop-ups based on the number of elements removed.
https://i.sstatic.net/NgJRK.png Take a look at the image for reference. When I click on the delete button, the item is removed from the database and the table. Deleting the first item triggers a single confirm pop-up as expected. But subsequent deletions result in multiple pop-ups appearing. Where could I be going wrong here?
Menu Code:
echo '<div id="slide-out" class="side-nav sn-bg-4 fixed mdb-sidenav">
<ul id="menu_ul" class="custom-scrollbar list-unstyled" style="max-height:100vh;">
<!-- Side navigation links -->
<li>
<ul id="side-menu" class="collapsible collapsible-accordion">
<li id="home" class="menu-item menu-item-type-custom menu-item-object-custom"><a class="collapsible-header waves-effect" href="/admin/view/main.php"><img src="/imgs/icones/ic_home.png">Home</a></li>';
foreach ($Menu_array as $valor)
{
echo '<li id='. $valor->getCategoria()->getCat_id() .' class="menu-item menu-item-type-custom menu-item-object-custom'. $menu_filhos .'"><a class="collapsible-header waves-effect '"><img style="margin-right:10px; vertical-align: text-bottom; text-align:left" src="'.$valor->getCategoria()->getCat_img().'">'. $valor->getCategoria()->getCat_nome().'</a>';
$array_SCat = [];
$array_SCat = $valor->getlist_SCat();
if((count($valor->getlist_SCat())) > 0)
{
echo '<div class="collapsible-body">
<ul class="sub-menu">';
foreach($array_SCat as $val)
{
echo '<li class="menu-item menu-item-type-post_type menu-item-object-page '"><a class="collapsible-header waves-effect" id='.$val->getSCat_id().' href="'.$variaveis->getDominio().'/'.$variaveis->getNome_site().'/admin/view/ld.php?id_cat='.$valor->getCategoria()->getCat_id().'&id_subcat='.$val->getSCat_id().'">'.$val->getSCat_nome().'</a></li>';
}
</ul>
</div>';
}
}
}
echo '</ul>
</li>
<!-- /. Side navigation links -->
</ul>
</div>';
The table code for deleting an item:
<table width="100%">
<tbody>
<tr>
<td><a id="deleteItem" name="'.$val->getSCat_id().'">Delete</a></td>
</tr>
Ajax code:
$(document).on("click", "#deleteItem", function(e) {
e.preventDefault();
var idItem = $(this).attr('name');
var $tr = $(this).closest('tr');
if (confirm('Do you want to delete this item?')) {
$.ajax({
url: '/admin/control/ajax/remove.php',
type: 'POST',
data: {id: idItem},
dataType: 'html',
success: function(response) {
var result = $.trim(response);
if(result === "success") {
$tr.find('td').fadeOut(800,function(){
$tr.remove();
});
$("body").load('#slide-out');
} else if(result === "error") {
alert("Error.");
}
}
});
}
});
Note that I included this line in ajax:
$("body").load('#slide-out');
This allows the body to call and load the menu with the ID slide-out.