Not working with Ajax

[renjithprince]

Plugin is working with normal HTML. But im fetching the child nodes using ajax, In this case the plugin is not working. Is there any way to Fix this?

[simonexmachina]

This is definitely supported. You need to ensure that you're calling $('#foo').bonsai() after #foo has been populated. Version 1.0 also has an update method now, see the docs.

Can you post a JSBin showing your problem?

[scompto]

I am having the general plugin working, but the data object being passed through the onListItem event does not contain the id of the element from the JSON, or the name. This means I cannot data-bind it to the value of the checkbox. This is the case with your own example on http://aexmachina.github.io/jquery-bonsai/

[simonexmachina]

I'm not seeing any issues with that. Can you be more specific, or maybe create a JSBin that shows the problem.​

[simonexmachina]

Resolved by PR to jquery-json-list

[joshuapinter]

Hi @aexmachina and @scompto, I'm trying to get the child nodes being pulled in via AJAX when the parent node is expanded. Is there a good example for this or can you point me in the right direction?

Thanks!

(Great library, btw! 👍 )

[simonexmachina]

You'd want to subscribe to $('.tree input[type=checkbox]').on('change', loadChildren) and then do something like this:

function loadChildren() {
  $el = $(this)
  addChildNodes($el).then(() => $('.tree').bonsai('update'))
}

[joshuapinter]

@aexmachina Beautiful. Exactly what I needed. Thanks again!

[joshuapinter]

Just to help others, here is roughly how I accomplished this.

(In CoffeeScript.)

# Dynamically load child nodes when expanded.
$('li.parent.has-children > div.thumb').click( -> 
  $ul = $( @ ).siblings('ul')

  # I put a loading div inside as a placeholder. If there is no loader, it's already been loaded.
  already_loaded = ( $ul.find( ".loader" ).length == 0 ) 

  # Don't load again if already loaded.
  return if already_loaded

  $ul.load( $ul.data( 'url' ) )
)

It's important that you put at least one child <li> in order for Bonsai to know that there are children and show the expand arrow for users to click on. I used this child <li> as a loader placeholder.

<li>
  <div class="loader"></div>
</li>

Those are the key pieces. You can tweak and play with the rest as necessary.

[simonexmachina]

Better to go .on('change' so that it works with the keyboard too 👍