By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,286 Members | 2,364 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,286 IT Pros & Developers. It's quick & easy.

Multiple Functions in onLoad in Mozilla

P: n/a
Hi,

I have a script which isn't working in Mozilla based browser for some
reason. I'm trying to run two functions from the body onload tag and
it simply isn't happening.

I have a cascading menu, where the primary dropdown selection
determines the contents of a second dropdown. This is triggered by a
function in the onchange tag of the primarys select tag. When
triggered like this, the function and drop downs work fine. When
returning to the page I query a database to maintain state of the
primary dropdown and use the onload to trigger the function used in
the onchange to repopulate the second dropdown. As I say this works
fine in IE etc but not Mozilla based browsers.

Here's the code snippets. Anyone got any ideas?

In the header:
<script type="text/javascript">
function doOnload() {
selectInterests(form1)
preloadImages()
}
</script>
<script language="JavaScript">
function selectInterests(frm)
{
// Obtain the first dimension position of the currently selected
var i = frm.adv_category.selectedIndex;
var n = frm.adv_interests.selectedIndex;
if (i > 0){
// Inititalise the new adv_interests selection
frm.adv_interests.options.length = arrValInterests[i].length
- 1;
// Now select the the items associated with the selected
option
for (var j=1; j < arrValInterests[i].length; j++){
frm.adv_interests.options[j-1].text =
arrTextInterests[i][j];
frm.adv_interests.options[j-1].value =
arrValInterests[i][j];
}
frm.adv_interests.options[0].selected = true;
}
else{
// User has reselected the blank 'adv_interests' option
frm.adv_interests.options.length = 1;
frm.adv_interests.options[0].text ="--Please Select--
";
frm.adv_interests.options[0].value = "";
}
}
</script>

</head>
<body bgcolor="#FFFFFF" onLoad="doOnload();" leftmargin="0"
topmargin="0" marginwidth="0" marginheight="0">
<table border="0" width="100%" cellspacing="0" cellpadding="0">

In the body:

<SELECT NAME="adv_category"
ID="adv_category"onChange="selectInterests(form1); ">
<option value="0">--Please Select--</option>
<option value="3">Banknotes</option>
<option value="5" selected>Books</option>
<option value="1">Coins</option>
<option value="4">Medals</option>
<option value="6">Numismatic Circular</option>
</SELECT>

<SELECT multiple size="10" NAME="adv_interests" ID="adv_interests"
style="width:350px;">
<option value="">--Please Select--</option>
</SELECT>
<script language="JavaScript">
var arrValInterests = new Array();
var arrTextInterests = new Array();
arrValInterests[0] = new Array("0","0");
arrTextInterests[0] = new Array("0","--All Categories--");
arrValInterests[1] = new
Array("3","0","752","...removed...","724","653","6 54");
arrTextInterests[1] = new Array("3","--All
Categories--","Abyssinia","Afghanistan","...removed...","USA", "Venezuela","Vietnam","West
Indies","Yemen","Yugoslavia","Zanzibar");
arrValInterests[2] = new Array("5","0","661","...removed...","662");
arrTextInterests[2] = new Array("5","--All Categories--","British
Coins-All","...removed...","Sylloge of Coins of the British Isles");
arrValInterests[3] = new Array("1","...removed...","36");
arrTextInterests[3] = new Array("1","--All
Categories--","...removed...","Treasure","US Coins");
arrValInterests[4] = new Array("4","0","121","...removed...","384");
arrTextInterests[4] = new Array("4","--All Categories--","British
orders","...removed...","Single Campaign Medals");
arrValInterests[5] = new Array("6","0");
arrTextInterests[5] = new Array("6","--All Categories--");
</script>
<script language="JavaScript">
function selectInterests(frm)
{
// Obtain the first dimension position of the currently selected
var i = frm.adv_category.selectedIndex;
var n = frm.adv_interests.selectedIndex;
if (i > 0){
// Inititalise the new adv_interests selection
frm.adv_interests.options.length = arrValInterests[i].length - 1;
// Now select the the items associated with the selected option
for (var j=1; j < arrValInterests[i].length; j++){
frm.adv_interests.options[j-1].text = arrTextInterests[i][j];
frm.adv_interests.options[j-1].value = arrValInterests[i][j];
}
frm.adv_interests.options[0].selected = true;
}
else
{
// User has reselected the blank 'adv_interests' option
frm.adv_interests.options.length = 1;
frm.adv_interests.options[0].text ="--Please Select-- ";
frm.adv_interests.options[0].value = "";
}
} </script>
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Disco-181 wrote:
Hi,

I have a script which isn't working in Mozilla based browser for some
reason. I'm trying to run two functions from the body onload tag and
it simply isn't happening.
In the header:
<script type="text/javascript">
function doOnload() {
selectInterests(form1)
preloadImages()
}
</script>


form1 looks like an incomplete reference to me.

Mick
Jul 23 '05 #2

P: n/a
Disco-181 wrote:
<snip>
... . As I say this works
fine in IE etc but not Mozilla based browsers.

Here's the code snippets. Anyone got any ideas?

In the header:
<script type="text/javascript">
function doOnload() {
selectInterests(form1)
preloadImages()
} <snip>

IE makes named forms into named properties of the global/window object
so that their names can be used as identifiers in code to refer to the
corresponding element. As a result the identifier - form1 - would refer
to a form with the name, or ID, "form1". Mozilla browsers do no such
thing and the identifier - form1 - will resolve as an undefined property
of the global object. So Mozilla will error in the opening lines of
the - selectInterests - function. (as the javascript console would have
revealed).

Cross-browser code would use the - document.forms - collection to
acquire a reference to the form element so it could be passed to the
function call:-

function doOnload() {
var frm;
if(
(document.forms) &&
(frm = document.forms['form1'])
){
selectInterests(frm);
}
preloadImages();
}
<SELECT NAME="adv_category"
ID="adv_category" onChange="selectInterests(form1);">


Both Mozilla and IE provide a custom scope chain for the internally
generated function created from event handling attribute string values.
These custom scope chains are non-standard and not universally
implemented in browsers, and IE and Mozilla generate different chains,
but both will place the document on the scope chain of an event handling
function generated for a controls. As a result the unqualified
identifier - form1 - will be resolved as a property of the document that
refers to the containing form. However, the W3C HTML DOM specification
(and all older scriptable browsers) offers a - form - property of form
controls that refers to their containing form. As a result a standard
(and more widely supported/reliable) method of passing a reference to
the containing form from an event handling function on a contained form
control is to use - this.form -:-

onChange="selectInterests( this.form );"

Richard.
Jul 23 '05 #3

P: n/a
Thanks Richard. Thats working fine now.
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.