Javascript and IE? Javascript and C#?

P

porter

While my question might be simple, the environment around it is
terribly messy and so I will try to keep this clear and simple by only
including the relevant code - however, as I will soon suggest, I worry
that the problem isnt in what would seem to be the relevant code but
instead is lost somewhere in the do-and-donts of the peripheral code.
So at the end, i'll try to include all the affected code and you can
see if any of its actually relevant. I know there is a lot going on...
sorry, but I tried to write this clearly.

So here is what I imagine to be relevant. I'm working with a page that
uses a very simple javascript function change the style of an <li>
element (display=block;). The code is simple...which is why I cant
understand my problem. This function is being called by <body
onload="fop()">

// Javascript function

function fop()
{
var dropDown = document.getElementById("region");
var firstName = dropDown.name;
var fload = document.getElementById(firstName);
fload.style.display = "block";
}

// This is where it grabs the name value. "View Source" confrims the
values work, (eg. name="ZHT")
<select name="<%=Request.QueryString("lang")%>" id="region"
onchange="selectMenu();">


//This is one of the <li> tags
<li class="operatorLI" id="ZHT">


// Later for testing, I tried this (see below)
<li class="operatorLI" id="ZHT" name="TESTME">

The result is this. Firefox works, IE doesn't haha.

In more detail, when I use alert() to "trace" (sorry, im actually a
flash developer and damnit, I need my trace() function!) the progress
of the function, the function doesnt break...but I can see where
things, for whatever crack-head reason, start to go strange. They go
strange when I ask for the name value of "fload", Firefox correctly
returns the name value of the <li> which would be "TESTME" while I
returns the name value for the <select> tag which is "ZHT".

....?!?! what?!!?

Obviously, I played with this alot...and I cant seem to find the
reason for it. I tried taking out all the dynamic stuff and hard
coding things - still, what the hell, it ALWAYS gives me the name
value for the <select> tag as if it were completely ignoring
getElementsById();

So im guessing this has something to do with the way that im rendering
things in C#. I know that IE is a little girl who, if things arent
spelled out exactly right, crys and breaks. So did I mess something
up? Is my onload() broken? Seriously...im at a loss here.

So, any ideas guys?

Well if that didn't help, here is the all the code (I added some
comments so you could walk along with it). There are three pages plus
a javascript at the end. Sorry, but I can't include the assembly
because there is some sensitive stuff - but trust that it works and
more, it really does have nothing to do with this. You can see how
its used by the literals, it really has nothing to do with this.

PAGE 1 - ss.aspx:

<%@ Import Namespace="genieLibrary" %>
<%@ Assembly Src="includes/genieClasses.cs" %>
<script language="C#" runat="server">
private void Page_Load(object sender, System.EventArgs e)
{
//Starts new webservice
genieWebService gweb = new genieWebService();

//Nav bar
productNav.Text = gweb.getNav();

// Gets URL variables
string url = Request.QueryString["page"];

//Location of the files
string page = "includes/serviceSupport/";

// Setup new controller for dynamic page content
Control loadThis ;

// These are the different file names
switch (url) {
case "dealerTools":
loadThis = LoadControl(page + "dealerTools.ascx");
break;
case "tech":
loadThis = LoadControl(page + "techSupport.ascx");
break;
case "training":
loadThis = LoadControl(page + "training.ascx");
break;
default:
loadThis = LoadControl(page + "default.ascx");
break;
}

if(url == "manuals")
{
string kind = Request.QueryString["c"];

// Need to bring the value of page back to "zero" so to speak
page = "includes/serviceSupport/";

// These are the different file names
switch (kind)
{
case "parts":
loadThis = LoadControl(page + "manuals_parts.ascx");
break;
case "service":
loadThis = LoadControl(page + "manuals_service.ascx");
break;
case "operator":
loadThis = LoadControl(page + "manuals_operator.ascx");
bodyAtts.Text = " onload=\"fop()\"";
break;
case "lang":
loadThis = LoadControl(page + "manuals_lang.ascx");
break;
case "specs":
loadThis = LoadControl(page + "manuals_specs.ascx");
break;
case "schematics":
loadThis = LoadControl(page + "manuals_schematics.ascx");
break;
default :
loadThis = LoadControl(page + "manuals_main.ascx");
break;
}
}

// Sends data to the placeholder named "mainContnet" and adds
// Content of the controler "loadThis"
mainContent.Controls.Add(loadThis);

// End of sub routine
}

