Javascript - "function not defined"

[Kevin]

My HTML has 2 javascript functions. The first function, showReport,
simply reads an XML file and populates a table. The second function,
selectTab, allows for different data to be shown based on which button
is pressed. For example, there may be 2 buttons- Executive and
Technical. If you press the "Executive" button, then you'll only see a
view geared towards executives, whereas Technical shows technical
features.

The buttons' onClick functions make use of "selectTab," however I
constantly get an error, " selectTab not defined" whenever I press the
button in my web browser.

Please take a look at it (I have many times) and let me know if you
see any errors.

function selectTab(x)
{

if(x == "ps")
{
document.getElementById("project_summary").style.visibility =
"visible";
document.getElementById("proposal_information").style.visibility =
"hidden";
document.getElementById("cs_criteria").style.visibility =
"hidden";

document.getElementById("project_summary").style.display = "";
document.getElementById("proposal_information").style.display =
"none";
document.getElementById("cs_criteria").style.display = "none";
return;
}

else if(x == "pi")
{
document.getElementById("project_summary").style.visibility =
"hidden";
document.getElementById("proposal_information").style.visibility =
"visible";
document.getElementById("cs_criteria").style.visibility =
"hidden";

document.getElementById("project_summary").style.display = "none";
document.getElementById("proposal_information").style.display =
"";
document.getElementById("cs_criteria").style.display = "none";
return;
}

else if(x == "csc")
{
document.getElementById("project_summary").style.visibility =
"hidden";
document.getElementById("proposal_information").style.visibility =
"hidden";
document.getElementById("cs_criteria").style.visibility =
"visible";

document.getElementById("project_summary").style.display = "none";
document.getElementById("proposal_information").style.display =
"none";
document.getElementById("cs_criteria").style.display = "";
return;
}

else
{
alert ("error");
return;
}
}

 

[Thomas 'PointedEars' Lahn]

[...]
The second function, selectTab, allows for different data to be shown
based on which button is pressed. For example, there may be 2 buttons-
Executive and Technical. If you press the "Executive" button, then you'll
only see a view geared towards executives, whereas Technical shows
technical features.

The buttons' onClick functions

When spelled like that, those must be (event-handler) _attributes_, not
functions.

make use of "selectTab," however I constantly get an error, " selectTab
not defined" whenever I press the button in my web browser.

You must have not defined it, then. If the function itself is
syntactically correct, and ISTM that which you posted is, this is often
caused by a syntax error before the function declaration. Or you have not
included the necessary script resources.

Please take a look at it (I have many times) and let me know if you
see any errors.

