Question : Using AJAX to render tabular data with nested tables

I want to generate a table with data from an XML file... this is the hard-coded HTML I want to generate dynamically using the jQuery AJAX call ....

 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:

<table summary="Extravaganza Daily Agenda" class="agendaInfo">
							<caption>DAILY SCHEDULE</caption>
								<tr>
									<td>
										<table>
											<thead id="oct14">
												<tr>
													<th>Thursday, October 14</th>
													<th>Time</th>
													<th>Location</th>
													<th>Dress Attire</th>
												</tr>
											</thead>									
											<tbody id="oct14Agenda">
												<tr>
													<td>President's Team Registration (Palomar Hotel)</td>
													<td>2:00 p.m. - 10:00 p.m.</td>
													<td>Palomar Hotel, Rialto A/B</td>
													<td>Casual</td>
												</tr>	
												<tr>
													<td>President's Team Registration (Palomar Hotel)</td>
													<td>2:00 p.m. - 10:00 p.m.</td>
													<td>Palomar Hotel, Rialto A/B</td>
													<td>Casual</td>
												</tr>
												<tr>
													<td>President's Team Registration (Palomar Hotel)</td>
													<td>2:00 p.m. - 10:00 p.m.</td>
													<td>Palomar Hotel, Rialto A/B</td>
													<td>Casual</td>
												</tr>	
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td>
										<table>
											<thead id="oct14">
												<tr>
													<th>Friday, October 15</th>
													<th>Time</th>
													<th>Location</th>
													<th>Dress Attire</th>
												</tr>
											</thead>									
											<tbody id="oct14Agenda">
												<tr>
													<td>President's Team Registration (Palomar Hotel)</td>
													<td>2:00 p.m. - 10:00 p.m.</td>
													<td>Palomar Hotel, Rialto A/B</td>
													<td>Casual</td>
												</tr>	
												<tr>
													<td>President's Team Registration (Palomar Hotel)</td>
													<td>2:00 p.m. - 10:00 p.m.</td>
													<td>Palomar Hotel, Rialto A/B</td>
													<td>Casual</td>
												</tr>
												<tr>
													<td>President's Team Registration (Palomar Hotel)</td>
													<td>2:00 p.m. - 10:00 p.m.</td>
													<td>Palomar Hotel, Rialto A/B</td>
													<td>Casual</td>
												</tr>	
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td>
										<table>
											<thead id="oct14">
												<tr>
													<th>Saturday, October 16</th>
													<th>Time</th>
													<th>Location</th>
													<th>Dress Attire</th>
												</tr>
											</thead>									
											<tbody id="oct14Agenda">
												<tr>
													<td>President's Team Registration (Palomar Hotel)</td>
													<td>2:00 p.m. - 10:00 p.m.</td>
													<td>Palomar Hotel, Rialto A/B</td>
													<td>Casual</td>
												</tr>	
												<tr>
													<td>President's Team Registration (Palomar Hotel)</td>
													<td>2:00 p.m. - 10:00 p.m.</td>
													<td>Palomar Hotel, Rialto A/B</td>
													<td>Casual</td>
												</tr>
												<tr>
													<td>President's Team Registration (Palomar Hotel)</td>
													<td>2:00 p.m. - 10:00 p.m.</td>
													<td>Palomar Hotel, Rialto A/B</td>
													<td>Casual</td>
												</tr>	
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td>
										<table>
											<thead id="oct14">
												<tr>
													<th>Sunday, October 17</th>
													<th>Time</th>
													<th>Location</th>
													<th>Dress Attire</th>
												</tr>
											</thead>									
											<tbody id="oct14Agenda">
												<tr>
													<td>President's Team Registration (Palomar Hotel)</td>
													<td>2:00 p.m. - 10:00 p.m.</td>
													<td>Palomar Hotel, Rialto A/B</td>
													<td>Casual</td>
												</tr>	
												<tr>
													<td>President's Team Registration (Palomar Hotel)</td>
													<td>2:00 p.m. - 10:00 p.m.</td>
													<td>Palomar Hotel, Rialto A/B</td>
													<td>Casual</td>
												</tr>
												<tr>
													<td>President's Team Registration (Palomar Hotel)</td>
													<td>2:00 p.m. - 10:00 p.m.</td>
													<td>Palomar Hotel, Rialto A/B</td>
													<td>Casual</td>
												</tr>	
											</tbody>
										</table>
									</td>
								</tr>	
						</table>


This is the xml

 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:

