C# and javascript? Or C# and Javascript + IE?! I really dont know...

  • Thread starter Thread starter porter
  • Start date Start date
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 where does C# come in? Well, this takes place in a web control
object and because I know this javascript works (its like the simplest
function in the world) then I was wondering if there is some strange
C# rule that is messing things up. To be honest, I defiantly more of
an inline kinda guy and so this whole code-behind thing is both
counter-intuitive and not very well understood for me. There could be
some obvious mistake - I don't know.

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;";
}
 
The great thing about C# and JavaScript which makes using ASP.NET with C#
much wiser than VB.NET is the fact that C# and JavaScript puncutation is
exactly the same making it easier to learn how to code when reading the
encyclopedic amount of code in the public domain. That said, it can be a
source of writing code using Javascript syntax and grammar when C# syntax
and grammar should be used. Here's the difference you need to really
understand...

C# server-side code runs on the web server and the compiler compiles the
page which is returned to the browser. During the page compilation process
the HTML in the .aspx page and any HTML which may be generated by controls
or any other source is generated by C# code builds the page which is
compiled and returned as HTML to the browser.

Once the page has been sent to a browser JavaScript is used as client-side
code to alter the contents of the page without returning the page to the
server. The use of AJAX has changed this somewhat but it remains
fundamentally the same because the JavaScript used by AJAX is still running
in the browser as client-side code whether it makes calls to a server or
not.

Any code in an .aspx page which is contained by a <script> block that has an
attribute type="JavaScript" and any JavaScript referenced externally using a
<link> element will only run in the browser.

The alert( ) function is still a good and common way to debug client-side
JavaScript and as sophisticated as debuggers can be it is often just as easy
to use server-side code such as Response.Write or Page.Title to send
messages during "debugging" a page.

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.

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 where does C# come in? Well, this takes place in a web control
object and because I know this javascript works (its like the simplest
function in the world) then I was wondering if there is some strange
C# rule that is messing things up. To be honest, I defiantly more of
an inline kinda guy and so this whole code-behind thing is both
counter-intuitive and not very well understood for me. There could be
some obvious mistake - I don't know.

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;";
}
Click to expand...
 
Back
Top