Jax Logan
asked on
JQuery How to populate dynamic list items
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-121
</tr> \
</table> \
</a></li>'
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-121
</tr> \
</table> \
</a></li>'
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.