Question : jquery dhtml dynamic population issue

I'm using some jquery custom components and I'm trying to dynamically populate a div based on a php generated xml file.  The goal is to dynamically populate the div id of "container" with the needed html in order to work properly with the jquery ui component.  Below, I'm dynamically appending the proper child elements to the div id "container".  Using the dynamic population, the jquery components don't work.  If I alert the dynamically generated html for the "container" div hardcode that between the empty "container" div tags everything works but obviously thats not ideal.

The main issue seems to be with the following jquery functions as they don't work when html is dynamically set on window load:trash.droppable, gallery.droppable, deleteImage and recycleImage.  When i click the <a href="" class="ui-icon ui-icon-trash">Delete Image</a> the deleteImage function should be called but its not.  The window.onload function gets called when clicking this link when I try to dynamically populate the container div, but when I hard code the html in the container div it doesn't get called again.  

 I have included my full code and the dynamically generated html.  Any help would be greatly appreciated.

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:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
<!doctype html>
<html lang="en">
	<head>
		<title>jQuery UI Droppable - Simple photo manager</title>
		<link type="text/css" href="jqueryui/css/ui.all.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
		<script type="text/javascript" src="jqueryui/ui/ui.core.js"></script>
		<script type="text/javascript" src="jqueryui/ui/ui.draggable.js"></script>
		<script type="text/javascript" src="jqueryui/ui/ui.droppable.js"></script>
		<script type="text/javascript" src="jqueryui/ui/ui.resizable.js"></script>
		<script type="text/javascript" src="jqueryui/ui/ui.dialog.js"></script>
		<link type="text/css" href="jqueryui/css/demos.css" rel="stylesheet" />
		<link type="text/css" href="jqueryui/css/ui.theme.css" rel="stylesheet" />
		<style type="text/css">
			#gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
			.gallery.custom-state-active { background: #eee; }
			.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
			.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
			.gallery li a { float: right; }
			.gallery li a.ui-icon-zoomin { float: left; }
			.gallery li img { width: 100%; cursor: move; }
			#trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */
			#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
			#trash h4 .ui-icon { float: left; }
			#trash .gallery h5 { display: none; }
		</style>
<script language="javascript" type="text/javascript">
function getXmlHttpRequestObject() {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest();
	} else if(window.ActiveXObject) {
		return new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		throw new Error("Your browser don't support ajax");
	}
}
var xhr = getXmlHttpRequestObject();
function getImages() {
	if (xhr.readyState == 4 || xhr.readyState == 0) {
		xhr.open("GET", 'images.php' , true);
		xhr.onreadystatechange = handleimages; 
		xhr.send(null);		
	}
}
function handleimages() {
	if (xhr.readyState == 4) {	     
		var image_div = document.getElementById('container');
		var xmldoc = xhr.responseXML;
		var images = xmldoc.getElementsByTagName("image"); 
		var n_images = images.length
		var ul = document.createElement("ul");
	        ul.setAttribute("class", "gallery ui-helper-reset ui-helper-clearfix");
	        ul.setAttribute("id", "gallery");
		for (i = 0; i < n_images; i++) {
			var li = document.createElement("li");
			li.setAttribute("class", "ui-widget-content ui-corner-tr");

			var h5 = document.createElement("h5");
			h5.setAttribute("class", "ui-widget-header");
			var h5Text = document.createTextNode(images[i].firstChild.nodeValue);
			h5.appendChild(h5Text);

			var img = document.createElement("img");
			img.setAttribute("src", "testimages/" + images[i].firstChild.nodeValue);
			img.setAttribute("width", "75");
			img.setAttribute("height", "75");

			var a1 = document.createElement("a");
			a1.setAttribute("class", "ui-icon ui-icon-zoomin");
			a1.setAttribute("href", "testimages/" + images[i].firstChild.nodeValue);
			var a1Text = document.createTextNode("View Larger");
			a1.appendChild(a1Text);

			var a2 = document.createElement("a");
			a2.setAttribute("class", "ui-icon ui-icon-trash");
			a2.setAttribute("href", "");
			var a2Text = document.createTextNode("Delete Image");
			a2.appendChild(a2Text);

			li.appendChild(h5);
			li.appendChild(img);
			li.appendChild(a1);
			li.appendChild(a2);
			ul.appendChild(li);
		}
		
		image_div.appendChild(ul);		
		
		var trash_div = document.createElement('div');
		trash_div.setAttribute("id", "trash");
		trash_div.setAttribute("class", "ui-widget-content ui-state-default");	
		
		var h4 = document.createElement("h4");	
		h4.setAttribute("class", "ui-widget-header");
		var h4Text = document.createTextNode("Trash");
		h4.appendChild(h4Text);
		
		var span = document.createElement("span");
		span.setAttribute("class", "ui-icon ui-icon-trash");
		var spanText = document.createTextNode("Trash");
		span.appendChild(spanText);
		
		h4.appendChild(span);
		trash_div.appendChild(h4);
		
		image_div.appendChild(trash_div);
		alert(image_div.innerHTML);
	} 
}

			$(function() {
				// there's the gallery and the trash
				var $gallery = $('#gallery'), $trash = $('#trash');
				// let the gallery items be draggable
				$('li',$gallery).draggable({
					cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
					revert: 'invalid', // when not dropped, the item will revert back to its initial position
					containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
					helper: 'clone',
					cursor: 'move'
				});
				// let the trash be droppable, accepting the gallery items
				$trash.droppable({
					accept: '#gallery > li',
					activeClass: 'ui-state-highlight',
					drop: function(ev, ui) {
						deleteImage(ui.draggable);
					}
				});
				// let the gallery be droppable as well, accepting items from the trash
				$gallery.droppable({
					accept: '#trash li',
					activeClass: 'custom-state-active',
					drop: function(ev, ui) {
						recycleImage(ui.draggable);
					}
				});
				// image deletion function
				var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off" title="Recycle this image" class="ui-icon ui-icon-refresh">Recycle image</a>';
				function deleteImage($item) {
					$item.fadeOut(function() {
						var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);
						$item.find('a.ui-icon-trash').remove();
						$item.append(recycle_icon).appendTo($list).fadeIn(function() {
							$item.animate({ width: '48px' }).find('img').animate({ height: '36px' });
						});
					});
				}
				// image recycle function
				var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>';
				function recycleImage($item) {
					$item.fadeOut(function() {
						$item.find('a.ui-icon-refresh').remove();
						$item.css('width','96px').append(trash_icon).find('img').css('height','72px').end().appendTo($gallery).fadeIn();
					});
				}
				// image preview function, demonstrating the ui.dialog used as a modal window
				function viewLargerImage($link) {
					var src = $link.attr('href');
					var title = $link.siblings('img').attr('alt');
					var $modal = $('img[src$="'+src+'"]');
					if ($modal.length) {
						$modal.dialog('open')
					} else {
						var img = $('<img alt="'+title+'" width="384" height="288" style="display:none;padding: 8px;" />')
							.attr('src',src).appendTo('body');
						setTimeout(function() {
							img.dialog({
									title: title,
									width: 400,
									modal: true
								});
						}, 1);
					}
				}
				// resolve the icons behavior with event delegation
				$('ul.gallery > li').click(function(ev) {
					var $item = $(this);
					var $target = $(ev.target);
					if ($target.is('a.ui-icon-trash')) {
						deleteImage($item);
					} else if ($target.is('a.ui-icon-zoomin')) {
						viewLargerImage($target);
					} else if ($target.is('a.ui-icon-refresh')) {
						recycleImage($item);
					}
					return false;
				});
			});
			
			window.onload = function(){
	      getImages();		
      }
		</script>
			</head>
	<body>
		<div id="container" class="demo ui-widget ui-helper-clearfix">			
		</div>		
	</body>
