Firefox and Javascript createElement method positioning on web page

HCL Domino Domino Forum
1

I have some Javascript that uses the createElement method to create fields on a web page.

In Internet Explorer, the fields are positioned in a pass-thru HTML table, so they are displayed correctly — in a row.

Example:

| Field 1_1 | Field 2_1 | Field 3_1 |

| Field 1_2 | Field 2_2 | Field 3_2 |

Field1_1 has on onChange event that determines what Field2_1 and Field3_1 will display. Field1_1 will also display another row of fields below in the same format — up to 15 rows — the row only appears after the onChange event is fired.

In Firefox, the fields are set corrrectly when the web page is first open. However, once the first onChange event is fired in Field1_1, the fields are not displayed as in the example above.

Example of how Firefox displays:

| Field 1_1 | (bunch of white space here) Field 2_1 | Field 3_1 |

| Field 1_2 | Field 2_2 |

| Field 3_2 |

Here is the pass-thru HTML:

[Field1_1] [Field2_1] [Field3_1] [Field1_2] [Field2_2] [Field3_2]

Here is the Javascript snippet:

FilterChoices_ = [Field3_1]/[Field3_2]

		var newInput = document.createElement("<Select>")

		newInput.name = "FilterChoices_" + currentFilterNumber

		newInput.setAttribute("id","FilterChoices_" + currentFilterNumber)

		newInput.options.length = 0

		newInput.options.length = lookupValues.length

		newInput.multiple = false

		for (x=0;x < lookupValues.length;x++){

			newInput.options[x] = new Option(lookupValues[x],lookupValues[x],false,false)

		};

		td.appendChild(newInput);

I have been searching the web for an answer but no luck yet… Any way to control the positioning?

Any ideas would be great — really stuck on this one…

Thanks,

Dan

2

Subject: Firefox and Javascript createElement method positioning on web page

you need to post more of your javascript to get an answer I think.

what is this:

FilterChoices_ = [Field3_1]/[Field3_2]

and for this:

td.appendChild(newInput);

where does the “td” variable come from?

3

Subject: RE: Firefox and Javascript createElement method positioning on web page

“FilterChoices_” is the same as Field3_1 and Field3_2 in the sample/example table I created in the post…

Here is the full function:

function updateLookupValues(){

filterField = element("FilterChoices_" + currentFilterNumber);

td = element("filterRowChoices" + currentFilterNumber);

if (filterField != null){ // remove it first so we can recreate the object

	td.removeChild(filterField)

}

// Set-up...

obj = element("filterRowChoices" + currentFilterNumber);

if (obj != null){

	obj.style.display = "inline";

}	

obj = element("filterRowRange" + currentFilterNumber);

if (obj != null){

	obj.style.display = "none";

}

// Set the lookup methods -- Equals, Contains, etc.	

var filterMethod = element("FilterMethod_" + currentFilterNumber);

var filterTDMethod = element("filterRowMethods" + currentFilterNumber)

if (filterMethod != null){ // remove it first so we can recreate the object

	filterTDMethod.removeChild(filterMethod);

}

var newInput = document.createElement("<Select>");

newInput.name = "FilterMethod_" + currentFilterNumber;

newInput.setAttribute("id","FilterMethod_" + currentFilterNumber);

newInput.options.length = 0;

newInput.options.length = lookupMethods.length;

newInput.multiple = false;



for (x=0;x < lookupMethods.length;x++){

	newInput.options[x] = new Option(lookupMethods[x],lookupMethods[x],false,false);

}

filterTDMethod.appendChild(newInput);	

// Need to determine what type of field to show...

// <Text>

// <Radio>

// <Checkbox>

// Get the lookupType...

switch (lookupType) {

	case "Text":

		var newInput = document.createElement("<input>");

		newInput.name = "FilterChoices_" + currentFilterNumber;

		newInput.setAttribute("id","filterChoices_" + currentFilterNumber);

		td.appendChild(newInput);			

	break

	

	case "Date":

		// Date range FROM/TO...

		// Just hide the choices and display the range fields...

		obj = element("filterRowChoices" + currentFilterNumber);

		if (obj != null){

			obj.style.display = "none";

		}		

		obj = element("filterRowRange" + currentFilterNumber);

		if (obj != null){

			obj.style.display = "inline";

		}			

	break

	

	case "Dialog List (one value)":

		var newInput = document.createElement("<Select>")

		newInput.name = "FilterChoices_" + currentFilterNumber

		newInput.setAttribute("id","FilterChoices_" + currentFilterNumber)

		newInput.options.length = 0

		newInput.options.length = lookupValues.length

		newInput.multiple = false

		for (x=0;x < lookupValues.length;x++){

			newInput.options[x] = new Option(lookupValues[x],lookupValues[x],false,false)

		};

		td.appendChild(newInput);

	break 

	

	case "Dialog List (multi value)":

		var newInput = document.createElement("<Select>")

		newInput.name = "FilterChoices_" + currentFilterNumber

		newInput.setAttribute("id","FilterChoices_" + currentFilterNumber)

		newInput.options.length = 0

		newInput.options.length = lookupValues.length

		newInput.multiple = true

		for (x=0;x < lookupValues.length;x++){

			newInput.options[x] = new Option(lookupValues[x],lookupValues[x],false,false)

		};

		td.appendChild(newInput);

	break;

	

	case "Number Range":

		// Just hide the choices and display the range fields...

		obj = element("filterRowChoices" + currentFilterNumber);

		if (obj != null){

			obj.style.display = "none";

		}		

		obj = element("filterRowRange" + currentFilterNumber);

		if (obj != null){

			obj.style.display = "none";

		}	

	break

	

	case "Custom" :

	

	break



default : 



}

}

Thanks!

Dan

4

Subject: Firefox and Javascript createElement method positioning on web page

W3C DOM methods tend not to work very well in tables, Dan – at least as far as the resulting display goes. (The DOM tree will report everything’s hunky dory, but on-screen? Not so much.)

You’re better off with the old JavaScript browser DOM bindings, using the table, tablerow and tabledata objects. If you don’t have a reference handy, there’s one at W3Schools:

http://www.w3schools.com/js/js_obj_htmldom.asp

5

Subject: RE: Firefox and Javascript createElement method positioning on web page

So, for example, I would have to maybe use document.write method?

From the example:

[Field1_1] [Field2_1] [Field3_1] [Field1_2] [Field2_2] [Field3_2]

Something like:

document.write(“[text]”);

document.write(“[Field1_1]”);

document.write(“[Field2_1]”);

document.write(“[Field3_1]”);

document.write(“”);

Since the table is already created, will it position itself correctly? Or will the page have to be recreated/“repainted”?

Thanks again Stan!

Dan

6

Subject: RE: Firefox and Javascript createElement method positioning on web page

No. If you use document.write(), it will create HTML wherever the script is running on the page, so you’d need to nest your code inside the table HTML.

Grab the table using whatever’s handy (getElementById or document.tables or whatever), then use .insertRow() to add rows. Get the row (again, using whatever – like tableObject.rows) and use insertCell() to add cells to the row. It’s the same basic procedure as the W3C DOM method you were using, but with a different object model. If you follow the Table, TableRow and TableData links on the page I linked to, you’ll find the properties and methods you need.

7

Subject: RE: Firefox and Javascript createElement method positioning on web page

Makes total sense…

Thanks a million Stan!

Dan