View Full Version : Multi-Part Content Extension

12-30-2005, 10:35 PM
I would like to extend the multi-part content script such that I can use it for input. I am dynamically creating the 'parts' using PHP. Included in the content areas are two input devices, one a select and the other a checkbox.

Although I'm not new to programming, I'm new to DHTML. I don't know how to interrogate the partscollect for the values of those elements.

Would someone be so kind as to show me a simple example of how to loop through partscollect for the multiparts class objects and how to identify which are the select and checkbox inputs?

01-02-2006, 09:34 AM
Well, it could depend upon why, and if you really need the multiparts element or perhaps just the input element, on if there is one and only one checkbox in a multiparts element and similarly for the select input. As I think you've already noticed, the way the script is set up, the partscollect array contains all the multiparts class elements. What you may or may not have gotten is that they are represented as objects in that collection, meaning that their various properties are available for query. Another fact is that if one of these multiparts elements contains an input element, it will be a child of the multiparts element or a child of a child etc. This last part isn't important just yet. OK, enough theory, here is a simple but dirty way of querying the partscollect array:

<script type="text/javascript">
function queryParts(string){
for (var i_tem = 0; i_tem < partscollect.length; i_tem++)
if (partscollect[i_tem].innerHTML.indexOf(string)!==-1)
return partscollect[i_tem]

With the above function available we can do this:

<input type="button" onclick="alert(queryParts('scientific'))">

Now in the demo, that will return [object] and it will be the third of the three multiparts (partscollect[2]) as, that is the only one containing that word. As you may well imagine this requires that we already know what we are looking for and that we are certain it is unique to the multiparts element we are seeking. Given all that, it would be about as easy (and much cleaner) to give each multiparts element a unique id and just access it directly, ex:

<div id="parts3" class="multiparts">
During the Renaissance, artists were no longer regarded as mere artisans, as they had been in the medieval past, but for the first time emerged as independent personalities, comparable to poets and writers. They sought new solutions to formal and visual problems, and many of them were also devoted to scientific experimentation. In this context, mathematical or linear perspective was developed, a system in which all objects in a painting or in low-relief sculpture are related both proportionally and rationally. As a result, the painted surface was regarded as a window on the natural world, and it became the task of painters to portray this world in their art.

Then this will get our 'man':

<input type="button" onclick="alert(document.getElementById('parts3'))">

Now, even though all either of the above two methods gets us is [object], it will be the object in question that we could set the properties for:


If due to page construction and the method(s) used to update things and what you are after, it might even be easier to give the input element an id or to do that and walk the document tree upwards until an element with the class multiparts is encountered. These methods would still be cleaner than querying the entire innerHTML of each multiparts element. This function will get the multiparts container of an element with a known id:

function findParentPart(id){
var parentPart=document.getElementById(id).parentNode
while(typeof parentPart.className=='undefined'||parentPart.className!=='multiparts')
return parentPart

01-11-2006, 08:20 PM
Thanks John. This helps a lot.