</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Genie Industries - Product Manuals</title>
<link type="text/css" href="jscss/serviceSupport.css"
rel="stylesheet" />
<!-- #include file="includes/header.aspx" -->
<script language="javascript" src="jscss/manualMenu.js"></script>
</head>
<body<asp:Literal id="bodyAtts" runat="server" />>


Page 2 - manuals_lang.ascx

<div id="ss">
<h3>SOME PAGE TITLE</h3>
<p>Select your language
<ul class="manuals" style="display:block; margin: 0 0 0 2em;">
<li><a href="ss.aspx?page=manuals&c=operator&lang=ZHT">Chinese
Simplified</a></li>
<li><a href="ss.aspx?page=manuals&c=operator&lang=CT">Chinese
Traditional</a></li>
<li><a href="ss.aspx?page=manuals&c=operator&lang=Ch">Czech</a></li>
<li><a href="ss.aspx?page=manuals&c=operator&lang=DA">Danish</a></li>
<li><a href="ss.aspx?page=manuals&c=operator&lang=DU">Dutch</a></li>
<li><a href="ss.aspx?page=manuals&c=operator&lang=EN">English</a></li>
<li><a href="ss.aspx?page=manuals&c=operator&lang=FI">Finnish</a></li>
<li><a href="ss.aspx?page=manuals&c=operator&lang=FR">French</a></li>
<li><a href="ss.aspx?page=manuals&c=operator&lang=DE">German</a></li>
<li><a href="ss.aspx?page=manuals&c=operator&lang=HU">Hungarian</a></
li>
<li><a href="ss.aspx?page=manuals&c=operator&lang=IT">Italian</a></li>
<li><a href="ss.aspx?page=manuals&c=operator&lang=JP">Japanese</a></
li>
<li><a href="ss.aspx?page=manuals&c=operator&lang=KO">Korean</a></li>
<li><a href="ss.aspx?page=manuals&c=operator&lang=NO">Norwegian</a></
li>
<li><a href="ss.aspx?page=manuals&c=operator&lang=PO">Polish</a></li>
<li><a href="ss.aspx?page=manuals&c=operator&lang=PT">Portuguese
Brazilian</a></li>
<li><a href="ss.aspx?page=manuals&c=operator&lang=RO">Romanian</a></
li>
<li><a href="ss.aspx?page=manuals&c=operator&lang=RU">Russian</a></li>
<li><a href="ss.aspx?page=manuals&c=operator&lang=ES">Spanish</a></li>
<li><a href="ss.aspx?page=manuals&c=operator&lang=SW">Swedish</a></li>
</ul>
</div>

Page 3 - manuals_operator.ascx

<div id="ss">
<div id="changeLang">
<p>Change selected language<br />
//Select tag that makes different elements visible/invisible with the
onchange()
<select name="<%=Request.QueryString("lang")%>" id="region"
onchange="selectMenu();">
<option value=""> - Select - </option>
<option value="CS">Chinese Simplified</option>
<option value="CT">Chinese Traditional</option>
<option value="CZECH">Czech</option>
<option value="DANISH">Danish</option>
<option value="DUTCH">Dutch</option>
<option value="ENGLISH">English</option>
<option value="FINNISH">Finnish</option>
<option value="FRENCH">French</option>
<option value="GERMAN">German</option>
<option value="HUNGARY">Hungarian</option>
<option value="ITALIAN">Italian</option>
<option value="JAPANESE">Japanese</option>
<option value="KOREAN">Korean</option>
<option value="NORWEGIAN">Norwegian</option>
<option value="POLISH">Polish</option>
<option value="PORTUGUESE">Portuguese Brazilian</option>
<option value="ROMANIAN">Romanian</option>
<option value="RUSSIAN">Russian</option>
<option value="SPANISH">Spanish</option>
<option value="SWEDISH">Swedish</option>
</select>
</p>
</div>
<h3>SOME PAGE TITLE</h3>
<ul class="operatorUL">
<li class="operatorLI" id="ZHT">Chinese Simplified
<ul class="mantop">
<li name="001a"><a class="mouseOn" onclick="getMenu('001');">SOME
NAME</a>
<ul class="manuals" id="001">
<li><a>Sorry, I cant show this, but sufficing to say its just a href
and name</a><li>
</ul>
</li>

