Insert items to a strange list

Discussion in 'JavaScript' started by psim, Nov 27, 2008.

0
  1. #1
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>script.aculo.us functional test</title>
    <script type="text/javascript" src="../../lib/prototype.js"></script>
    <script type="text/javascript" src="../../src/effects.js"></script>
    <script type="text/javascript" src="../../src/dragdrop.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    var myStartEffect = function(element) {
    element._opacity = Element.getOpacity(element);
    new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7});
    new Effect.Highlight(element, {});
    }
    //]]>
    </script>
    <style type="text/css">
    /*<![CDATA[*/
    h1 {font-size: 1.2em; text-align:center;}
    li {
    margin: 5px auto;
    padding: 2px;
    width: 200px;
    text-align:center;
    list-style-type:none;
    border: 2px solid #779;
    background-color: #dde
    }
    div {
    margin: 5px auto;
    padding: 2px;
    width: 300px;
    text-align:center;
    border: 2px solid #797;
    background-color: #ded
    }
    /*]]>*/
    </style>
    <script type="text/javascript" charset="utf-8">
    var incVar = 3;
    </script>

    </head>

    <body>
    <h1>No delay sortable</h1>

    <ul id="sort1">
    <li recordid="1">one</li>

    <li recordid="2">two</li>

    <li recordid="3">three</li>
    </ul>

    <input name="insert" type="button" onClick="$('sort1').insert({bottom: '<li recordid=' + Number(++incVar) + '> XXXXXXXXXXX </li>'}); Sortable.create('sort1', {starteffect:myStartEffect});" />
    <script type="text/javascript" charset="utf-8">
    Sortable.create('sort1', {starteffect: myStartEffect});
    </script>

    <script type="text/javascript" charset="utf-8">
    function getOrder() {
    var orderList = '';
    orderedNodes = document.getElementById("sort1").getElementsByTagName("li");
    for (var i=0;i < orderedNodes.length;i++) {
    orderList += orderedNodes.getAttribute('recordid') + ', ';
    }
    alert(orderList);
    }
    </script>
    <input name="insert" type="button" onClick="getOrder()"/>

    </body>
    </html>
    I want to insert an element like that " <li id="li_1" >
    <label class="description" for="element_1">Text </label>
    <div>
    <input id="element_1" name="element_1" class="element text medium" type="text" maxlength="255" value=""/>
    </div>
    </li>" in XXXXXXXX
    and then to be able to get the value from that....is that possible???
     
    psim, Nov 27, 2008 IP