Jquery AJAX create select with parent-child functionality

Question

I have a data structure that goes like this:

Forum
   Topic
      Post
   Subscriptions
   Polls
Members
   Email

And so on. In reality there can be unlimited number of children. I want to create a jquery ajax call on page load, to get the outermost parents. Then, when I select a parent, another ajax call triggers, getting the children of this parent in ANOTHER select if they exist. Then, if i click on that child, another ajax call triggers, getting the children of the selected child, and so on and so forth. Then, when i click a different parent, all selects of previous parent dissapear.

How do i code this?

So far I have this: (parent_id=0 meaning: get outermost parents)

$.ajax({
    method: 'get',
    url: 'ajaxLoad.php?action=manage-permissions&mod=_get-entities&parent_id=0',
    success: function (response){
        $("#entities").html(response);
    }   
});    

//The below line does not work because the call is asynchronous and i prefer to keep it that way as its recommended
$(".parent_select").change(function(){
    alert("Chose");
});

UPDATE 1:

I have restructed the code so it looks like this:

var visible_entities = [];
var active_entity = 0;

function myCallback(result)
{
    if (result != "no_children")
    {
        $("#entities").append(result);      
    }

    $(".parent_select").change(function(){

        visible_entities.push( $(this).attr('rel') );

        foo(myCallback,$(this).val());

        for (i=0; i <= visible_entities.length; i++)
        {

        }

        active_entity = $(this).val();
    });    
}

function foo(callback,id)
{
    $.ajax({
        method: 'get',
        url: 'ajaxLoad.php?action=manage-permissions&mod=_get-entities&parent_id='+id,
        success: myCallback   
    });     
}

foo(myCallback,0);

Now I get every child in a new select tag. But when I change to another parent, the selects grow exponentially and still dont dissapear.

Answer 1

I tried to understand your problem and so I found a solution, of course, because I do not have the client side I simulate it with an object client side.

var JSONSampleMenu = {
  'Forum': {'Topic': {'Post': null}, 'Subscriptions': null, 'Polls': null},
  'Members': {'Email': null}
};
var urlSample = URL.createObjectURL(new Blob([JSON.stringify(JSONSampleMenu, undefined, 4)], {type: 'application/json'}));


function myCallback(result, obj) {
  var mySubMenu = '<ul>';
  $.each(result, function(index, element) {
    mySubMenu += '<li class="menuItem">' + index + '</li>';
  });
  mySubMenu += '</ul>'
  obj.append(mySubMenu);
}
function getObject(response, menuName) {
  for(o in response) {
    if (o ==  menuName) {
      if (response[menuName])
        return response[menuName];
      else
        return null;
    }
  }
  for(o in response) {
    if (o != null) {
      var obj = getObject(response[o], menuName);
      if (obj != null) {
        return obj;
      }
    }
  }
  return null;
}

function toggleMenu(e, afterCreate) {
        var obj = $(e.target);
        if (obj.parent().attr('id') == 'menu') {
            if (afterCreate) {
                obj.siblings().children().toggle();
            } else {
                obj.children().toggle();
                obj.siblings().children().toggle();
            }
        } else {
            if (!afterCreate) {
                obj.children().toggle();
            }
        }
}

$(function () {
  $(document).on('click', ".menuItem", function(e){
    e.stopImmediatePropagation();
    var obj = $(this);
    if (obj.children().length == 0) {
      var menuName = this.innerText;
      var menuDepth = obj.parents('#menu');
      $.ajax({
        method: 'get',
        url: urlSample,
        success: function (response) {
          var menuObj = getObject(response, menuName);
          if (menuObj != null) {
            myCallback(menuObj, obj);
            toggleMenu(e, true);
          }
        }
      });
    } else {
      toggleMenu(e, false);
    }
  });
});

<script src="//code.jquery.com/jquery-1.11.3.js"></script>

<ul id="menu">
    <li class="menuItem">Forum</li>
    <li class="menuItem">Members</li>
</ul>