....etc.

And then finally, here is the .js

function getMenu( id )
{
var parentId = id + "a";
var parent = document.getElementById(parentId);
var child = document.getElementById(id);

if(child.name == "on")
{
parent.className = "norm";
child.style.display = "none";
child.name = "off";
}
else
{
parent.className = "on";
child.style.display = "block";
child.name = "on";
}

}

function selectMenu()
{
var dropDown = document.getElementById("region");
var selectedText = dropDown.options[dropDown.selectedIndex].value;

var displayThis = document.getElementById(selectedText);

// Kills the old one
var killName = dropDown.name;
if(killName != "first")
{
var killThis = document.getElementById(killName);
killThis.style.display = "none";
}
// Creates New Ones;
displayThis.style.display = "block";
dropDown.name = selectedText;
}

function fop()
{

var dropDown = document.getElementById("region");
var firstName = dropDown.name;

var fload = document.getElementById(firstName);
// fload.className = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
fload.style.display = "block;";
}
 
T

Thomas 'PointedEars' Lahn

porter said:
While my question might be simple, the environment around it is
terribly messy and so I will try to keep this clear and simple by only
including the relevant code - however, as I will soon suggest, I worry
that the problem isnt in what would seem to be the relevant code but
instead is lost somewhere in the do-and-donts of the peripheral code.
So at the end, i'll try to include all the affected code and you can
see if any of its actually relevant. I know there is a lot going on...
sorry, but I tried to write this clearly.

Much ado about nothing. Shakespeare would be proud of you ...
So here is what I imagine to be relevant.

Finally. I was just falling asleep.
I'm working with a page that uses a very simple javascript function
change the style of an <li> element (display=block;). The code is
simple...which is why I cant understand my problem. This function
is being called by <body onload="fop()">

// Javascript function

function fop()
{
var dropDown = document.getElementById("region");
var firstName = dropDown.name;
var fload = document.getElementById(firstName);
fload.style.display = "block";
}

// This is where it grabs the name value. "View Source" confrims the
values work, (eg. name="ZHT")
<select name="<%=Request.QueryString("lang")%>" id="region"
onchange="selectMenu();">


//This is one of the <li> tags
<li class="operatorLI" id="ZHT">


// Later for testing, I tried this (see below)
<li class="operatorLI" id="ZHT" name="TESTME">

The result is this. Firefox works, IE doesn't haha.

"Does not work" is a useless error description. [psf 4.11]

But let's see, maybe something interesting comes up eventually:
In more detail, when I use alert() to "trace" [blabla] the progress
of the function, the function doesnt break...but I can see where
things, for whatever crack-head reason, start to go strange. They go
strange when I ask for the name value of "fload", Firefox correctly
returns the name value of the <li> which would be "TESTME" while I
returns the name value for the <select> tag which is "ZHT".

It is well-known among competent Web developers that NAME and ID attribute
values in a HTML document share the same namespace. The MSHTML DOM
implements this concept weirdly, and handles `name' and `id' attribute
values much the same (even though the former are often of type CDATA).
There is nothing you can do about it.

However, in your case you will observe that the `li' element has no `name'
attribute (not even in HTML 4.01 Transitional), and so the MSHTML DOM is
correct, albeit in a weird way.

http://www.w3.org/TR/html401/struct/lists.html#h-10.2
[...]...?!?! what?!!?

Your keyboard appears to be borken, especially the `?' and `!' keys.
You should fix that if you want to be taken seriously in the future.
Obviously, I played with this alot...and I cant seem to find the
reason for it. I tried taking out all the dynamic stuff and hard
coding things - still, what the hell, it ALWAYS gives me the name
value for the <select> tag as if it were completely ignoring
getElementsById();

