Solved

Creating UL dynamically

Posted on 2010-08-19
21
1,418 Views
Last Modified: 2013-11-18
I am trying to figure out how to create an <UL> dynamically. What I was hoping to do is have three buttons.

1. to create a new li
2. to create a new <ul><li> inside of a <li> for a sub category
3. to delete be able to have a checkbox next to each <li> so I can check and delete a sepcific one if I need to after I created them..
4. I need to be able to choose what type of object will be inserted between the <li> tags when the <li> is created...

Any help would be great..thanks
0
Comment
Question by:brad0525
  • 14
  • 7
21 Comments
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
So you want to go from something like this:

<ul>
  <li>One</li>
  <li id='here'>Two</li>
  <li>Three</li>
</ul>

To this:

<ul>
  <li>One</li>
  <li id='here'>Two</li>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  <li>Three</li>
</ul>
0
 

Author Comment

by:brad0525
Comment Utility
Yea, basically. I need it to be able to make something like the below code. But I need to add each one dynamically and have the ability to delete or add back in if needed..thanks
<ul>

  <li>item</li>

  <li>item

    <ul>

	  <li>item</li>

	  <li>item</li>

	  <li>item

	    <ul>

		  <li>item1</li>

		  <li>item1 

          <ul>

		  <li>item1</li>

		  <li>item1

          

          

          </li></ul>

          

          

          </li>

		</ul>

	  </li>

	</ul>

  </li>





</ul>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
What you have isn't valid.

For example:
<ul>
  <li>item</li>
  <li>item
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item                          // Missing "</li>"
        <ul>
          <li>item1</li>
          <li>item1                     // Missing "</li>"
            <ul>                        // Is this supposed to be nested?
              <li>item1</li>
              <li>item1
              </li>
            </ul>
          </li>                         // Ah, this "nested" ul isn't between <li> and </li>
        </ul>
      </li>                          // Again, this is at the wrong place
    </ul>
  </li>                              // Again, wrong place
</ul>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
This is the proper syntax
<ul>
  <li>item</li>
  <li>item</li>
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
        <ul>
          <li>item 1</li>
          <li>item 2</li>
            <ul>
              <li>item A</li>
              <li>item B</li>
            </ul>
        </ul>
    </ul>
</ul>

Open in new window

0
 

Author Comment

by:brad0525
Comment Utility
Yea, sorry I did write that incorrectly...Do you know how it can be created so that these items can be created dynamically?
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
For example:
<html>
<body>

<ul>
  <li>A</li>
  <li>B</li>
    <ul>
      <li>B 1</li>
      <li>B 2</li>
      <li>B 3</li>
        <ul>
          <li>B 3.1</li>
          <li>B 3.2</li>
            <ul>
              <li>B 3.2.1</li>
              <li>B 3.2.2</li>
            </ul>
        </ul>
    </ul>
</ul>


</body>
</html>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
Looking.  I'm "almost there" ;-)
0
 

Author Comment

by:brad0525
Comment Utility
Ok great...thanks
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
Kind of like this?
<html>
<head>
<title> Dynamic LI creation </title>
<script type='text/javascript' src='../../objDisplay.js'></script>
<script type='text/javascript'>
  function field( id ) {
    var ele = document.getElementById( id );
    if ( !ele ) {
      alert( 'Specified element not found. id="' + id + '".' );
    }
    return ele;
  }

  function nextLI( referenceNode ) {
    var obj = referenceNode.nextSibling;
    while ( obj && obj.nodeName != 'LI' ) {
      obj = obj.nextSibling;
    }
    return obj;
  }

  function doit( id ) {
    var where = field( id );
    if ( where ) {
      var ul = document.createElement( 'UL' );
      where.parentNode.insertBefore( ul, nextLI( where ) );
      var info = 'Mon,Tue,Wed'.split( ',' );
      for ( var i = 0; i < info.length; i++ ) {
        var li = document.createElement( 'li' );
        li.appendChild( document.createTextNode( info[ i ] ) );
        ul.appendChild( li );
      }
    }
  }
</script>
</head>
<body>
 
<ol compact>
  <li>Uno</li>
  <li id='here'>Dos</li>
  <li>Tres</li>
</ol>
<input type='button' value='Insert' onclick='doit("here")'>

<div id='debug'></div>
</body>
</html

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
You don't need the

<script type='text/javascript' src='../../objDisplay.js'></script>


I just use that to help me debug.
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:brad0525
Comment Utility
OK well that is kinda right, but not exactly what I need. I need to be able to create the

 <li>Uno</li>
  <li id='here'>Dos</li>
  <li>Tres</li>


dynamically too...I also need to be able to choose which li I will be adding a ul to.
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
ok, to do the initial insertion / creation I was able to use this.

The question remains:

Q: How do you want to define the insertion point, and the LI values to be used?
<html>
<head>
<title> Dynamic LI creation </title>
<script type='text/javascript'>
  function field( id ) {
    var ele = document.getElementById( id );
    if ( !ele ) {
      alert( 'Specified element not found. id="' + id + '".' );
    }
    return ele;
  }

  // insert newNode after oldNode
  function insertAfter( newNode, oldNode ) {
    oldNode.parentNode.insertBefore( newNode, oldNode.nextSibling );
  }

  function nextLI( referenceNode ) {
    var obj = referenceNode.nextSibling;
    while ( obj && obj.nodeName != 'LI' ) {
      obj = obj.nextSibling;
    }
    return obj;
  }

  function doit() {
    var where = field( 'here' );  // Initial insertion point
    if ( where ) {
      var ul = document.createElement( 'UL' );
      insertAfter( ul, where );
      var info = 'Uno,Dos,Tres'.split( ',' );
      for ( var i = 0; i < info.length; i++ ) {
        var li = document.createElement( 'li' );
        li.appendChild( document.createTextNode( info[ i ] ) );
        ul.appendChild( li );
      }
    }
  }
