Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Newbie simple test setup

See original GitHub issue

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>

Issue Analytics

State:
Created 7 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

simonexmachinacommented, Feb 14, 2017

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>

0reactions

chamstercommented, Feb 14, 2017

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:

Topics
1. 9/11
2. Action & Adventure
3. Agriculture
4. Alternate History
5. Animals
  1. Birds & Birdwatching
  2. Connection & Bonds
  3. Dogs
  4. Horses

Top Results From Across the Web

Manual Testing for Beginners | BrowserStack

How to perform Manual Testing · Analyze requirements from the software requirement specification document · Create a clear test plan · Write test...

Software Testing – Beginner's Guide - freeCodeCamp

In unit testing, you test individual units or functions of your software's source code. Unit testing can be done automatically or manually. ...

Beginner's Guide on Unit Tests. What, Why, and How to Write ...

You start by writing one test to cover one requirement. · You write the implementation to make it pass the test (green). ·...

Jest Tutorial for Beginners: Getting Started With JavaScript ...

When it comes to testing, even a simple block of code could paralyze beginners. The most common question is "How do I know...

A Basic Introduction To C# Unit Test For Beginners

Let's Implement TDD using MS Unit Testing · using System; · using Microsoft.VisualStudio.TestTools.UnitTesting; · namespace BasicMathTDDTest { · [ ...