That is a known peculiarity of the MSHTML DOM. The element that comes first
in the markup and has a matching `name' or `id' attribute value determines
which element object reference is returned with document.getElementById().
So im guessing this has something to do with the way that im rendering
things in C#.

Not at all.
I know that IE is a little girl who, if things arent
spelled out exactly right, crys and breaks. So did I mess something
up? Is my onload() broken? Seriously...im at a loss here.

You now "know" that you "know" far less than you thought you "know".
Guess what you will "know" tomorrow ...
So, any ideas guys?

Well if that didn't help, here is the all the code (I added some
comments so you could walk along with it). There are three pages plus
a javascript at the end. Sorry, but I can't include the assembly

That's a pity. It just got sooo interesting. NOT.
[...]
PAGE 1 - ss.aspx:
[more than 200 lines of mostly uncommented code]

You must be kidding. Dump that junk where it belongs, not here.

http://jibbering.com/faq/


PointedEars, Score adjusted
 
P

porter

Much ado about nothing. Shakespeare would be proud of you ...

The glory of the internet is that you can appear much bolder than
really you are because no one is there to call you out. But the fact
is kid, I am cooler than you, most likely more attractive (physically,
monetarily...etc) and more, I am apparently nicer than you. I thought
that I would try to make something easier for people to read - it's
the niceties in life that make things a little more pleasant :) But
thank you for the compliment.

Finally. I was just falling asleep.

I doubt it. But context-irrelevant, there is a certain economy to
google groups that perhaps you've never noticed. Kids like me, with
important things to do and lives to lead, post here in hopes that
other kids without important things to do, who wouldn't mind reading
over pages and pages of simple questions, will provide them answers
and sometimes even new ways of thinking about things. Of course the
trade off is that we get the answers we need and you, after sifting
through the waste, can enjoy that one moment where you feel important;
everyone needs to feel loved I suppose. We both get what we want :)

"Does not work" is a useless error description.

Yeah, sorry about that. The thing is that the English language is
pretty linear and I couldn't reference a subject that wasn't already
introduced. But I agree, something less linear would have been a
better fit.

It is well-known among competent Web developers that NAME and ID
attribute
values in a HTML document share the same namespace. The MSHTML DOM
implements this concept weirdly, and handles `name' and `id'
attribute
values much the same (even though the former are often of type
CDATA).
There is nothing you can do about it.

"well-known" to competent developers...eh, fine. But for sure not
designers (who are becoming increasingly more important and better
paid while the former less and less) and not with the new "designers/
pseudo-developers" like myself. More, im not sure how its relevant
beyond outside of the said economy but good to know! I feel smarter
already!

Your keyboard appears to be borken, especially the `?' and `!' keys.
You should fix that if you want to be taken seriously in the future.

Clever...

Not at all.

Yeah, got it.

You now "know" that you "know" far less than you thought you "know".
Guess what you will "know" tomorrow ...

Yes, think what I will know. I will know about this odd, completely
counter-intuitive facet to "standards" as well as numerous other
things...I cant wait! :)

That's a pity. It just got sooo interesting. NOT.

Now, I know we mentioned the google groups economy...but if you came
here looking for excitement (and not nerd-glory) then perhaps you came
to the wrong place? I don't know...just thinking out-loud.

You must be kidding. Dump that junk where it belongs, not here.

Noted. Well, now that you sorted all that out for me, I am going to
go enjoy other parts of my life! But please keep up the good work
reading all these posts and then taking the time to reply!
 
N

Noah Sussman

So here is what I imagine to be relevant. I'm working with a page that
uses a very simple javascript function change the style of an <li>
element (display=block;). The code is simple...which is why I cant
understand my problem. This function is being called by <body
onload="fop()">

Not to be overly critical but you probably want to avoid using names
of only 3 characters in length. It makes for less typing, but it's
harder for other people (and you, once you've been away for a couple
weeks) to quickly get a sense of what you are trying to accomplish.

Also consider using "unobtrusive JavaScript," it's very easy. Just
instead of <body onload="myFunc()"> try this inside your JavaScript
include or SCRIPT tag:

