jsTree jQuery plugin (nodes with children not showing up)

jsTree jQuery plugin (nodes with children not showing up)
0.0 0

#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


#3

Can you post a link to your current entire code online (Codepen, github, JSFiddle). It really helps to see everything to make sure there is not something simple that needs to be added. Are you getting any errors showing in the browser console?

If nothing else, can you post what you have in the $users array?


#4

@enric

I had to guess your array looked something like:

    $users = array(
      array(
        'department' => 'Business',
        'fullname' => 'Leo Rodriguez'
      ),
      array(
        'department' => 'Computer Science',
        'fullname' => 'Harry Jones'        
      ),
      array(
        'department' => 'Computer Science',
        'fullname' => 'Sabi'        
      ),
      array(
        'department' => 'IT',
        'fullname' => 'Tim Ben'        
      ),  
      array(
        'department' => 'Marketing',
        'fullname' => 'John Doe'        
      ),        
    );

If so, then your php code produces incorrect html syntax for the jsTree code to work correctly. You need to rethink your logic to produce the correct layout. Your current php code produces the following:

<ul>
  <li>Business</li>
  <ul>
    <li>Leo Rodriguez</li>
  </ul>
  <li>Computer Science</li>
  <ul>
    <li>Harry Jones</li>
  </ul>
  <ul>
    <li>Sabi</li>
  </ul>
  <li>IT</li>
  <ul>
    <li>Tim Ben</li>
  </ul>
  <li>Marketing</li>
  <ul>
    <li>John Doe</li>
  </ul>
</ul>

when it should produce:

<ul>
  <li>Business
    <ul>
      <li>Leo Rodriguez</li>
    </ul>
  </li>
  <li>Computer Science
    <ul>
      <li>Harry Jones</li>
      <li>Sabi</li>
    </ul>
  </li>
  <li>IT
    <ul>
      <li>Tim Ben</li>
    </ul>
  </li>
  <li>Marketing
    <ul>
      <li>John Doe</li>
    </ul>
  </li>
</ul>

image


#5

Fixed, many thanks @randerlldawson!
Cheers!


#6

@randelldawson 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> 

#9

It may not work on all browsers the same, because the html syntax is still malformed. You can see why more clearly when I use indentation;

 <ul>
  <li>Business
    <ul>
      <li>Leo Rodriguez</li>
    </ul>
    <li>Computer Science
      <ul>
        <li>Harry Jones</li>
      </ul> // this should technically not be here
      <ul>  // this should technically not be here
        <li>Sabi</li>
      </ul>
      <li>IT
        <ul>
          <li>Tim Ben</li>
        </ul>
     // you are missing a closing li here
        <li>Marketing
          <ul>
            <li>John Doe</li>
          </ul>
    // you are missing a closing li here
</ul>