The next episode in the continuing saga of trying to develop a modular, automated DOM create and remove script asks the question, "Where should I put this code?"
Alright, here's the story: with a great deal of help from gits, I've developed a DOM creation and deletion script, which can be used in multiple applications. You simply feed the script a JSON list of any size, and the script will create multiple DOM elements with as many attributes as you desire, iterating through all the elements in the list one after another. An additional feature allows you to select individual elements from the list rather than iterating through all of them at once. Okay, everything is good up to this point.
Now I've gone and asked my poor, overworked script to take on even more responsibility, and apparently it is just too much for the script to bear. I wanted to combine the individual element creation with the iteration functionality. Oh boy, let the fun begin!
If my JSON property lists were static, this whole issue would be moot. Unfortunately, the lists are dynamic (I like to make things difficult). For example, each element has a unique id that is determined by its function, location on the displayed HTML page, and other factors. Here is an example:
[code=javascript]
var page =
{
'homepage' : 0,
'pagetwo' : 1,
'pagethree' : 2
};
for (var index in page)
{
var imageId = "nav" + index;
var navOptions =
{
'id' : imageId,
'dom' : 'img',
'parent' : 'body'
};
createDOM(navOp tions);
};
[/code]
Here you can see that imageId is dynamically created each time the for loop is run. That is fine as long as I am iterating through the entire list, but if I want to stop at a certain point (say at homepage) and later iterate through the rest (pageone and pagetwo), then everything breaks down because of the following code:
[code=javascript]
// Split attribList and submit to createNode //
/*
* 'attribList' (Str.) is the full JSON list passed to createDOM
* 'split' (#) is the first element of the iteration section of the list
* 'iterate' (#) is the current element to be created
*/
function createDOM(attri bList, split, iterate)
{
var splitList = {};
// if only split is listed, default iterate to 0 //
if (split && (typeof iterate == 'undefined'))
{
iterate = 0;
};
// if neither split nor iterate, create entire attribList (no split) //
if ((typeof split == 'undefined') || (split == 0))
{
createNode(attr ibList);
}
// if iterate is less that split or if split is null, create only value [iterate] per index //
else if ((split > iterate) || (split == null))
{
for (var index in attribList)
{
var value = attribList[index];
splitList[index] = value instanceof Array ? value[iterate] : value;
};
createNode(spli tList);
}
// if iterate matches or exceeds split, create the remainder of values //
else if (split <= iterate)
{
for (var i = iterate; i < attribList.id.l ength; i++)
{
for (var index in attribList)
{
var value = attribList[index];
splitList[index] = value instanceof Array ? value[i] : value;
};
createNode(spli tList);
};
};
};
[/code]
Originally, this was part of my createDOM() code, the very beginning in fact, but I am starting to think it needs to be attached to the script that is calling createDOM(). Was trying to remove redundancy since multiple scripts call this code, but because there is no easy way to pass all the vars and other JSON lists or Arrays that create the dynamic objects in the attribList...we ll, I may not have any alternative. I need to think about this some more. Maybe iteration recalls the original function to run again with a new variable ... originalFunctio n(i++)...hmm.
Alright, here's the story: with a great deal of help from gits, I've developed a DOM creation and deletion script, which can be used in multiple applications. You simply feed the script a JSON list of any size, and the script will create multiple DOM elements with as many attributes as you desire, iterating through all the elements in the list one after another. An additional feature allows you to select individual elements from the list rather than iterating through all of them at once. Okay, everything is good up to this point.
Now I've gone and asked my poor, overworked script to take on even more responsibility, and apparently it is just too much for the script to bear. I wanted to combine the individual element creation with the iteration functionality. Oh boy, let the fun begin!
If my JSON property lists were static, this whole issue would be moot. Unfortunately, the lists are dynamic (I like to make things difficult). For example, each element has a unique id that is determined by its function, location on the displayed HTML page, and other factors. Here is an example:
[code=javascript]
var page =
{
'homepage' : 0,
'pagetwo' : 1,
'pagethree' : 2
};
for (var index in page)
{
var imageId = "nav" + index;
var navOptions =
{
'id' : imageId,
'dom' : 'img',
'parent' : 'body'
};
createDOM(navOp tions);
};
[/code]
Here you can see that imageId is dynamically created each time the for loop is run. That is fine as long as I am iterating through the entire list, but if I want to stop at a certain point (say at homepage) and later iterate through the rest (pageone and pagetwo), then everything breaks down because of the following code:
[code=javascript]
// Split attribList and submit to createNode //
/*
* 'attribList' (Str.) is the full JSON list passed to createDOM
* 'split' (#) is the first element of the iteration section of the list
* 'iterate' (#) is the current element to be created
*/
function createDOM(attri bList, split, iterate)
{
var splitList = {};
// if only split is listed, default iterate to 0 //
if (split && (typeof iterate == 'undefined'))
{
iterate = 0;
};
// if neither split nor iterate, create entire attribList (no split) //
if ((typeof split == 'undefined') || (split == 0))
{
createNode(attr ibList);
}
// if iterate is less that split or if split is null, create only value [iterate] per index //
else if ((split > iterate) || (split == null))
{
for (var index in attribList)
{
var value = attribList[index];
splitList[index] = value instanceof Array ? value[iterate] : value;
};
createNode(spli tList);
}
// if iterate matches or exceeds split, create the remainder of values //
else if (split <= iterate)
{
for (var i = iterate; i < attribList.id.l ength; i++)
{
for (var index in attribList)
{
var value = attribList[index];
splitList[index] = value instanceof Array ? value[i] : value;
};
createNode(spli tList);
};
};
};
[/code]
Originally, this was part of my createDOM() code, the very beginning in fact, but I am starting to think it needs to be attached to the script that is calling createDOM(). Was trying to remove redundancy since multiple scripts call this code, but because there is no easy way to pass all the vars and other JSON lists or Arrays that create the dynamic objects in the attribList...we ll, I may not have any alternative. I need to think about this some more. Maybe iteration recalls the original function to run again with a new variable ... originalFunctio n(i++)...hmm.
Comment