window.onload = myFunc;

This keeps your markup and behavior separate, which is nice if you
want to switch to a different set of behaviors (or markup) later on.
// Javascript function

function fop()
{
var dropDown = document.getElementById("region");
var firstName = dropDown.name;

Just use dropDown.id instead of dropDown.name and your problems should
go away. The NAME attribute is only for forms, and iirc is deprecated
and should go away in future versions of the HTML spec.
// Later for testing, I tried this (see below)
<li class="operatorLI" id="ZHT" name="TESTME">

If you do use NAME, the spec says the NAME you use should be the same
as the ID. But again, that would only be for backward compatibility
on a form. You don't need or want a NAME attribute here, nor is it
valid HTML. One thing that might help you in the future is the w3's
HTML validator. Run your page through this, and get rid of all the
errors before you spend time debugging your JS. Trying to get JS to
run on invalid markup is a waste of your valuable time.

http://validator.w3.org/

Now, if for some reason you did want another identifier besides the
ID, you could use a class name, or perhaps a REL attribute. But if
you've got meta-data you want associated with an element, imo it's
cleaner to build a JavaScript data structure to use as a lookup
table. Consider using the elements' IDs as your keys. This keeps
your markup free of mysterious cruft (that will just slow down the
poor person who inherits your code later on) and is more flexible:

var lookup = {
ZHT: "TESTME",
foo: "my meta-data",
bar: ['more', 'complex', 'meta', 'data']
}

//then for a trivial example, if ZHT were the first LI element in your
document
var myLiId = document.getElementsByTagName('li')[0].id;
var myLiName = lookup[ myLiId ]; //the value of myLiName is now
'TESTME'

im actually a
flash developer and damnit, I need my trace()

then you would probably love the Firebug Firefox extension, which
actually provides trace(), along with many other useful debugging
tools, including a console that is much more convenient than using
alert().

http://www.getfirebug.com/console.html
I know that IE is a little girl

that is an insult to little girls ;)

good luck with your coding
 
N

Noah Sussman

So here is what I imagine to be relevant. I'm working with a page that
uses a very simple javascript function change the style of an <li>
element (display=block;). The code is simple...which is why I cant
understand my problem. This function is being called by <body
onload="fop()">

Not to be overly critical but you probably want to avoid using names
of only 3 characters in length. It makes for less typing, but it's
harder for other people (and you, once you've been away for a couple
weeks) to quickly get a sense of what you are trying to accomplish.

Also consider using "unobtrusive JavaScript," it's very easy. Just
instead of <body onload="myFunc()"> try this inside your JavaScript
include or SCRIPT tag:

window.onload = myFunc;

This keeps your markup and behavior separate, which is nice if you
want to switch to a different set of behaviors (or markup) later on.
// Javascript function

function fop()
{
var dropDown = document.getElementById("region");
var firstName = dropDown.name;

Just use dropDown.id instead of dropDown.name and your problems should
go away. The NAME attribute is only for forms, and iirc is deprecated
and should go away in future versions of the HTML spec.
// Later for testing, I tried this (see below)
<li class="operatorLI" id="ZHT" name="TESTME">

If you do use NAME, the spec says the NAME you use should be the same
as the ID. But again, that would only be for backward compatibility
on a form. You don't need or want a NAME attribute here, nor is it
valid HTML. One thing that might help you in the future is the w3's
HTML validator. Run your page through this, and get rid of all the
errors before you spend time debugging your JS. Trying to get JS to
run on invalid markup is a waste of your valuable time.

http://validator.w3.org/

Now, if for some reason you did want another identifier besides the
ID, you could use a class name, or perhaps a REL attribute. But if
you've got meta-data you want associated with an element, imo it's
cleaner to build a JavaScript data structure to use as a lookup
table. Consider using the elements' IDs as your keys. This keeps
your markup free of mysterious cruft (that will just slow down the
poor person who inherits your code later on) and is more flexible:

var lookup = {
ZHT: "TESTME",
foo: "my meta-data",
bar: ['more', 'complex', 'meta', 'data']
}

//then for a trivial example, if ZHT were the first LI element in your
document
var myLiId = document.getElementsByTagName('li')[0].id;
var myLiName = lookup[ myLiId ]; //the value of myLiName is now
'TESTME'

im actually a
flash developer and damnit, I need my trace()

then you would probably love the Firebug Firefox extension, which
actually provides trace(), along with many other useful debugging
tools, including a console that is much more convenient than using
alert().

http://www.getfirebug.com/console.html
I know that IE is a little girl

that is an insult to little girls ;)

