Elements are not being created

JavaScript
1

Any idea why my elements are not being created? Firebug doesn’t return any errors and the ajax data is being submitted.


if (goal_title !== 'Goal Subject...' && goal_title.length > 0)
				{
					var goal_start_date 	= goal_start_year + '-' + goal_start_month + '-' + goal_start_day;
					var goal_end_date		= goal_end_year + '-' + goal_end_month + '-' + goal_end_day;
				
					ajax.post('/assets/ajax/goal_create.php', 'title=' + goal_title + '&status=' + goal_status + '&start_date=' + goal_start_date + '&end_date=' + goal_end_date + '&info=' + goal_info, function(resp)
					{
						//Remove all children of previous goals list and recreate the new one from var resp (holds all the data required)
						// Feel free to change the returned_goals variable name :P
						
						var goals = eval('(' + resp + ')');
						
						var goal_list		= document.getElementById('goal_list');
						removeChildren(goal_list);
						
						alert(goal_list);
						console.log(goal_list);
						
						var goal_item 			=[];   
						var goal_holder 		=[];
						var goal_icon 			=[];
						var goal_icon_status 	=[];
						var goal_icon_img 		=[];
						var goal_identifier 	=[];
						var goal_list_items 	=[];
						var goal_ul 			=[];
						var goal_li_uncomplete 	=[];
						var goal_a_uncomplete 	=[];
						var goal_li_onhold 		=[];
						var goal_a_onhold		=[];
						var goal_li_cancelled	=[];
						var goal_a_cancelled	=[];
						var goal_li_completed	=[];
						var goal_a_completed	=[];
						var goal_status 		=[];
						var goal_name	 		=[];
						var goal_add_info	 	=[];
						var goal_end_date	 	=[];
						
						for (i = 0; i < goals[i].length; i++) 
						{
							alert(goals[i].length);
							console.log(goals[i].length);
							
							goal_item[i] 		= document.createElement('div');
							goal_holder[i] 		= document.createElement('div');
							goal_icon[i] 		= document.createElement('a');
							goal_icon_status[i] = document.createElement('div');
							goal_icon_img[i] 	= document.createElement('img');
							goal_identifier		= document.createElement('div');
							goal_list_items		= document.createElement('div');
							goal_ul				= document.createElement('ul');
							goal_li_uncomplete	= document.createElement('li');
							goal_a_uncomplete	= document.createElement('a');
							goal_li_onhold		= document.createElement('li');
							goal_a_onhold		= document.createElement('a');
							goal_li_cancelled	= document.createElement('li');
							goal_a_cancelled	= document.createElement('a');
							goal_li_completed	= document.createElement('li');
							goal_a_completed	= document.createElement('a');
							goal_status[i] 		= document.createElement('input');
							goal_name[i] 		= document.createElement('div');
							goal_add_info[i] 	= document.createElement('div');
							goal_end_date[i] 	= document.createElement('div');
	
							goal_item[i].className = 'goal_item_passed';
							
							goal_holder[i].className = 'goal_icon_holder mrs';
							
							goal_icon[i].href = 'javascript:void(0)';
							goal_icon[i].className = 'goal_icon_button';
							
							goal_icon_status[i].className = 'goal_icon uncompleted';
							
							goal_icon_img[i].src = '/assets/img/icons/' + goals[1][i].goal_status;
																	
							goal_li_completed[i].appendChild(goal_a_completed[i]);
							goal_li_cancelled[i].appendChild(goal_a_cancelled[i]);
							goal_li_onhold[i].appendChild(goal_a_onhold[i]);
							goal_li_uncomplete[i].appendChild(goal_a_uncomplete[i]);
							
							goal_ul[i].appendChild(goal_li_completed[i]);
							goal_ul[i].appendChild(goal_li_cancelled[i]);
							goal_ul[i].appendChild(goal_li_onhold[i]);
							goal_ul[i].appendChild(goal_li_uncomplete[i]);
							
							goal_list_items[i].appendChild(goal_ul[i]);
							
							goal_identifier[i].appendChild(goal_list_items[i]);
							
							goal_icon[i].appendChild(goal_identifier[i]);
							
							goal_icon_status[i].appendChild(goal_icon_img[i]);
							goal_icon[i].appendChild(goal_icon_status[i]);
							goal_holder[i].appendChild(goal_icon[i]);
							
							goal_item[i].appendChild(goal_end_date[i]);
							goal_item[i].appendChild(goal_add_info[i]);
							goal_item[i].appendChild(goal_name[i]);
							goal_item[i].appendChild(goal_status[i]);
							goal_item[i].appendChild(goal_holder[i]);
							goal_list.appendChild(goal_item[i]);
						}
					});
				}
2

First up, do you have a function called removeChildren ?

3

Yes, I use…


function removeChildren(element)
{
	if (element.hasChildNodes())
	{
		while (element.childNodes.length >= 1)
		{
			element.removeChild(element.firstChild);       
		}
	}
}
4

Next up, what is the value of goals[i].length at the start of the loop?

5

I don’t know. I can’t alert it, but I can alert goals by itself.

6

Have you considered that the fact that you can’t alert it, might be a clue that the loop might have a similar problem?

7

Yes, but I just don’t understand why it won’t alert.

8

Look closely at what are you getting the length of.

9

I’m trying to get the length of objects. Does that matter?

10

goals[i] is not an array that has a length, it is a single object, whereas goals is an array that contains a number of objects.

Do you see the problem yet?