</script>
</head>
<body>
 
<div id='here'></div> 
<input type='button' value='Insert' onclick='doit()'>

</body>
</html>

Open in new window

0
 

Author Comment

by:brad0525
Comment Utility
Ok so we are getting a little closer. Right now it seems as thought it is creating a new UL everytime we click insert. I need it to create a new UL intiailly but have the ability to insert a LI or beign a new UL. Also I only need one <li> at a time.

The insertion point should be right after the last item inserted. I still need to be able to add a nested UL or a new UL as well as just a li...As for the insertion point, if I need to insert where I have already created an item I think maybe a checkbox would work?
0
 

Author Comment

by:brad0525
Comment Utility
Here is kind of a n example..It kinda works, but I need more functionality to it..Add I do not want any items pre determined when the page is loaded.
<script type="text/javascript">

function expandCollapse(obj)

{

hlink = obj.innerHTML;

obj = obj.parentNode;



if(obj.childNodes.length <= 1) {



var list = document.createElement("OL");

     obj.appendChild(list);

     var li = document.createElement("LI");

     list.appendChild(li);

     li.innerHTML = '<a href="#" onclick="expandCollapse(this);">item 1</a>';

     var li2 = document.createElement("LI");

     li2.innerHTML = '<a href="#" onclick="expandCollapse(this);">item 2</a>';

     list.appendChild(li2);

	 var li3 = document.createElement("LI");

     li3.innerHTML = '<a href="#" onclick="expandCollapse(this);">item 3</a>';

     list.appendChild(li3);



} else {

obj.innerHTML = "<a href='#' onclick='expandCollapse(this);'>"+hlink+"</a>";

}

}

</script>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
> I need it to create a new UL intiailly but have the ability to insert a LI or beign a new UL.

  Kind of.  You don't think that this makes sense...

<ul>
<ul>

  I think that you need to have this as a minimum:

<ul>
  <li>...</li>

Does that make sense?
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
re: http://www.experts-exchange.com/Q_26414099.html#a33475932

How do you define the initial insertion point?
0
 

Author Comment

by:brad0525
Comment Utility
Ok I am confused...I need to be able to build something similar to the code below dynamically.I just need it to be a blank page when I get there. I will then click  button to build the overall UL. And then ther first <li> will appear. After that I will have the choice to grow the li with another ul or go back to the original overall UL and build a new li....I hope that clarifies what I am looking for..
<body>





<ul>

  <li>item</li>

  <li>item

    <ul>

	  <li>item</li>

	  <li>item</li>

	  <li>item

	    <ul>

		  <li>item1</li>

		  <li>item1 

          <ul>

		  <li>item1</li>

		  <li>item1

          

          

          </li></ul>

          

          

          </li>

		</ul>

	  </li>

	</ul>

  </li>





</ul>







 

</body>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
> I just need it to be a blank page when I get there.

  ok, that seems reasonable.

> I will then click  button to build the overall UL.

  If the page is blank, where is the button?

  If the page only has a button on it, do you want the ul before, or after the button?
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
I have an idea... let me try something.
0
 
LVL 41

Accepted Solution

by:
HonorGod earned 500 total points
Comment Utility
Check this out...
<html>
<head>
<title> Dynamic LI creation </title>
<script type='text/javascript'>
  function field( id ) {
    var ele = document.getElementById( id );
    if ( !ele ) {
      alert( 'Specified element not found. id="' + id + '".' );
    }
    return ele;
  }

  // insert newNode after oldNode
  function insertAfter( newNode, oldNode ) {
    oldNode.parentNode.insertBefore( newNode, oldNode.nextSibling );
  }

  function addHere( where ) {
    var source = field( 'source' );
    if ( where && source ) {
      var data = source.value;
      if ( data.length > 0 ) {
        var info = data.split( '\n' );
        var ul = document.createElement( 'UL' );
        insertAfter( ul, where );
        for ( var i = 0; i < info.length; i++ ) {
          var li  = document.createElement( 'li' );
          var a   = document.createElement( 'a' );
          a.href = '#';
          a.innerHTML = info[ i ];
          a.onclick = function( that ) {
            return function() {
              addHere( this );
              return false;
            }
          }(this);
          li.appendChild( a );
          ul.appendChild( li );
        }
        var button = field( 'button' );
        if ( button ) {
          button.disabled = true;
        }
        source.value = '';
      } else {
        alert( 'Please provide some data.');
      }
    }
  }

  function doit() {
    var where  = field( 'here' );  // Initial insertion point
    if ( where ) {
      addHere( where );
    }
  }
</script>
</head>
<body>
 
<div id='here'></div> 
<input type='button' id='button' value='Insert' onclick='doit()'><br />
<textarea id='source' rows='10' cols='10'></textarea>

</body>
</html>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
Thanks for the grade & points.

Good luck & have a great day.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

In this article you will learn how to create a free basic website on Bitbucket, a git service provider. Polymer creates dynamic HTML components, which allow more flexibility than static HTML. This tutorial uses Ubuntu Linux but can also be done on W…
Before we dive into the marketing strategies involved with creating an effective homepage, it’s crucial that EE members know what a homepage is. In essence, a homepage is the introductory, or default page, of a website that typically highlights the …
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now