jsTree jQuery plugin (nodes with children not showing up)

1

Hey Guys, :slightly_smiling_face:

I am using jsTree jQuery plugin in a project, I am getting the data correctly from the database, but clicking to the nodes that have children doesn’t do anything.
The data is displaying as it should in HTML format.
image1

Does anybody know what may be wrong?

This is the code for reference:

<div class="container  well" id="tree">
   <?php 
     echo '<ul>';
       $offset = '';
       foreach($users as $user) : 
         if($user['department'] != $offset) {
           echo '<li>' . $user['department'] . '</li>';
           $offset = $user['department']; 
         }
         echo '<ul><li>' . $user['fullname'] . '</li></ul>';
       endforeach;
     echo '</ul>';
   ?>
</div> 

JS File:
$("#tree").jstree();
2

2png

5

Fixed, many thanks @randerlldawson!
Cheers!

6

@camperextraordinaire The problem now is that I am not getting the next child in the CS department… HTML looks good to me. Do you have any idea why?

<div class="container  well" id="tree">
    <?php 
      echo '<ul>';
        $offset = '';
        foreach($users as $user) : 
          if($user['department'] != $offset) {
            echo '<li>' . $user['department'];
            $offset = $user['department']; 
          }
          echo '<ul><li>' . $user['fullname'] . '</li></ul>';
          echo '</li>';
        endforeach;
      echo '</ul>';
    ?>
</div>
7

You are now producing the html below. See my comments below. Your php logic is still off. Right out your algorithm on paper without code first. Once you figure out the pseudo-code version, then try to write it in php.

<ul>
  <li>Business
    <ul>
      <li>Leo Rodriguez</li>
    </ul>
  </li>
  <li>Computer Science
    <ul>
      <li>Harry Jones</li>
    </ul>  // should not be closing this off yet, because Sabi needs to have an li element
  </li> // should not be closing this off yet, because there are more in the same department
  <ul> // should only be starting a new ul element when the department changes
    <li>Sabi</li> // this line needs to below the Harry Jones li element.
  </ul>
  </li>
  <li>IT
    <ul>
      <li>Tim Ben</li>
    </ul>
  </li>
  <li>Marketing
    <ul>
      <li>John Doe</li>
    </ul>
  </li>
</ul>
8

This fixed it. Thanks again for helping visualize the problem…

<div class="container  well" id="tree">
    <?php 
      echo '<ul>';
        $offset = '';
        foreach($users as $user) : 
          if($user['department'] != $offset) {
            echo '<li>' . $user['department']; 
            $offset = $user['department'];
          }
          echo '<ul><li>' . $user['fullname'] . '</li>';
          echo '</ul>';
        endforeach;
      echo '</ul>';
    ?>
</div>