help with removing child nodes

[furious70]

In the same code as in this thread http://forums.webdeveloper.com/showthread.php?s=&postid=122678#post122678

I'm having a problem with accessing the children. This screen can be either started in 'new' entry form, whereas the 'oracle_order_num' field is not shown, or in an edit/copy mode, whereas the o_o_n field may be shown (and populated). In either mode, the user has the option to toggle (either say I need that field or I don't need that field).
When the form is brought up in blank mode (field not present) you can toggle all day long and everything is good. If brought up in edit/copy, you can toggle out (make the label and input box disappear), toggle back into needing the box (it'll be blank now however), but when you toggle to remove the box the 2nd time, the label disappears, but the box stays, and now that extra box is always present. (Does not add an extra box per toggle).

I could not get a loop through the childnodes to work, so I did a hack job of using .firstChild. It is noted in the code.
If someone can help with the correct loop, that would be much better.

The HTML that sets the box up:

<cfif IsDefined("session.#attributes.order#.oracle_order_num") AND
session["#attributes.order#"].oracle_order_num neq "">
<script>
var smp_cell = document.getElementById('smp_cell');
smp_cell.setAttribute('width','33%');
</script>
<td style="background-color: white; width: 33%; align: center;" id="oracle_number_cell" nowrap>
Oracle Order Number: <input type="text" name="oracle_order_num" size="7"
value="#session["#attributes.order#"].oracle_order_num#" maxlength="7">
</td>
<cfelse>
<td style="background-color: gray; width: 1; align: center;" id="oracle_number_cell" nowrap></td>
</cfif>

the JS function called to do the toggle:

function oracleOrder()
{
//This function works as a toggle, showing or hiding the necessary
//elements for an oracle order
oracle_order_num_error.innerHTML = ""
var oracle_number_cell = document.getElementById('oracle_number_cell');

var smp_cell = document.getElementById('smp_cell');
var mne_cell = document.getElementById('mne_cell');

var orig_coreid_box = document.getElementById('orig_coreid');
var orig_pager_box = document.getElementById('orig_pager');
var orig_name_box = document.getElementById('orig_name');
var orig_phone_box = document.getElementById('orig_phone');
var orig_email_box = document.getElementById('orig_email');

if (is_oracle == false)
{
//reset table cells
smp_cell.style.width = '33%';
mne_cell.style.width = '33%';

oracle_number_cell.style.backgroundColor = 'fff';
oracle_number_cell.style.align = 'center';
oracle_number_cell.style.width = '33%';

//blank out orig
orig_coreid_box.setAttribute('value','');
orig_pager_box.setAttribute('value','');
orig_name_box.setAttribute('value','');
orig_phone_box.setAttribute('value','');
orig_email_box.setAttribute('value','');

var tdText=document.createTextNode('Oracle Order Number: ');
var oracle_order_num = document.createElement('input');
oracle_order_num.setAttribute('type','text');
oracle_order_num.setAttribute('name','oracle_order_num');
oracle_order_num.setAttribute('value','');
oracle_order_num.setAttribute('size','7');
oracle_order_num.setAttribute('maxlength','7');
oracle_number_cell.appendChild(tdText);
oracle_number_cell.appendChild(oracle_order_num);

oracle_link.innerHTML = "<a href='javascript:oracleOrder()'>This is not an Oracle Order</a>";

}
else
{
//we must remove the children that are built in the if
//should be able to loop through oracle_number_cell.childnodes, but had to do it like
//this to make it work
oracle_number_cell.removeChild(oracle_number_cell.firstChild);
oracle_number_cell.removeChild(oracle_number_cell.firstChild);


smp_cell.style.width = '50%';
mne_cell.style.width = '50%';
oracle_number_cell.style.width = '1';
oracle_number_cell.setAttribute('bgcolor','gray');
oracle_number_cell.style.backgroundColor = '777'
//fill orig back in
orig_coreid_box.setAttribute('value',orig_coreid);
orig_pager_box.setAttribute('value',orig_pager);
orig_name_box.setAttribute('value',orig_name);
orig_phone_box.setAttribute('value',orig_phone);
orig_email_box.setAttribute('value',orig_email);

oracle_link.innerHTML = "<a href='javascript:oracleOrder()'>This is an Oracle Order</a>";
}


is_oracle = !is_oracle;
}

[furious70]

bump

[Khalid Ali]

I hope I am not the only one who is :confused: :confused: :confused: :confused:

please explain your question again

[furious70]

basically, I need to be able to toggle the contents of a particular <td> on and off (and then shrink the td if off). Additionally, this form can be entered into in 1 of 2 modes. Mode 1 does NOT initially show the contents of the particular td. mode 2 does initially show the contents. In either mode, I need to be able to toggle on/off. This means I need to either add or remove a textnode and an input text box.

When started in mode 2, the toggle to turn the contents off works once. Then if you click to turn them back on that works. Then, if you change your mind again to turn them off, the input box remains with the code shown above.
The desired behavior is to be able to toggle back and forth unlimited times

[Khalid Ali]

I see, well do this if its possible,
run your script on yuor servers,cold fusion will spit the html and all,so the page opened in the browser window (I am hoping will have all the code)
then attach that code in here as text file or may be zip,I'll take a look.

[furious70]

ok, here's the page in mode 1, where it works as it should. I had to remove some of the html as this is an internal page, but nothing that should effect what we're looking at.

[furious70]

and here's mode2, where the textbox hangs on in the toggle

[Khalid Ali]

Hi
Check it this link (http://68.145.35.86/temp/furios70/bimode2.html) I have re- worked the code to make it work.
By the way, since your code was only written for IE I did not upgraded it to work for NS(mozilla),though I'd recoment that sooner you guys move to mozilla better the code will be

[furious70]

unfortunetly IE 5.x is the only supported browser in our corporate PC image, so that is what our stuff needs to work on.

[Khalid Ali]

Originally posted by furious70
unfortunetly IE 5.x is the only supported browser in our corporate PC image, so that is what our stuff needs to work on.

I was merely suggesting....(my bias :D )
the code I to the link above points is tested and works for IE 6.0

[furious70]

i just took a quick look, I have a meeting now but will look at it later. Thank you in advance of me understanding what's different in it :)

I have another thread on the front page here about setAttribute not seeming to work right when I dynamically create this label/text box pair....

[Khalid Ali]

you are most welcome,BTW I did not get what you are refering to in the second line
I have another thread on the front page here about setAttribute n.....

[furious70]

this thread you helped me with b4
http://forums.webdeveloper.com/showthread.php?s=&threadid=23776

The code you gave me didn't help, I posted some code back with some questions