DHTML issues with IE

T

Thomas

I am trying to produce a table dynamically when the user presses "add to
queue". It works great in Mozilla, but it is formatted incorrectly in IE.
What I meant by the checkbox was that it should be checked by default. IE
doesn't do this while mozilla does. Here's a link:

http://helios.acomp.usf.edu/~torr2/test/test.php

Specifically, the checkbox is not checked and the css classes don't seem to
be working. This only happens in IE and I can't figure it out.

Thanks For any help you can give,
Tom
 
O

orlando echevarria

you don't specify whether the checkbox should be checked or not by default.

Example,

document.ThomasFrm.objCheckbox.defaultChecked = true;

This will allow the item to be checked by default.

Orlando
 
T

Thomas

I appreciate you looking into the problem, however the checkbox is set to
the variable chk. I used:

chk.setAttribute("checked", "true");

I've also used (in the past):

chk.setAttribute("checked", true);
chk.setAttribute("checked", "on");
chk.setAttribute("checked", "checked");
chk.checked = true;
chk.checked = "true";

These do not work, although setting the name did work in this fashion. It
seems to me that IE picks and chooses which attributes it is going to allow
changes to at random. Note that Mozilla displays this page properly.

Thanks
 
D

DU

Thomas said:
I appreciate you looking into the problem, however the checkbox is set to
the variable chk. I used:

chk.setAttribute("checked", "true");

I've also used (in the past):

chk.setAttribute("checked", true);
chk.setAttribute("checked", "on");
chk.setAttribute("checked", "checked");

Do not use setAttribute to set such attribute.
chk.checked = true;

This is correct.
chk.checked = true;
should work in all DOM1 compliant browsers.

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-30233917
chk.checked = "true";

These do not work

then it means something is wrong with your code.

, although setting the name did work in this fashion. It
seems to me that IE picks and chooses which attributes it is going to allow
changes to at random. Note that Mozilla displays this page properly.

Thanks

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html
 
D

DU

Thomas said:
I am trying to produce a table dynamically when the user presses "add to
queue". It works great in Mozilla, but it is formatted incorrectly in IE.
What I meant by the checkbox was that it should be checked by default. IE
doesn't do this while mozilla does. Here's a link:

http://helios.acomp.usf.edu/~torr2/test/test.php

Specifically, the checkbox is not checked and the css classes don't seem to
be working. This only happens in IE and I can't figure it out.

Thanks For any help you can give,
Tom

I checked your code. *_Every_* single place where you use setAttribute,
there is a more efficient and better DOM 2 attribute to do your
instruction. It is widely known that setAttribute is not well supported
or working well on many browsers when corresponding DOM 2 attribute work
a lot better.
I would use insertRow and insertCell rather than createElement("tr") and
createElement("td") for several reasons I won't detail here.

Your code at times is very confusing. E.g.:

var row = document.createElement("tr");
var td = new Array();

Now, tell others viewing and reviewing your code (or even just yourself
in 3 months from now) that row is a reference to a row and td is a
reference to an array...

You're misusing innerHTML also IMO. innerHTML is best used to insert
html code, not to insert a text node or to modify the node value of a
text node.

Some other instructions will certainly create problems on browsers and
some PC with modest system resources. You use 4 levels of nested tables
and your page design only needs 1 table; 4 levels of nested tables for
such page is unjustified and will add to an already great burden (memory
management, DHTML performance, overall increased complexity). You resort
to 20 spacer filling gif images, deprecated attributes (e.g. font,
nowrap, etc.), document.write techniques along with DOM 2 methods. Some
of your instructions are correctly constructed but I wonder why you need
to create such a complex page. I.e. do you really need to create a 2
dimensions array variable to store hidden values? Have you considered
that such page could be too demanding for modest system resources? For
sure, some iterative instructions (having 13 DOM node references) will
be difficult to accomplish on some systems: some systems will just crash.

<td nowrap><font class="label">&nbsp;Year&nbsp;</font></td>
If this cell within a 4th level of nested table must not wrap, then
there is no need to use &nbsp;: it's redundant, unneeded.
Everywhere you use &nbsp; (more than 100) in 20 cells, you could just
replace and remove all these (tag soup) and all <font> tags with a
simple one-line-long css rule.

You use very recent modern attributes and methods with a very old,
deprecated, non-recommendable webpage design.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html
 
C

Code Ronin

Thomas said:
Specifically, the checkbox is not checked and the css classes don't seem to
be working. This only happens in IE and I can't figure it out.

Went to you web page, dropped into the debugger and traced it. Here is
what I found.

When you check the checkbox with the line:

chk.setAttribute("checked", "true");

Everything is as it should be. Looking at chk.checked the value is
true. Then you execute the line:

td[1].appendChild (chk);

And chk.checked is false. I moved the first line down below the second
and then hit the problem at:

row.appendChild(td);

Move it after the for loop and it hits again at:

myTBody.insertBefore(row,qsRow);

Finally, I moved the line as the last line in the function and it
works as it should.

Now EXPLAINING WHY it happens ... well, that is a whole other
ballgame. I have no idea why it does not work other than "bug"? Maybe
someone can shed some light.

