How To Create jquery code for creating Ul dynamically

Question

I want jquery code to create following Ul in div tag dynamically name and time are different.

I have the name and date from database in json format and I want to create menu from the data using Jquery.

    <div data-role="content">
                <ul data-role="listview" data-divider-theme="b" data-inset="false">
                    <li data-role="list-divider" role="heading"></li>
                    <li data-theme="c"><a data-transition="slide" onclick="javascript:navigation_message_details()">
                        Verinoff,James <span class="patient-list_txt2-red">04/13/2011 12:12</span></a>
                    </li>
                    <li data-theme="c"><a data-transition="slide" onclick="javascript:navigation_message_details()">
                        Parker,Tollin <span class="patient-list_txt2-yellow">04/13/2011 12:10</span> </a>
                    </li>
                    <li data-theme="c"><a data-transition="slide" onclick="javascript:navigation_message_details()">
                        Michael,John <span class="patient-list_txt2-green">04/13/2011 12:04</span></a>
                    </li>
                    <li data-theme="c"><a data-transition="slide" onclick="javascript:navigation_message_details()">
                        Jonah <span class="patient-list_txt2-yellow">04/13/2011 12:03</span></a> </li>
                    <li data-theme="c"><a data-transition="slide" onclick="javascript:navigation_message_details()">
                        Jaffee,Dillon <span class="patient-list_txt2-red">04/13/2011 12:02</span></a>
                    </li>
                    <li data-theme="c"><a data-transition="slide" onclick="javascript:navigation_message_details()">
                        Denny Stephen <span class="patient-list_txt2-blue">04/13/2011 12:01</span></a>
                    </li>
                </ul>
            </div>

Explosion Pills · Accepted Answer · 2012-12-14 14:59:16Z

2

$.each(json, function() {
   $("div[data-role=content] ul")
     .append(
        $("<li>").data('theme', 'c')
           .append($("<a>").data('transition', 'slide')
              .click(navigation_message_details)
              .text(this.name)
              .append($("<span>").addClass('patient-list_txt2-' + this.class)
                 .text(this.date)
              )
           )
        )
     ;
});

I don't know where the color for the class is coming from, so I just assumed it was part of the json.

answered Dec 14, 2012 at 14:59

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

phemt.latd · Accepted Answer · 2012-12-14 15:13:24Z

0

Try this code, for example this can be your json (you take that from ajax server call):

var yourJson = { "data" : [{"name" : "Paolo", "dateTime" : "04/13/2011 12:01"}] };

And then you can iterate on it:

$.each(yourJson.data, function(i)
{
    var li = $('<li/>')
    .addClass('yourCssClass')
    .attr('data-theme', 'c')
    .appendTo(list);

    var aaa = $('<a/>')
    .html(yourJson.data[i].name + " <span class='patient-list_txt2-blue'>" + yourJson.data[i].dateTime + "</span>")
    .attr('data-transition', 'slide')
    .appendTo(li);
});

And this is a fiddle: http://jsfiddle.net/pbBav/

answered Dec 14, 2012 at 15:13

phemt.latd

1,80323 silver badges34 bronze badges

11 Comments

Suhas Over a year ago

how can i add an line after every row?

phemt.latd Over a year ago

A line? you mean a div styled as a line or an <hr> tag? Do you want a separator for the list?

phemt.latd Over a year ago

If you want a line separator i have updated the fiddle: jsfiddle.net/pbBav/4 If you find it usefull update my answer ;)

Suhas Over a year ago

thanks a lot for your great answer.but when i put hr my datetime span overlapping line.

phemt.latd Over a year ago

probably this is a problem related to the html/css of your page... if you give me some more of this code i can give you more help to find a solutions!

|

Collectives™ on Stack Overflow

How To Create jquery code for creating Ul dynamically

2 Answers 2

Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related