Replacing AJAX results when new items are clicked

Replacing AJAX results when new items are clicked

Hey everyone. 

Currently I have two functions that call endpoints in AJAX and they return json files with member information.  These are seperated into two columns (Groups and Members) I can populate everything, however, what I want to happen is when a new different group is clicked, the old results are replaced with the new one instead of being added to the list, which is what is happening now.


  3. //Get JSON from LDAP for groups
  4. $(function displayGroupItems() {
  5. $('.group-submit').click(function(event) {
  6. $.ajax({
  7. url:'ldap/groups',
  8. method: 'GET',
  9. dataType: 'json',
  10. success: function(data) {
  11. $.each(data.groups, function(i, dn) {
  12. output = '<li class="dn-wrapper">' +'<span class="dn-class">'+ dn.dn +'</span>' + '</li>';
  13. $(output).appendTo('#dropdown');

  15. });
  16. }
  17. })
  18. });
  19. });

  21. $(function displayMemberItems() {
  22.   $(document).on('click','.dn-class', function(event) {
  23.   var textclass = $(this).text().replace("/=/g",'%3D').replace("/,/g", '%2C');
  24.   $.ajax({
  25.   url:'ldap/members/'+textclass,
  26.   method:'GET',
  27.   dataType: 'json',
  28.   success: function(pull) {
  29.   $.each(pull.members, function(u, uid) {
  30.   content = '<span>'+uid+'</span>';
  31.   $(content).appendTo('.ldap-users');
  32.   });
  33.   }
  34.   })
  35.   });
  36. });
I'm just not sure where to start. I was looking at replaceWith, but that doesn't seem to apply to this situation.  I will paginate the results, just trying to get all the basic functions down first.

Thank you.