<?xml version="1.0" encoding="UTF-8"?>
<agenda>
	<day id="Thursday October 14">
		<event>
			<title>President's Team Registration (Palomar Hotel)</title>
			<time>2:00 p.m. - 10:00 p.m.</time>
			<location>Palomar Hotel, Rialto A/B</location>
			<dress>Casual</dress>
		</event>
		<event>
			<title>President's Team Registration (Palomar Hotel)</title>
			<time>2:00 p.m. - 10:00 p.m.</time>
			<location>Palomar Hotel, Rialto A/B</location>
			<dress>Casual</dress>
		</event>
		<event>
			<title>President's Team Registration (Palomar Hotel)</title>
			<time>2:00 p.m. - 10:00 p.m.</time>
			<location>Palomar Hotel, Rialto A/B</location>
			<dress>Casual</dress>
		</event>
	</day>
	<day id="Friday October 15">
		<event>
			<title>President's Team Registration (Palomar Hotel)</title>
			<time>2:00 p.m. - 10:00 p.m.</time>
			<location>Palomar Hotel, Rialto A/B</location>
			<dress>Casual</dress>
		</event>
		<event>
			<title>President's Team Registration (Palomar Hotel)</title>
			<time>2:00 p.m. - 10:00 p.m.</time>
			<location>Palomar Hotel, Rialto A/B</location>
			<dress>Casual</dress>
		</event>
		<event>
			<title>President's Team Registration (Palomar Hotel)</title>
			<time>2:00 p.m. - 10:00 p.m.</time>
			<location>Palomar Hotel, Rialto A/B</location>
			<dress>Casual</dress>
		</event>
	</day>
	<day id="Saturday October 16">
		<event>
			<title>President's Team Registration (Palomar Hotel)</title>
			<time>2:00 p.m. - 10:00 p.m.</time>
			<location>Palomar Hotel, Rialto A/B</location>
			<dress>Casual</dress>
		</event>
		<event>
			<title>President's Team Registration (Palomar Hotel)</title>
			<time>2:00 p.m. - 10:00 p.m.</time>
			<location>Palomar Hotel, Rialto A/B</location>
			<dress>Casual</dress>
		</event>
		<event>
			<title>President's Team Registration (Palomar Hotel)</title>
			<time>2:00 p.m. - 10:00 p.m.</time>
			<location>Palomar Hotel, Rialto A/B</location>
			<dress>Casual</dress>
		</event>
	</day>
</agenda>


and this is my attempt with the script , you will notice I am also trying to call .slideToggle as well towards the end of  the function .....  

 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:

<script type="text/javascript">
num = [0];
							//Load Speakers
							$.ajax({
								 type: "GET",
								 url: "agenda.xml",
								 dataType: "xml",
								 success: function(xml) {
								     $(xml).find('day').each(function(){
								     	var eventDay = $(this).attr('id')
								     	$('<tr>\n\t<td>\n\t<table id="day'+num+'"></table>\n\b</td>\n\b</tr>')
								     		.html('<thead id="head'+num+'">\n\t<tr>\n\t<th>'+eventDay+'</th>\n<th>Time</th>\n<th>Location</th>\n<th>Dress Attire</th>\n\b</tr>\n\b</thead>')
								     		.appendTo('table.agendaInfo');
								     	});// close day each	
								     	$(xml).find('event').each(function() {
										 var title = $(this).find('title').text()
										 var time = $(this).find('time').text()
										 var loc = $(this).find('location').text()
										 var dress = $(this).find('dress').text()
										 $('<tbody id="body'+num+'"></tbody>')
										     .html('\n\t<tr>\n\t<td>'+title+'</td>\n<td>'+time+'</td>\n<td>'+loc+'</td>\n<td>'+dress+'</td>\n\b</tr>')
										     .appendTo('table#day'+num+'');
									     }); //close event each(
								     $('#head'+num+'').click(function() {
								     		    $('#body'+num+'').slideToggle();
								     		});
								    num++;
								 }
							     }); //close $.ajax(
						</script>


Any help in getting it to work would be appreciated..... I hope I was clear with what I am trying to do. If you go ahead and just copy the code and place it in a test.xml file and a test.html file you will see that not all the content generates ....  

Answer : Using AJAX to render tabular data with nested tables

Yes, I found the answer: you can change the date/time format to 24 hour time.
 
     =FormatDate(fieldname; "MM/dd/yyyy HH:mm")
 
The capital HH is for 24-hour time.  Lower-case hh will give you 12-hour time.
Random Solutions  
 
programming4us programming4us