I am new to jQuery and I want to create a sliding table. The original table has 3 levels:
<ul class="categories">
<li id="category1">1 element</li> //parentid=0
<li id="category2">2 element</li> //parentid=0
<ul>
<li id="category3">1 element of element id2</li> //parentid=2
<ul>
<li id="category4">1 element id3</li> //parentid=3
</ul>
</li>
</ul>
</li>
</ul>
The first level elements have parentid = 0, with IDs incrementing from 1. Subsequent levels have nested parentids and their own unique ids.
Initially, the page loads with only the first level visible, where parentid = 0.
<ul class="categories">
<li id="category1">1 element</li> //parentid=0
<li id="category2">2 element</li> //parentid=0
</ul>
My goal is to click on a list item, retrieve its ID, use it to query a MySQL database in PHP, get the results back as a new table, and then slideToggle that new table under the respective list item.
PHP script handling the request:
if(isset($_POST['subcategory'])){
$subcategory = str_replace('category', '', $_POST['subcategory']);
echo build_category_tree($subcategory); // Builds the UL tree
}
After receiving the data from the PHP function, I need to show and toggle the new list under the clicked list item.
Although the new UL is now connected, jQuery seems to be having trouble working with it. I have updated the script as shown below, but the issue persists.
Updated jQuery Function:
$(".tablecategoryname").on('click', function(){
var $a = $(this).closest('li').attr('id');
var $c = $(this).closest('li');
$.ajax({
type: "POST",
url: "functions.php",
data: {subcategory:$a},
cache: false,
success: function(data)
{
$(data).hide().insertAfter($c).slideDown(400);
}
});
});