JQuery How to populate dynamic list items

Posted on 2012-08-17
Last Modified: 2012-08-18
Yeah, so I hope this question is not too vague.

Let's say I have a dynamic ordered html list which will be populated with JSON from the server, e.g. a list of user information.

The list item itself consists of other elements like address, phone etc (see below). Of course I don't know up front how many list items I will get and what the information inside the list items will be. So what I'd like to do is fill out the values inside the list item based on their id (e.g. addr1, addr2). In order to do this I would like to create a type of 'prototype' list item and then be able to use a JQuery selector to populate the li field values based on id and then add them to the <ol> element using JQuery.

Can you tell me what this JQuery concept is called and perhaps point me to a sample?

My prototype li item:
                        <li id="'+i+'"> \
                              <table> \
                                    <tr> \
                                        <td width="10%"><p id="addr1">blah</p></td> \
                                        <td width="10%"><p id="addr2">Appt 1234</p></td> \
                                        <td width="10%" id="phone1"><p>888-555-1212</p></td> \
                                    </tr> \
                              </table> \
Question by:php-newbie
    1 Comment
    LVL 75

    Accepted Solution

    You cannot use ID since ID needs to be unique. Instead use class names and clone the object.

    Something like

    var listItem = $('<li> \
                                  <table> \
                                        <tr> \
                                            <td width="10%"><p class="addr1"></p></td> \
                                            <td width="10%"><p class="addr2"></p></td> \
                                            <td width="10%" class="phone1"><p></p></td> \
                                        </tr> \
                                  </table> \
    $.get('someJSON',function(data) {
      $.each(data,function(i,addr) {
        var addrItem = listItem.clone();

    Open in new window


    Featured Post

    Maximize Your Threat Intelligence Reporting

    Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

    Join & Write a Comment

    There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    729 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

    22 Experts available now in Live!

    Get 1:1 Help Now