function selectTab(x)
{

if(x == "ps")

The call to this function is missing, so one can assume you pass literal
string values. You should be passing and testing those values via variable
or property value instead, where you probably should prefer numeric values.
Probably you want to do a strict compare (`==='), which can be considered
safe to use nowadays.

{
document.getElementById("project_summary").style.visibility =
"visible";
document.getElementById("proposal_information").style.visibility =
"hidden";
document.getElementById("cs_criteria").style.visibility =
"hidden";

Enabling/disabling form controls is the practice recommended over
showing/hiding form controls with regard to usability.

document.getElementById("project_summary").style.display = "";

Consider storing object references that are used repeatedly, in local
variables or globally available properties.

It is unnecessary to set both the `visibility' and `display' CSS properties
for the same element here. Set either one or the other.

[...]
}

else if(x == "pi")

You might want to look into the switch-case-default statement instead.

{
document.getElementById("project_summary").style.visibility =
"hidden";
document.getElementById("proposal_information").style.visibility =
"visible";
document.getElementById("cs_criteria").style.visibility =
"hidden";

In all three branches, those lines only differ in the assigned values. You
should consider storing the value to be assigned in a variable and assign
the variable value.

[...]
else
{
alert ("error");

window.alert(...);

But since the mistake triggering the alert should be corrected while still
in the testing stage, you should be using less obtrusive means to signal
the problem. One possibility is calling the methods of the object referred
to by `console', which is available in several browser environments
(feature-test it before you use it), such as console.log(...).

return;

Those `return' statements are unnecessary. Early return is a good design
principle for a function, as it increases its efficiency; however, you do
not return early here, and if you do not return a value the default
`undefined' value is returned by the function, the same as if you omitted
the standalone `return'.

Other than that, I can see nothing inherently wrong with your function.
But context is key, and the *relevant* context description, including the
function call, is completely missing from your posting.

So please read and adhere to <http://jibbering.com/faq/#posting> pp.


PointedEars

 

[Kevin]

You need to show us the part where you're calling selectTab, or provide
a link to a live example.

Hi stefan, thanks for your help in advance. Here's the overall design
of my html. I left out certain portions because I think they'd only
add clutter.

<html>
<head>
<script type="text/javascript">
function selectTab(x)
{
****** see code above in my first post ****
}

function showReport(xml_file)
{
// reads xml, then does a bunch of document.write(...) and
document.getElementByTagName(...) to draw the HTML and add inputs from
the XML


// the next 6 lines add the selectTab functionality so that only a
single tab at a time is displayed. the user
// can click 3 buttons to pick which view to see. naturally, clicking
button 2 will hide views 1 and 3
var x = document.getElementById("ps");
var y = document.getElementById("pi");
var z = document.getElementById("csc");

x.setAttribute('onClick','selectTab(\'ps\')');
y.setAttribute('onClick','selectTab(\'pi\')');
z.setAttribute('onClick','selectTab(\'csc\')');
}
</script>
</head>

<body>
<ul class="mktree" id="tree1">
<ul>
<li name="project1.xml" onClick="showReport(this.name)">Project 1</
li>
<li name="project2.xml">MONAX</li>
</ul>
</ul>
</body>

</html>

 

[Thomas 'PointedEars' Lahn]

[Stefan Weiss wrote:]

You need to show us the part where you're calling selectTab, or provide
a link to a live example.
[...]

Please learn to post properly:

1. Optional greeting;
2. One attribution line for each quotation level;
3. Quotation trimmed to the parts explicitly being referred to in your
response (which usually does not include signatures);
4. Below each quoted block, your response in proper English or whatever
language you are capable of writing in (but English as the lingua franca
of technology is certainly your best bet here). Especially, use the
Shift key where the language requires it.

See also the FAQ reference in my previous reply.

Here's the overall design of my html.

_HTML_

Is it the exact code except of the marked omissions? If yes, your markup

I left out certain portions because I think they'd only add clutter.

Unless you are referring to the marked omissions, that is a particularly
bad idea for a newcomer because such a person is not exactly in a position
to know what the clutter is.

[...]
// the next 6 lines add the selectTab functionality so that only a
single tab at a time is displayed. the user
// can click 3 buttons to pick which view to see. naturally, clicking
button 2 will hide views 1 and 3
var x = document.getElementById("ps");
var y = document.getElementById("pi");
var z = document.getElementById("csc");

x.setAttribute('onClick','selectTab(\'ps\')');
y.setAttribute('onClick','selectTab(\'pi\')');
z.setAttribute('onClick','selectTab(\'csc\')');

The most simple possibility to make this work is

x.onclick = function () { selectTab('ps'); };
y.onclick = function () { selectTab('pi'); };
z.onclick = function () { selectTab('csc'); };

This is proprietary, of course, so not supposed to play nice with the
standards-compliant document.getElementById(). Use it only as a fallback
for addEventListener().

One wonders, though, why you would add the event listeners with scripting
when you could have simply specified the event-handler attribute in the
markup. Is it perhaps because of some idea called "Unobtrusive JavaScript"
that you read about? If yes, forget about that and use standards-compliant
backwards-compatible event-handler attributes for intrinsic events.

[...]
<body>
<ul class="mktree" id="tree1">
<ul>
<li name="project1.xml" onClick="showReport(this.name)">Project 1</
li>

LI/li elements have no `name' attribute; your markup is not Valid. And
what about users using clients without script support? How they are going
to show the report?

Use

Project&nbsp;1</a></li>

instead, where you can format the markup being referred to with CSS, and
optionally transform it to (X)HTML/SVG with XSLT beforehand.


PointedEars

 

[Thomas 'PointedEars' Lahn]

[...]
var x = document.getElementById("ps");
var y = document.getElementById("pi");
var z = document.getElementById("csc");

x.setAttribute('onClick','selectTab(\'ps\')');
y.setAttribute('onClick','selectTab(\'pi\')');
z.setAttribute('onClick','selectTab(\'csc\')');

There are better ways than setAttribute to attach event handlers, and I
see that Thomas has already replied and given you a better alternative.
Another would be to use selectTab directly as the event handler:

Event _listener_ ...

x.onclick = selectTab;

.... as this does not overwrite the built-in event-handler that must call
the event listeners.

y.onclick = selectTab; // etc.

And in selectTab:

function selectTab (evt) {
evt = evt || window.event;

Do not assign when there is no need:

if (!evt) evt = window.event;

And you probably want to feature-test window.event before.

var id = (evt.target || evt.srcElement).id; // [1]

Test `evt' before, and test the reference before you access the `id'
property. Although the shortcuts are tempting, eschew raising reference
worms.

[...]

<body>
<ul class="mktree" id="tree1">

A LI is missing here.

Good catch. As always, "1. Validation may reveal your problem":

[...]
PS, [1]: There is/was a browser in which text nodes could be targets for
click events, instead of their container elements, but I forget which
one it was. Maybe Safari 2 or 3. In the interest of backward
compatibility, the "evt.target || evt.srcElement" part may need a
wrapper to avoid this case.

var t = evt.target || evt.srcElement;
if (t && t.nodeName != "#text")
{
// ...
}

should suffice (with more feature tests on `target' and `srcElement' before
access).


PointedEars

 

[Thomas 'PointedEars' Lahn]

I've seen you mention that before, but I don't see the difference.
Functions whose purpose it is to handle events are usually called event
handlers; that expression doesn't just refer to a built-in handler,
or even to DOM events.

Given the existence of window.addEventListener() one must question the
idea that there could be other events than DOM events.

I would prefer "listener" if there is more than one function attached to
the same event on the same element. Do you have any reference for this
distinction?

No, just simple logic. I would not expect to find a reference because DOM
events are basically a mess at this point (especially the keyboard-related
ones) even though they work more often than they don't.

I had noticed that there are no event handlers in W3C DOM Level 2+ Events,
but there are event listeners that are called from somewhere and have an
Event instance reference passed. So where are the event handlers? I would
submit that the event handlers are the routines built into the DOM
implementation that call the event listeners previously added, passing the
Event instance reference, and being inaccessible to script code. And that
so far only simplifying terminology has been used.

By contrast to the terminology used in proprietary documentation so far
(where Microsoft even goes so far as to talk of the properties as the
*events*, as in "onclick event", which is obviously incorrect), that
definition is at least consistent with the fact of defining the primary
event listener by assigning to the proprietary event-handler properties of
a DOM object, as you would _not_ be overwriting the event handler then. It
is also consistent with event-handler attributes and the way they map to
proprietary event-handler properties, and it can explain why some DOM
implementations and objects support some events but not others: regardless
how many event listeners you add for the event, their event handler(s)
is/are not going to call them.

IOW, it makes a lot more sense to me to think of event listeners as
callbacks (or container objects for callbacks, considering the
handleEvent() method of the EventListener interface) for a built-in event
handler which cannot be accessed from script code.

There's no harm in it.

I would not be so sure. `evt' can refer to a host object after all.
However, if one considers greater efficiency of a program to be of virtue,
then there is certainly already harm in not achieving it when that would be
possible.

Both forms are widely used and instantly recognizable to JS developers.

Irrelevant statement.

Assigning to "evt" is safe,

Is it?

and if there's any performance difference at all,

Are you suggesting that the cost of type-converting the value of `evt' to
boolean and assigning its value to itself is less that or equal to the cost
of type-converting its value to boolean and inverting that?

it would be negligible compared to the DOM operations which are going to
follow.

Irrelevant conclusion.

var id = (evt.target || evt.srcElement).id; // [1]

Test `evt' before, and test the reference before you access the `id'
property. Although the shortcuts are tempting, eschew raising
reference worms.

I use wrappers for all of this, and yes, the wrappers do check if the
event object and the event target have been found, and they also handle
the case described in [1]. For short examples like this, I prefer to
keep things as simple as possible, especially if this isn't really what
the OP was asking.

No need to apologize.

Obsessive feature testing, as necessary as it is, tends to obscure the
intended purpose of examples.

A few well-placed aliases are better than keeping people in the dark.

PS, [1]: There is/was a browser in which text nodes could be targets
for click events, instead of their container elements, but I forget
which one it was. Maybe Safari 2 or 3. In the interest of backward
compatibility, the "evt.target || evt.srcElement" part may need a
wrapper to avoid this case.

var t = evt.target || evt.srcElement;
if (t && t.nodeName != "#text")
{
// ...
}

should suffice (with more feature tests on `target' and `srcElement'
before access).

Yes, but which browser was it?

I do not know; Google is your friend. Does it even matter? The W3C DOM
Level 2+ Event Specifications do not forbid this behavior, so regardless of
the browser (better: the DOM implementation) it should be considered.


PointedEars

 

[Lasse Reichstein Nielsen]

I would not be so sure. `evt' can refer to a host object after all.

How would that make any difference as to whether there is harm in assigning
to evt an extra time?

Is it?

Unless the implementation is broken, yes.

/L

 

[Scott Sauyet]

There's no harm in it.

[ ... ]

Both forms are widely used and instantly recognizable to JS developers.

Irrelevant statement.

In what context is that irrelevant? All you did was to offer an
alternative syntax and say "Do not assign when there is no need." I
think Stefan did an admirable job finding and disputing two plausible
rationales for your bald injunction. You claim them both irrelevant.
So what then is your reason?

Is it?

If you have an statement to make, please simply make it. Snide
comments are not helpful. Do you have a reason to suggest that it
might not be safe?

Are you suggesting that the cost of type-converting the value of `evt' to
boolean and assigning its value to itself is less that or equal to the cost
of type-converting its value to boolean and inverting that?

His argument follows immediately:

Irrelevant conclusion.

Again: irrelevant to what line of discussion?

-- Scott

 

[Kevin]

I didn't understand the technical discussion that took place.

All that I care about is removing the "Function is undefined" error.
Thanks to you, Stefan and Thomas, for your generosity in replying to
my problem. However, I'm a bit lost after your discussion about the
technical merits of different approaches.

Can you please suggest to me a way to fix this "Function is undefined"
error? I'm boiling about not fixing it.

Thank you.

 

[Scott Sauyet]

Can you please suggest to me a way to fix this "Function is undefined"
error? I'm boiling about not fixing it.

You need to follow the advice Stefan gave you initially. Either give
us more context, or better, post a live example that we can
investigate, ideally as minimal an example as you can get but which
still shows the error.

-- Scott

 

[Kevin]

Understood, Scott. After reading forum topics on "function not defined
in javascript," it seems that my selectTab(x) function might not work
since it's trying to access elements (project_summary,
proposal_information, and cs_criteria) that don't yet exist. They
don't exist since the table isn't drawn until the function
showReport() is called. Please give me your thoughts. Ty

Here's my entire HTML file:

<html>
<head>
<script type="text/javascript">
function selectTab(x)
{

if( document.getElementById("project_summary") == "null") { alert
("null!"); return; }
else if( document.getElementById("proposal_information") == "null")
{ alert ("null!"); return; }
else if( document.getElementById("cs_criteria") == "null") { alert
("null!"); return; }
else
{
if(x == "ps")
{
document.getElementById("project_summary").style.visibility =
"visible";
document.getElementById("proposal_information").style.visibility =
"hidden";
document.getElementById("cs_criteria").style.visibility =
"hidden";

document.getElementById("project_summary").style.display = "";
document.getElementById("proposal_information").style.display =
"none";
document.getElementById("cs_criteria").style.display = "none";
return;
}

else if(x == "pi")
{
document.getElementById("project_summary").style.visibility =
"hidden";
document.getElementById("proposal_information").style.visibility =
"visible";
document.getElementById("cs_criteria").style.visibility =
"hidden";

document.getElementById("project_summary").style.display =
"none";
document.getElementById("proposal_information").style.display =
"";
document.getElementById("cs_criteria").style.display = "none";
return;
}

else if(x == "csc")
{
document.getElementById("project_summary").style.visibility =
"hidden";
document.getElementById("proposal_information").style.visibility =
"hidden";
document.getElementById("cs_criteria").style.visibility =
"visible";

document.getElementById("project_summary").style.display =
"none";
document.getElementById("proposal_information").style.display =
"none";
document.getElementById("cs_criteria").style.display = "";
return;
}

else
{
alert ("error");
return;
}
}
}
</script>
<script type="text/javascript">

function showReport(xml_file)
{

if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

var file_input= "file:///H:/" + xml_file;

// end Configuration

xhttp.open("GET","file:///H:/project.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;

document.write("<table name=\"mytable\" border='1'>");

// make 3 buttons that control what view is used.

document.write("<tr><td> <button type=\"button\" id=\"ps\">Project
Summary</td>");
document.write("<td> <button type=\"button\" id=\"pi\">Proposal
Information</td>");
document.write("<td> <button type=\"button\" id=\"csc\">Cyber Security
Criteria</td></tr>");

document.write("<table>");

/* Just a series of document.write() and document.getElementByID()
statements to draw a table. I've tested it separately from this HTML
and it works. */

document.write("</table>");

var x = document.getElementById("ps");
var y = document.getElementById("pi");
var z = document.getElementById("csc");

x.setAttribute('onClick','selectTab(\'ps\')');
y.setAttribute('onClick','selectTab(\'pi\')');
z.setAttribute('onClick','selectTab(\'csc\')');

document.getElementById("project_summary").style.visibility =
"visible";
document.getElementById("proposal_information").style.visibility =
"hidden";
document.getElementById("cs_criteria").style.visibility = "hidden";

document.getElementById("project_summary").style.display = "";
document.getElementById("proposal_information").style.display =
"none";
document.getElementById("cs_criteria").style.display = "none";

} // end function showReport

</script>
</head>
<body>
<LI>
<ul class="mktree" id="tree1">
<ul>
<li name="project1.xml" onClick="showReport(this.name)">Project 1</
li>
<li name="project2.xml">Project 2</li>
</ul>
</ul>
</LI>
</body>
</html>

 

[Thomas 'PointedEars' Lahn]

Can you please suggest to me a way to fix this "Function is undefined"
error?

1. Get a minimum clue.
2. Read the postings again.
3. Make your markup Valid.
4. Follow the other recommendations.


PointedEars

 

[Tim Streater]

Understood, Scott. After reading forum topics on "function not defined
in javascript," it seems that my selectTab(x) function might not work
since it's trying to access elements (project_summary,
proposal_information, and cs_criteria) that don't yet exist. They
don't exist since the table isn't drawn until the function
showReport() is called. Please give me your thoughts. Ty

Here's my entire HTML file:

<html>
<head>
<script type="text/javascript">
function selectTab(x)
{

if( document.getElementById("project_summary") == "null") { alert
("null!"); return; }
else if( document.getElementById("proposal_information") == "null")
{ alert ("null!"); return; }
else if( document.getElementById("cs_criteria") == "null") { alert
("null!"); return; }
else
{
if(x == "ps")
{
document.getElementById("project_summary").style.visibility =
"visible";

You're looking here for element "project_summary". Where is that element
defined? If its as a result of the xmlDoc stuff could you replace that,
for testing purposes with something that explicitly creates those
elements?

[snip]

else
{
alert ("error");
return;
}
}
}
</script>

Why not just have one Javascript section?

<script type="text/javascript">

function showReport(xml_file)
{

if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

var file_input= "file:///H:/" + xml_file;

// end Configuration

xhttp.open("GET","file:///H:/project.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;

document.write("<table name=\"mytable\" border='1'>");

// make 3 buttons that control what view is used.

document.write("<tr><td> <button type=\"button\" id=\"ps\">Project
Summary</td>");
document.write("<td> <button type=\"button\" id=\"pi\">Proposal
Information</td>");
document.write("<td> <button type=\"button\" id=\"csc\">Cyber Security
Criteria</td></tr>");

document.write("<table>");

You haven't terminated the previous <table>. Did you mean to put:

document.write("</table><table>");


My advice would be:

1) take the overall suggestions of the others
2) make a simpler example that still fails and keep reducing until what
is left starts to work. E.g. eliminate the data file and the xhttp stuff
as a starter.

 

[Tim Streater]

The real problem is that your document.write()s detroy the original
document, along with the selectTab function. You can only use
document.write while the document is still being created.

Interesting. Safari 4.0.5 under OS X 10.6 seems to keep the JavaScript
code, at least (the <li> list of projects vanishes, of course). I
modified Kevin's posted code as follows (very minimally, just so that
"project_summary" etc are defined), and it appears to work. That is, you
click on a button and the corresponding <td> is made visible:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<script type="text/javascript">
function selectTab(x)
{

if( document.getElementById("project_summary") == "null") { alert
("null!"); return; }
else if( document.getElementById("proposal_information") == "null") {
alert ("null!"); return; }
else if( document.getElementById("cs_criteria") == "null") { alert
("null!"); return; }
else
{
if(x == "ps")
{
document.getElementById("project_summary").style.visibility =
"visible";
document.getElementById("proposal_information").style.visibility =
"hidden";
document.getElementById("cs_criteria").style.visibility = "hidden";

document.getElementById("project_summary").style.display = "";
document.getElementById("proposal_information").style.display =
"none";
document.getElementById("cs_criteria").style.display = "none";
return;
}

else if(x == "pi")
{
document.getElementById("project_summary").style.visibility =
"hidden";
document.getElementById("proposal_information").style.visibility =
"visible";
document.getElementById("cs_criteria").style.visibility = "hidden";

document.getElementById("project_summary").style.display = "none";
document.getElementById("proposal_information").style.display = "";
document.getElementById("cs_criteria").style.display = "none";
return;
}

else if(x == "csc")
{
document.getElementById("project_summary").style.visibility =
"hidden";
document.getElementById("proposal_information").style.visibility =
"hidden";
document.getElementById("cs_criteria").style.visibility =
"visible";

document.getElementById("project_summary").style.display = "none";
document.getElementById("proposal_information").style.display =
"none";
document.getElementById("cs_criteria").style.display = "";
return;
}

else
{
alert ("error");
return;
}
}
}


function showReport(xml_file)
{

document.write("<table name=\"mytable\" border='1'>");

// make 3 buttons that control what view is used.

document.write("<tr><td> <button type=\"button\" id=\"ps\">Project
Summary</td>");
document.write("<td> <button type=\"button\" id=\"pi\">Proposal
Information</td>");
document.write("<td> <button type=\"button\" id=\"csc\">Cyber Security
Criteria</td></tr>");

document.write("</table><table><tr>");

document.write ("<td id='project_summary'>ProjSum element</td><td
id='proposal_information'>Proposal element</td><td id='cs_criteria'>CS
Criteria element</td>");

document.write("</tr></table>");

var x = document.getElementById("ps");
var y = document.getElementById("pi");
var z = document.getElementById("csc");

x.setAttribute('onClick','selectTab(\'ps\')');
y.setAttribute('onClick','selectTab(\'pi\')');
z.setAttribute('onClick','selectTab(\'csc\')');

document.getElementById("project_summary").style.visibility = "visible";
document.getElementById("proposal_information").style.visibility =
"hidden";
document.getElementById("cs_criteria").style.visibility = "hidden";

document.getElementById("project_summary").style.display = "";
document.getElementById("proposal_information").style.display = "none";
document.getElementById("cs_criteria").style.display = "none";

} // end function showReport

</script>
</head>
<body>
<ul class="mktree" id="tree1">
<LI>
<ul>
<li name="project1.xml" onClick="showReport(this.name)">Project
1</li>
<li name="project2.xml">Project 2</li>
</ul>
</ul>
</LI>
</body>
</html>

 

[VK]

I didn't understand the technical discussion that took place.

That's often for c.l.j. to end up an OP about JavaScript to the art of
making Caesar salad and vice versa In comparison with really
professional programming-related NGs it can be choking but nothing one
can do soon enough. Consider it as a spice adding stuff

All that I care about is removing the "Function is undefined" error.
Thanks to you, Stefan and Thomas, for your generosity in replying to
my problem. However, I'm a bit lost after your discussion about the
technical merits of different approaches.

Can you please suggest to me a way to fix this "Function is undefined"
error? I'm boiling about not fixing it.

There is nothing wrong with the selectTab function code as posted.
Some syntax error lies somewhere before or after this function. The
trick is that the parser drops the parsing on the first syntax error
met and your <script>...</script> code do not come into existence.

But the intrinsic event handlers (those of the type <button
onclick="somecode"> on the page) use the lazy parsing, so they are
being parsed and placed into memory stack on the first call, not on
the initial page load.

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script>

function foo() {}

function selectTab(x) { // not closed

// this code is obviously wrong so cannot be parsed
// so neither foo nor selectTab not the whole
// <script> block will exist
</script>
</head>

<body bgcolor="#FFFFFF">
<p onclick="selectTab()">test</p>
<!-- Yet onclick will be first parsed
on the first click only and be OK,
it will try to find selectTab function,
obviously fail on it and give you the relevant error
-->
</body>
</html>

So this is a syntax error and it can be anywhere in your <script>
block.

 

[Kevin]

Thank you for all of your replies.

At a high-level, here's what I'm trying to do in HTML and javascript.

Build a webpage that has two frames. The left-hand frame has a list of
projects (Project 1, Project 2, ..., Project n). Clicking a single
project populates the right-hand frame with a table. At the top of the
right-hand table, there are 3 buttons that control which view can be
seen. These views are merely different tables.

My code tries to do the following: when a user clicks a single project
from the list, draw a new table. The problem here is that I'm trying
to draw over an existing table.

It looks like I have two possible solutions.
1. when a user clicks a single project, first delete all tables on the
right-hand side, then re-draw the table.
2. when a user clicks a single project, draw it if no table exists;
otherwise, just modify the table by changing the elements' values.

What's a better approach? Please tell me #3. It seems like I should
pick the right design before I continue to develop.

Thanks.

 

[Scott Sauyet]

Thank you for all of your replies.

At a high-level, here's what I'm trying to do in HTML and javascript.

Build a webpage that has two frames. The left-hand frame has a list of
projects (Project 1, Project 2, ..., Project n). Clicking a single
project populates the right-hand frame with a table. At the top of the
right-hand table, there are 3 buttons that control which view can be
seen. These views are merely different tables.

Okay. First, are the frames a hard requirement? There are various
difficulties involved in scripting with frames. None or them are
insurmountable, but if it's just the look or the independent scrolling
that frames offer, much can be done with the CSS rules "position:
fixed" and "overflow: auto" depending upon what browsers are used by
your target audience. You might find that you don't need separate
frames to get the user interface you want. And frames have various
other issues that might be worth avoiding.

My code tries to do the following: when a user clicks a single project
from the list, draw a new table. The problem here is that I'm trying
to draw over an existing table.

It looks like I have two possible solutions.
1. when a user clicks a single project, first delete all tables on the
right-hand side, then re-draw the table.
2. when a user clicks a single project, draw it if no table exists;
otherwise, just modify the table by changing the elements' values.

What's a better approach? Please tell me #3. It seems like I should
pick the right design before I continue to develop.

I would probably choose option 1 over option 2. But I guess this
highlights a question about the tables: are they really holding
tabular data? If they can have differing numbers of rows or columns
depending upon the project, then option 2 is really pretty useless.
If they have exactly the same structure.

Depending upon the difficulty involved in creating your views, you
might find it easier to hide/show them rather than delete/rebuild.
You can do this upon request for a project, or if it's fast enough in
your target environments, you might be able to do them all at start-
up. So that might be an option 3.

-- Scott

 

[Kevin]

Okay.  First, are the frames a hard requirement?  There are various
difficulties involved in scripting with frames.  None or them are
insurmountable, but if it's just the look or the independent scrolling
that frames offer, much can be done with the CSS rules "position:
fixed" and "overflow: auto" depending upon what browsers are used by
your target audience.  You might find that you don't need separate
frames to get the user interface you want.  And frames have various
other issues that might be worth avoiding.




I would probably choose option 1 over option 2.  But I guess this
highlights a question about the tables: are they really holding
tabular data?  If they can have differing numbers of rows or columns
depending upon the project, then option 2 is really pretty useless.
If they have exactly the same structure.

Depending upon the difficulty involved in creating your views, you
might find it easier to hide/show them rather than delete/rebuild.
You can do this upon request for a project, or if it's fast enough in
your target environments, you might be able to do them all at start-
up.  So that might be an option 3.

  -- Scott

That's solid advice, Scott. I don't know how to delete tables, so I'm
considering another desing.

Another design I have in mind is this -

Let's say I have 10 projects. Couldn't I create a list with 10 items,
then create 10 separate HTMLs that draw the table and its 3 views, as
well as creates buttons that switch views?

If I could somehow dynamically change the "frame src = ..." to the
selected project (out of 10 total projects), then I would solve my
problem.

For example,

<frameset="25%,75%>
<frame src = HTML that holds 10 list items>
<frame src = dynamically pick frame 2 based on frame 1 input>
</frameset>

What's a clever way to do that?

 

[Scott Sauyet]

I would probably choose option 1 over option 2.  But I guess this
highlights a question about the tables: are they really holding
tabular data?  If they can have differing numbers of rows or columns
depending upon the project, then option 2 is really pretty useless.
If they have exactly the same structure.

and should have continued ...

If they have exactly the same structure, then I would give the
relevant TD's or other markup structures individual IDs and then just
update them using document.getElementById("whatever"), which I guess
is something similar to your option 2.

-- Scott

 

[Scott Sauyet]

Another design I have in mind is this -

Let's say I have 10 projects. Couldn't I create a list with 10 items,
then create 10 separate HTMLs that draw the table and its 3 views, as
well as creates buttons that switch views?

Or better yet, if you have some sort of dynamic server, build the
tables dynamically based upon whatever data you need.

If I could somehow dynamically change the "frame src = ..." to the
selected project (out of 10 total projects), then I would solve my
problem. [ ... ]

What's a clever way to do that?

You don't need to be clever to do that. Just search the web for
Javascript and frames. There will be plenty of examples of setting
the frame src.

-- Scott