Short-term fix is to move the line to the last one in the function and
add a comment indicating why it is there and not up in its proper
place.
 
T

Thomas

You certainly seem to know your stuff, so let me explain some of my choices
here.
I checked your code. *_Every_* single place where you use setAttribute,
there is a more efficient and better DOM 2 attribute to do your
instruction.

Probably, I was just following the examples one Apple's developer site. Had
I know of more widely accepted methods I would have used them.

Your code at times is very confusing. E.g.:
Now, tell others viewing and reviewing your code (or even just yourself
in 3 months from now) that row is a reference to a row and td is a
reference to an array...

You're right, I'm being inconsitent in my commenting. I don't usually
comment much, a fault I blame on my C background where comments are looked
down upon by my uber nerds peers.

You're misusing innerHTML also IMO. innerHTML is best used to insert
html code, not to insert a text node or to modify the node value of a
text node.

I tried to insert a text node, but I found it to be a quick and dirty fix to
use innerHTML. My bad.

Some other instructions will certainly create problems on browsers and
some PC with modest system resources. You use 4 levels of nested tables
and your page design only needs 1 table...

I know. I've tried to reduce this as much as possible, but this has been
the only way I've found to maintain the appearance accross browsers.

<td nowrap><font class="label">&nbsp;Year&nbsp;</font></td>
If this cell within a 4th level of nested table must not wrap, then
there is no need to use &nbsp;: it's redundant, unneeded.
Everywhere you use &nbsp; (more than 100) in 20 cells, you could just
replace and remove all these (tag soup) and all <font> tags with a
simple one-line-long css rule.

The non-breaking spaces are just for padding. I found that some browsers
ignore the padding style under certain circumstances, but never ignore the
&nbsp;

You use very recent modern attributes and methods with a very old,
deprecated, non-recommendable webpage design.

I know, but now you're just scolding me.

Thanks for the input
 
D

DU

Thomas said:
You certainly seem to know your stuff, so let me explain some of my choices
here.




Probably, I was just following the examples one Apple's developer site. Had
I know of more widely accepted methods I would have used them.





You're right, I'm being inconsitent in my commenting. I don't usually
comment much, a fault I blame on my C background where comments are looked
down upon by my uber nerds peers.





I tried to insert a text node, but I found it to be a quick and dirty fix to
use innerHTML. My bad.

CharacterDataNode.nodeValue = "new text"
is flawlessly and impeccably supported by recent browsers. Updating text
node in such manner is also known to be 300% faster on slower systems.
I know. I've tried to reduce this as much as possible, but this has been
the only way I've found to maintain the appearance accross browsers.

You only need 1 table because you're using tabular data; your data could
be linearized.

Open Source Web Design
http://www.oswd.org/

CSS Layout Techniques: Look Ma, No Tables at glish.com
http://glish.com/css/

CSS Tableless Sites
http://www.meryl.net/css/

You have to define what is your lowest common denominator for such
webpage design and purposes.
Right now, you're coding as if old browsers will be catered for while
using very recent DOM 2 attributes, methods which are known to be not
supporting such attributes and methods.
At the same time, recent browsers are served deprecated elements and
attributes as well. I don't see consistent in all this. FYI, using DOM 2
HTML methods is much more widely supported and reliable than
setAttribute().

The non-breaking spaces are just for padding. I found that some browsers
ignore the padding style under certain circumstances, but never ignore the
&nbsp;

That's certainly expectable if the html code commands no padding for cells:
<table border="0" cellpadding="0" cellspacing="0">

Your HTML coding just unneedlessly increase size of the file while your
scripts are calling very recent DOM 2 methods.
I know, but now you're just scolding me.

Sorry if you feel this way; that was not my intent. I wanted to tell you
fair and square and in an explanatory manner that your design and coding
needs to be consequent and coherent.
Thanks for the input

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html
 
T

Thomas

I do appreciate it. I'm reworking it now. Scope creep has changed the
target browsers too often to count. At first we needed all 4.0 browsers and
up. Then we needed to use these recent methods that exclude older browsers.
I just kept adding to the code as opposed to rewriting it.

Thanks for your insights.
Tom
 
T

Thomas

I've been messing around a bit with the insertRow. It does not seem to work
in Mozilla. I may be using it wrong. Considering your knowledge of the
subject, could you direct me to a resource page that has a good explaination
of how to use this method.
 
D

DU

Thomas said:
I've been messing around a bit with the insertRow. It does not seem to work
in Mozilla. I may be using it wrong. Considering your knowledge of the
subject, could you direct me to a resource page that has a good explaination
of how to use this method.


http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/CreatingTable.html

I have no problem at all with insertRow and insertCell in Mozilla 1.5
and Opera 7.20. The only problem I have in MSIE 6 for Windows involves a
for loop applied to local variables; for some unknown reason, the
insertRow call does not return a pointer to the newly created row or
such pointer is not successfully stored into a local variable. This has
to be a MSIE 6 bug. Besides this, the support for insertRow in MSIE 6
for windows is good.

Good weekend!

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top