www.webdeveloper.com
Results 1 to 5 of 5

Thread: Tricky point - regarding Lists (li & ul)

  1. #1
    Join Date
    Aug 2008
    Posts
    42

    Tricky point - regarding Lists (li & ul)

    Got a tricky question - don't even know if it's possible:

    I am using the yui scripts, specifically drag and drop for lists.

    I got it to work great.

    But what I want to do is store in my mysql database the new position when I drag and drop so that the next time I view the page it displays the correct sort order based on how I arranged the list with drag and drop.

    Is there a way in javascript to read the position of a list item?

    The solution I had thought up was to use JS to read this number and then update the record using AJAX.

    Does this seem right?

    Thanks

  2. #2
    Join Date
    Apr 2008
    Location
    UK
    Posts
    76
    Quote Originally Posted by saturnprods View Post
    Got a tricky question - don't even know if it's possible:

    I am using the yui scripts, specifically drag and drop for lists.

    I got it to work great.

    But what I want to do is store in my mysql database the new position when I drag and drop so that the next time I view the page it displays the correct sort order based on how I arranged the list with drag and drop.

    Is there a way in javascript to read the position of a list item?

    The solution I had thought up was to use JS to read this number and then update the record using AJAX.

    Does this seem right?

    Thanks
    Yes.

    document.getElementById("theUl").childNodes is your new best friend. He is an array which contains the <li> elements in the order they are displayed,

  3. #3
    Join Date
    Aug 2008
    Posts
    42
    Quote Originally Posted by CuppyTea View Post
    Yes.

    document.getElementById("theUl").childNodes is your new best friend. He is an array which contains the <li> elements in the order they are displayed,
    Thanks! Do you know of any link or page where I can learn more about this?

  4. #4
    Join Date
    Apr 2008
    Location
    UK
    Posts
    76
    Quote Originally Posted by saturnprods View Post
    Thanks! Do you know of any link or page where I can learn more about this?
    Humm.. you might have found out yourself by now, but if not....

    I don't know any specific "amazing" resource- prehaps google will help.

    Say you have....

    Code:
    <script>
    window.onload = init;
    
    function init() {
    	for(var i=0;i<document.getElementById("nav").childNodes.length;i++){
    		alert(document.getElementById("nav").childNodes[i].innerHTML);
    	}
    }
    </script>
    </head>
    
    <body>
    <ul id="nav">
        <li>List Element</li>
        <li>List Element</li>
        <li>List Element</li>
        <li>List Element</li>
        <li>List Element</li>
    </ul>
    </body>
    </html>
    as an example.

    All "childNodes" is, is an array of the objects contained within the tags of the element you are getting the childNodes for.

    (childNodes is an array of OBJECTS - not Id's or anything).

    Hope that slightly helps...

  5. #5
    Join Date
    Feb 2006
    Posts
    2,927
    document.getElementById("theUl").childNodes will include a textnode for each newline in the source, except in IE.

    Better to use document.getElementById("theUl").getElementsByTagName('li')

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles