search

simonexmachina / jquery-bonsai

Super lightweight jQuery tree plugin
http://simonwade.me/jquery-bonsai
MIT License
148 stars 42 forks source link

Newbie simple test setup #33

Closed chamster closed 7 years ago

chamster commented 7 years ago

Hi. I'm trying to get a simple test working. But all I get when rendered is the nested list. Not collapsible or checkboxes. My code is pasted below. Am I missing something? Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Bonsai Test</title>

<link rel='stylesheet' type='text/css' href='https://github.jspm.io/aexmachina/jquery-bonsai@master/jquery.bonsai.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src='/jquery-bonsai/jquery.bonsai.js'></script>
<script src='/jquery-bonsai/jquery.qubit.js'></script>

<script type="text/javascript">
$('#auto-checkboxes').bonsai({
  expandAll: false,
  checkboxes: true, // depends on jquery.qubit plugin
  createCheckboxes: true // takes values from data-name and data-value, and data-name is inherited
});
</script>

</head>

<body>

<ol id='auto-checkboxes' data-name='foo'>
  <li class='expanded' data-value='0'>All
    <ol>
      <li data-value='1'>One</li>
      <li data-value='2'>
        Two
        <ol>
          <li data-name='baz' data-value='3'>
            Three
            <ol>
              <li data-name='baz' data-value='4' data-checked='1'>Four</li>
            </ol>
          </li>
          <li data-value='5'>Five</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

 <script>
      jQuery(function() {
        $('#music').bonsai();
      });
      </script>
      <ol id='music'>
        <li class='expanded'>Instrumental Ensembles
          <ul>
            <li>String section</li>
            <li>Brass and/or Horns sections</li>
            <li>Percussion Sections</li>
          </ul>
        </li>
        <li>Individual Instruments
          <ul>
            <li>Bass Guitar</li>
            <li>Contrabass</li>
            <li>Drums</li>
            <li>Cymbals</li>
            <li>Guitar - Either</li>
            <li>Guitar (Acoustic)</li>
            <li>Guitar (Electric)</li>
            <li>Keyboarded
              <ul>
                <li>Accordion</li>
                <li>Harpsichord</li>
                <li>Organ</li>
                <li>Piano</li>
                <li>Synth
                  <ul>
                    <li>Imitative Synthesis</li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>Non-Pitched Percussion
              <ul>
                <li>Hand Percussion</li>
              </ul>
            </li>
            <li>Horns
              <ul>
                <li>Trombone</li>
                <li>Trumpet</li>
              </ul>
            </li>
            <li>Idiophone</li>
            <li>String</li>
            <li>Woodwind
              <ul>
                <li>Sax
                  <ul>
                    <li>Soprano</li>
                    <li>Alto</li>
                    <li>Tenor</li>
                    <li>Baritone</li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>Other</li>
          </ul>
        </li>
        <li>Lyrical content</li>
        <li>Vocals
          <ul>
            <li>Male</li>
            <li>Female</li>
          </ul>
        </li>
        <li>Elements</li>
        <li>Other</li>
      </ol>

</body>
</html>
simonexmachina commented 7 years ago

That won't work because #auto-checkboxes doesn't exist in the DOM when the call to .bonsai() is made. You can simply wrap that in an onload callback to fix:

$(function() { // this will be executed on load
  $('#auto-checkboxes').bonsai({...
chamster commented 7 years ago

Thanks so much for the reply. However, still no luck. To keep it simpler I've stripped it down to just the one small tree. Here's what I have now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Bonsai Test</title>

<link rel='stylesheet' type='text/css' href='https://github.jspm.io/aexmachina/jquery-bonsai@master/jquery.bonsai.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src='/jquery-bonsai/jquery.bonsai.js'></script>
<script src='/jquery-bonsai/jquery.qubit.js'></script>

<script type="text/javascript">
$(function() { // this will be executed on load
  $('#auto-checkboxes').bonsai({
    expandAll: false,
    checkboxes: true, // depends on jquery.qubit plugin
    createCheckboxes: true // takes values from data-name and data-value, and data-name is inherited
  })
});
</script>
</head>

<body>
<ol id='auto-checkboxes' data-name='foo'>
  <li class='expanded' data-value='0'>All
    <ol>
      <li data-value='1'>One</li>
      <li data-value='2'>
        Two
        <ol>
          <li data-name='baz' data-value='3'>
            Three
            <ol>
              <li data-name='baz' data-value='4' data-checked='1'>Four</li>
            </ol>
          </li>
          <li data-value='5'>Five</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

</body>
</html>
simonexmachina commented 7 years ago

Works fine for me: https://jsfiddle.net/mpj57s5x/

Check out the Chrome Dev Tools for any Network or JavaScript errors in the Console tab.

chamster commented 7 years ago

Awesome, thanks! My paths to js files were screwed up. Working now. Cheers!

chamster commented 7 years ago

Can I use this as input in a form? I'd like the user to select one of the items via radio button, then pass the selected value to be processed when the form is submitted. The html is all ol's and li's but no input. Will I need to do some custom javascript to make this possible? Thanks.

simonexmachina commented 7 years ago

Yes, you can specify createInputs: 'radio'. There some basic docs here

chamster commented 7 years ago

I've done that: <script type="text/javascript"> $(function() { // this will be executed on load $('#auto-radio-buttons').bonsai({ expandAll: false, createInputs: 'radio' }) }); </script>

It does make radio buttons. And the rendered html is like:

`

  1. Topics
    1. 9/11
    2. Action & Adventure
    3. Agriculture
    4. Alternate History
    5. Animals
      1. Birds & Birdwatching
      2. Connection & Bonds
      3. Dogs
      4. Horses
      6. ` Maybe I'm wrong, but if I put this in a form, I'll see the radio buttons, but since there's no element, nothing gets passed to the processing script.
simonexmachina commented 7 years ago

May I suggest you spend some more time learning how to use the tools you're using :) If you want to put an HTML block in a Github comment (Markdown) you need to use triple-backticks. See here for more info: https://guides.github.com/features/mastering-markdown/

As indicated in the docs: The id, name and value for the inputs can be declared in the markup using data-id, data-name and data-value:

<li data-name='foo' data-value='1'>One</li>
<li data-name='foo' data-value='2'>Two</li>