good luck with your coding
 
T

Thomas 'PointedEars' Lahn

porter said:
Much ado about nothing. Shakespeare would be proud of you ...

You didn't wrote that; I did. But it is obvious you are far too
stupid to quote properly:
The glory of the internet is that you can appear much bolder than
really you are because no one is there to call you out. [blabla]

*PLONK*
 
T

Thomas 'PointedEars' Lahn

Noah said:
Not to be overly critical but you probably want to avoid using names
of only 3 characters in length. It makes for less typing, but it's
harder for other people (and you, once you've been away for a couple
weeks) to quickly get a sense of what you are trying to accomplish.

Also consider using "unobtrusive JavaScript," it's very easy.

No, don't. It's inherently error-prone.
Just instead of <body onload="myFunc()"> try this inside your JavaScript
include or SCRIPT tag:

`script' _element_
window.onload = myFunc;

Proprietary, unnecessary nonsense.
This keeps your markup and behavior separate, which is nice if you
want to switch to a different set of behaviors (or markup) later on.

DOM scripts operate on specific markup. It does not make sense to separate
markup and DOM script. DOM scripting isn't quite like stylesheets.
Just use dropDown.id instead of dropDown.name and your problems should
go away.

Most certainly they will. But then

var firstName = "region";

would have sufficed.
The NAME attribute is only for forms,

Nonsense. Not only form controls have a `name' attribute:

http://www.w3.org/TR/html401/index/attributes.html
and iirc is deprecated

You remember incorrectly. It is even there in XHTML 1.1:

http://www.w3.org/TR/2000/CR-xhtml-modularization-20001020/dtd_module_defs.html#a_dtdspecial

It is deprecated in HTML 4.01 _for the `applet' element_ only, see above.
It is not even deprecated for `a' elements in XHTML 1.0:

http://www.w3.org/TR/xhtml1/dtds.html#dtdentry_xhtml1-strict.dtd_a

The subsection http://www.w3.org/TR/xhtml1/#h-4.10 which contains

| Note that in XHTML 1.0, the name attribute of [ elements is formally
| deprecated, and will be removed in a subsequent version of XHTML.

is part of the non-normative section 4, and so the DTD takes precedence.
and should go away in future versions of the HTML spec.

Utter nonsense, see above.
If you do use NAME, the spec says the NAME you use should be the same
as the ID.

Utter nonsense. That applies for `a' elements only:

http://www.w3.org/TR/html401/struct/links.html#h-12.2.3
But again, that would only be for backward compatibility
on a form.

Utter nonsense. The value of form controls that have only an ID is not
submitted in XHTML 1.x, too:

http://www.w3.org/TR/html401/interact/forms.html#h-17.13.3
You don't need or want a NAME attribute here, nor is it
valid HTML. One thing that might help you in the future is the w3's
HTML validator. Run your page through this, and get rid of all the
errors before you spend time debugging your JS. Trying to get JS to
run on invalid markup is a waste of your valuable time.

http://validator.w3.org/

That, at last, is true.
Now, if for some reason you did want another identifier besides the
ID, you could use a class name,
Yes.

or perhaps a REL attribute.

That would most certainly constitute abuse of that attribute:

http://www.w3.org/TR/html401/struct/links.html#adef-rel

For HTML `li' elements, it would also constitute invalid markup:

http://www.w3.org/TR/html401/struct/lists.html#h-10.2
http://www.w3.org/TR/html401/sgml/loosedtd.html


PointedEars
 

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,769
Messages
2,569,582
Members
45,065
Latest member
OrderGreenAcreCBD

Latest Threads

Top