</html>


dynamic html:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
			
		<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
	<h5 class="ui-widget-header">Jellyfish.jpg</h5>
	<img src="testimages/Jellyfish.jpg" width="75" height="75">
	<a href="testimages/Jellyfish.jpg" class="ui-icon ui-icon-zoomin">View Larger</a>
	<a href="" class="ui-icon ui-icon-trash">Delete Image</a>
</li>
<li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">tst5.jpg</h5><img src="testimages/tst5.jpg" width="75" height="75"><a href="testimages/tst5.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">tst4.jpg</h5><img src="testimages/tst4.jpg" width="75" height="75"><a href="testimages/tst4.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">tst.jpg</h5><img src="testimages/tst.jpg" width="75" height="75"><a href="testimages/tst.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">tst7.jpg</h5><img src="testimages/tst7.jpg" width="75" height="75"><a href="testimages/tst7.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">glacier.jpg</h5><img src="testimages/glacier.jpg" width="75" height="75"><a href="testimages/glacier.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">tst2.jpg</h5><img src="testimages/tst2.jpg" width="75" height="75"><a href="testimages/tst2.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">tulips.jpg</h5><img src="testimages/tulips.jpg" width="75" height="75"><a href="testimages/tulips.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">test.jpg</h5><img src="testimages/test.jpg" width="75" height="75"><a href="testimages/test.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">tst6.jpg</h5><img src="testimages/tst6.jpg" width="75" height="75"><a href="testimages/tst6.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">Koala.jpg</h5><img src="testimages/Koala.jpg" width="75" height="75"><a href="testimages/Koala.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">isl3.jpg</h5><img src="testimages/isl3.jpg" width="75" height="75"><a href="testimages/isl3.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">wave.jpg</h5><img src="testimages/wave.jpg" width="75" height="75"><a href="testimages/wave.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">tst3.jpg</h5><img src="testimages/tst3.jpg" width="75" height="75"><a href="testimages/tst3.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">image1.jpg</h5><img src="testimages/image1.jpg" width="75" height="75"><a href="testimages/image1.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">turtle.jpg</h5><img src="testimages/turtle.jpg" width="75" height="75"><a href="testimages/turtle.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">is2.jpg</h5><img src="testimages/is2.jpg" width="75" height="75"><a href="testimages/is2.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">Penguins.jpg</h5><img src="testimages/Penguins.jpg" width="75" height="75"><a href="testimages/Penguins.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">cancun.jpg</h5><img src="testimages/cancun.jpg" width="75" height="75"><a href="testimages/cancun.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">lighthouse.jpg</h5><img src="testimages/lighthouse.jpg" width="75" height="75"><a href="testimages/lighthouse.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">tstisland1.jpg</h5><img src="testimages/tstisland1.jpg" width="75" height="75"><a href="testimages/tstisland1.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">jellyfish.jpg</h5><img src="testimages/jellyfish.jpg" width="75" height="75"><a href="testimages/jellyfish.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">building.jpg</h5><img src="testimages/building.jpg" width="75" height="75"><a href="testimages/building.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">Honor Recital 2008 114.jpg</h5><img src="testimages/Honor%20Recital%202008%20114.jpg" width="75" height="75"><a href="testimages/Honor%20Recital%202008%20114.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">penguins.jpg</h5><img src="testimages/penguins.jpg" width="75" height="75"><a href="testimages/penguins.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">Lighthouse.jpg</h5><img src="testimages/Lighthouse.jpg" width="75" height="75"><a href="testimages/Lighthouse.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">Tulips.jpg</h5><img src="testimages/Tulips.jpg" width="75" height="75"><a href="testimages/Tulips.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">koala.jpg</h5><img src="testimages/koala.jpg" width="75" height="75"><a href="testimages/koala.jpg" class="ui-icon ui-icon-zoomin">View Larger</a><a href="" class="ui-icon ui-icon-trash">Delete Image</a></li></ul><div class="ui-widget-content ui-state-default" id="trash"><h4 class="ui-widget-header">Trash<span class="ui-icon ui-icon-trash">Trash</span></h4></div>


Answer : jquery dhtml dynamic population issue

Sam - why not
$("#container").get("images.php", function(theXML){
 $('image',theXML).each(
  function(i){
     here we have the loop, with i the index if needed and "this" each image
  }
);


If you refer to the tutorial, jQuery gives you constructs like

$(this).find("...").attr("..");
rather than accessing the xhr.responseXML at all

Random Solutions  
 
programming4us programming4us