PDA

View Full Version : body onload interfearing



chechu
11-24-2009, 03:57 PM
1) Script Title: chained select menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/chainedmenu/

3) Describe problem: The chained menu and the tabber.js (see attached) seem not to work together, caused by the body onload function. How can that be avoided, please ?

onload function:


<body onload="initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, 'savestate')">

jscheuer1
11-24-2009, 04:13 PM
Get rid of highlighted:


<body onload="initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, 'savestate')">

Make a script as the last thing in your head section:


<script type="text/javascript">
(function(){
function loader(){
initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, 'savestate');
}
if (window.addEventListener)
window.addEventListener('load', loader, false);
else if (window.attachEvent)
window.attachEvent('onload', loader);
})();
</script>

chechu
11-24-2009, 04:37 PM
Works amazingly well ! Thanks !

I still have one issue with the script: I can't seem to open the links in the same page, allthough I placed everything into 0


//var hide_empty_list=true; //uncomment this line to hide empty selection lists
var disable_empty_list=true; //uncomment this line to disable empty selection lists

var onclickaction="goto" //set to "alert" or "goto". Former is for debugging purposes, to tell you the value of the final selected list that will be used as the destination URL. Set to "goto" when below configuration is all set up as desired.

var newwindow=0 //Open links in new window or not? 1=yes, 0=no.

/////DEFINE YOUR MENU LISTS and ITEMS below/////////////////

addListGroup("chainedmenu", "First-Select");


addOption("First-Select", "zoek een kunstenaar", "", 0);
addList("First-Select", "alfabetisch", "", "alfa");
addList("First-Select", "volgens regio", "", "regio");

addOption("alfa", "maak je keuze", "", 0);
addList("alfa", "C", "", "C");
addList("alfa", "S", "", "S");

addOption("C", "maak je keuze", "", 0);
addOption("C", "Ceci Casariego", "casariego.php");

addOption("S", "maak je keuze", "", 0);
addOption("S", "Luc Standaert", "standaert.php");

addOption("regio", "maak je keuze", "", 0);
addList("regio", "Antwerpen", "", "Apen");
addList("regio", "West-Vlaanderen", "", "X");
addList("regio", "Oost-Vlaanderen", "", "Oost");
addList("regio", "Limburg", "", "X");
addList("regio", "Vlaams-Brabant", "", "X");

addOption("Apen", "maak je keuze", "", 0);
addOption("Apen", "Ceci Casariego", "casariego.php");

addOption("Oost", "maak je keuze", "", 0);
addOption("Oost", "Luc Standaert", "standaert.php");

jscheuer1
11-24-2009, 04:55 PM
Might be a bug in the script, but more likely something about your page. Let's check your page first:

Please post a link to the page on your site that contains the problematic code so we can check it out.

chechu
11-24-2009, 04:58 PM
http://www.portretkunst.be
(please note that now I have placed all back into 1 instead of 0)

You will see that I cannot place the code on the "kalender" page, because also there is an interfearance with the body onload.

jscheuer1
11-24-2009, 05:20 PM
I made a local copy of the page, put in place of:


<script language="javascript" src="images/css/config.js"></script>

this:


<script language="javascript">
//var hide_empty_list=true; //uncomment this line to hide empty selection lists
var disable_empty_list=true; //uncomment this line to disable empty selection lists

var onclickaction="goto" //set to "alert" or "goto". Former is for debugging purposes, to tell you the value of the final selected list that will be used as the destination URL. Set to "goto" when below configuration is all set up as desired.

var newwindow=0 //Open links in new window or not? 1=yes, 0=no.

/////DEFINE YOUR MENU LISTS and ITEMS below/////////////////

addListGroup("chainedmenu", "First-Select");


addOption("First-Select", "zoek een kunstenaar", "", 1);
addList("First-Select", "alfabetisch", "", "alfa");
addList("First-Select", "volgens regio", "", "regio");

addOption("alfa", "maak je keuze", "", 1);
addList("alfa", "C", "", "C");
addList("alfa", "S", "", "S");

addOption("C", "maak je keuze", "", 1);
addOption("C", "Ceci Casariego", "http://www.portretkunst.be/casariego.php");

addOption("S", "maak je keuze", "", 1);
addOption("S", "Luc Standaert", "http://www.portretkunst.be/standaert.php");

addOption("regio", "maak je keuze", "", 1);
addList("regio", "Antwerpen", "", "Apen");
addList("regio", "Oost-Vlaanderen", "", "Oost");

addOption("Apen", "maak je keuze", "", 1);
addOption("Apen", "Ceci Casariego", "http://www.portretkunst.be/casariego.php");

addOption("Oost", "maak je keuze", "", 1);
addOption("Oost", "Luc Standaert", "http://www.portretkunst.be/standaert.php");




</script>

And it worked. So you should be able to just make that one change in the config.js file. If it doesn't work right away, be sure to clear the browser's cache and refresh the page.

chechu
11-24-2009, 05:29 PM
I copied your piece of code, but doesn't work ?
I replaced this line in the head

<script language="javascript" src="images/css/config.js"></script>
for your code above. Correct ?

I am using now this url as example to play with: http://www.portretkunst.be/aa.php

jscheuer1
11-24-2009, 08:17 PM
Where you have:


<input type="submit" value="&#187 bekijk je keuze" style="margin-top:5px; text-align:left; border:0px;" onclick="goListGroup(document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel)">

It needs yo be:


<input type="button" value="&#187 bekijk je keuze" style="margin-top:5px; text-align:left; border:0px;" onclick="goListGroup(document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel)">

There may still be other problems.

chechu
11-24-2009, 08:32 PM
Works perfectly now.
Will change it in the whole site. Thanks !

Only issue now is how to mix it with the calendar here: http://www.portretkunst.be/kalender.php

There is an onload function that stops the chained menu from functioning:

<body onload="changedate('return')">

Here is the page, with your adapted code added:http://www.portretkunst.be/aa.php

jscheuer1
11-24-2009, 09:53 PM
Seems OK here, perhaps you need to refresh the page.

chechu
11-24-2009, 10:02 PM
At this page, I do not see the chained menu's options, and have the left error triangle:
http://www.portretkunst.be/aa.php
Strange that you do !

jscheuer1
11-24-2009, 10:24 PM
OK, it's an IE thing - I'll look into it. Works fine in Firefox and Opera, probably others. IE's error reporting is poor though, that might not be the actual line, I have an idea how to trace it down fairly quickly, but it may take awhile if I'm not lucky. I'll let you know when I know.

jscheuer1
11-25-2009, 04:01 AM
As far as I can see, the kalender.php page, as well as your aa.php demo page are the only two pages that have a division with the id 'content' on them. This word is used by the chained selects as a variable name. In IE variable names and id's can sometimes get confused, So 'content' shouldn't be used as an id (or name for that matter) for any tag on any pages using the chained selects script.

Now it is in theory possible to modify the chained select script so that this is not an issue. But it would be easier to just not use that id (or name). Easy as changing:


<div id="wrap">

<div id="container">

<div id="content">
<a href="http://bruno.portretkunst.be" target="_blank" class="web">web</a>
</div>

<div id="menuPan">


to:


<div id="wrap">

<div id="container">

<div id="contents">
<a href="http://bruno.portretkunst.be" target="_blank" class="web">web</a>
</div>

<div id="menuPan">


And, since as far as I can tell, there are no styles or script actions attached to that division, that's what I'd recommend. It works here locally.

Be sure to clear the browser's cache after the update before evaluating the result.

I think I found the spot in the chainedmenu.js file where this becomes a problem. So, instead of changing the id, you may find in that file and add the highlighted:


function initListGroup(n) {
var _content=cs_findContent(n), count=0;
if (_content!=null) {
var content=new cs_contentOBJ("cs_"+n,_content.menu);
cs_content[cs_content.length]=content;

for (var i=1; i<initListGroup.arguments.length; i++) {
if (typeof(arguments[i])=="object" && arguments[i].tagName && arguments[i].tagName=="SELECT") {
content.lists[count]=arguments[i];

arguments[i].onchange=cs_updateList;
arguments[i].content=content; arguments[i].idx=count++;
}
else if (typeof(arguments[i])=="string" && /^[a-zA-Z_]\w*$/.test(arguments[i])) {
content.cookie=arguments[i];
}
}

if (content.lists.length>0) {
cs_initListGroup(content,content.cookie);
}
}
}

This is actually a better solution.

chechu
11-25-2009, 11:32 AM
Thank you so much, all works now.
I just deleted that one <div>:

<div id="content">
<a href="http://bruno.portretkunst.be" target="_blank" class="web">web</a>
</div>

chechu
01-03-2010, 03:01 PM
Strangly enough I have an error online, but not offline.
This is what I have:

JS file:

//var hide_empty_list=true; //uncomment this line to hide empty selection lists
var disable_empty_list=true; //uncomment this line to disable empty selection lists

var onclickaction="goto" //set to "alert" or "goto". Former is for debugging purposes, to tell you the value of the final selected list that will be used as the destination URL. Set to "goto" when below configuration is all set up as desired.

var newwindow=0 //Open links in new window or not? 1=yes, 0=no.

/////DEFINE YOUR MENU LISTS and ITEMS below/////////////////

addListGroup("chainedmenu", "First-Select");


addOption("First-Select", "zoek een portretkunstenaar", "", 1);
addList("First-Select", "alfabetisch (familienaam)", "", "alfa");
addList("First-Select", "volgens provincie", "", "regio");

addOption("alfa", "maak je keuze", "", 1);
addList("alfa", "A tot en met K", "", "AK");
addList("alfa", "L tot en met Z", "", "LZ");

addOption("AK", "maak je keuze", "", 1);
addOption("AK", "Ceci Casariego (Antwerpen)", "http://www.portretkunst.be/casariego.php");
addOption("AK", "Marleen Dickel (Gent)", "http://www.portretkunst.be/dickel.php");
addOption("AK", "Olga Gouskova (Brugge)", "http://www.portretkunst.be/gouskova.php");

addOption("LZ", "maak je keuze", "", 1);
addOption("LZ", "Luc Standaert (Zottegem)", "http://www.portretkunst.be/standaert.php");
addOption("LZ", "An Verniers (Antwerpen)", "http://www.portretkunst.be/verniers.php");

addOption("regio", "maak je keuze", "", 1);
addList("regio", "Antwerpen", "", "Apen");
addList("regio", "Oost-Vlaanderen", "", "Oost");
addList("regio", "West-Vlaanderen", "", "West");

addOption("Apen", "maak je keuze", "", 1);
addOption("Apen", "Ceci Casariego (Antwerpen)", "http://www.portretkunst.be/casariego.php");
addOption("Apen", "An Verniers (Antwerpen)", "http://www.portretkunst.be/verniers.php");

addOption("Oost", "maak je keuze", "", 1);
addOption("Oost", "Marleen Dickel (Gent)", "http://www.portretkunst.be/dickel.php");
addOption("Oost", "Luc Standaert (Zottegem)", "http://www.portretkunst.be/standaert.php");

addOption("West", "maak je keuze", "", 1);
addOption("West", "Olga Gouskova (Brugge)", "http://www.portretkunst.be/gouskova.php");


The page where the menu is shown, in the head:

<script type="text/javascript">
(function(){
function loader(){
initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, 'savestate');
}
if (window.addEventListener)
window.addEventListener('load', loader, false);
else if (window.attachEvent)
window.attachEvent('onload', loader);
})();
</script>

And the form:

<form name="listmenu0" class="form">
<select name="firstlevel"></select>
<select name="secondlevel"></select>
<select name="thirdlevel"></select>
<input type="button" value="&#187 bekijk je keuze" onclick="goListGroup(document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel)">
</form>


Error is that all the options of the selection of alphabetical order (alfa) already show up before selecting it. Normally the next option should not be visible before having selected one, but now all of them are shown when loading the page.

Am I making myself clear here ? Any suggestions ?

jscheuer1
01-03-2010, 03:15 PM
This:



value="&#187 bekijk je keuze"

should be:



value="&#187; bekijk je keuze"

You can try that change, but it probably is not the problem.

Now, the page will take longer to load online. That will delay the onload action. But if it's not happening at all, either the page isn't fully loading for some reason or there is an error. To tell which is which it would be easiest if we had a link to the page:

Please post a link to the page on your site that contains the problematic code so we can check it out.

chechu
01-03-2010, 03:16 PM
You can find the menu here: http://www.portretkunst.be

jscheuer1
01-03-2010, 04:19 PM
There's no error that my browsers can detect. The first time I go to the page, only the first select is populated, the other two are disabled and empty, but visible. Once I select something, if I refresh the page or navigate to the page again, it stays selected. This is at least party persistence due to cookie, perhaps also partly due to the default persistence of form data. Now as for the empty selects being visible, you have in the config.js script:


//var hide_empty_list=true; //uncomment this line to hide empty selection lists
var disable_empty_list=true; //uncomment this line to disable empty selection lists


You would need to make that:


var hide_empty_list=true; //uncomment this line to hide empty selection lists
var disable_empty_list=true; //uncomment this line to disable empty selection lists

chechu
01-03-2010, 04:28 PM
I changed the //, but still no change.
The difference in appearence all staretd when I changed:


addOption("First-Select", "zoek een portretkunstenaar", "", 1);
addList("First-Select", "alfabetisch (familienaam)", "", "alfa");
addList("First-Select", "volgens provincie", "", "regio");

addOption("alfa", "maak je keuze", "", 1);

addOption("alfa", "Ceci Casariego (Antwerpen)", "http://www.portretkunst.be/casariego.php");
addOption("alfa", "Marleen Dickel (Gent)", "http://www.portretkunst.be/dickel.php");
addOption("alfa", "Olga Gouskova (Brugge)", "http://www.portretkunst.be/gouskova.php");

addOption("alfa", "Luc Standaert (Zottegem)", "http://www.portretkunst.be/standaert.php");
addOption("alfa", "An Verniers (Antwerpen)", "http://www.portretkunst.be/verniers.php");

addOption("regio", "maak je keuze", "", 1);
addList("regio", "Antwerpen", "", "Apen");
addList("regio", "Oost-Vlaanderen", "", "Oost");
addList("regio", "West-Vlaanderen", "", "West");

addOption("Apen", "maak je keuze", "", 1);
addOption("Apen", "Ceci Casariego (Antwerpen)", "http://www.portretkunst.be/casariego.php");
addOption("Apen", "An Verniers (Antwerpen)", "http://www.portretkunst.be/verniers.php");

addOption("Oost", "maak je keuze", "", 1);
addOption("Oost", "Marleen Dickel (Gent)", "http://www.portretkunst.be/dickel.php");
addOption("Oost", "Luc Standaert (Zottegem)", "http://www.portretkunst.be/standaert.php");

addOption("West", "maak je keuze", "", 1);
addOption("West", "Olga Gouskova (Brugge)", "http://www.portretkunst.be/gouskova.php");



into:


addOption("First-Select", "zoek een portretkunstenaar", "", 1);
addList("First-Select", "alfabetisch (familienaam)", "", "alfa");
addList("First-Select", "volgens provincie", "", "regio");

addOption("alfa", "maak je keuze", "", 1);
addList("alfa", "A tot en met K", "", "AK");
addList("alfa", "L tot en met Z", "", "LZ");

addOption("AK", "maak je keuze", "", 1);
addOption("AK", "Ceci Casariego (Antwerpen)", "http://www.portretkunst.be/casariego.php");
addOption("AK", "Marleen Dickel (Gent)", "http://www.portretkunst.be/dickel.php");
addOption("AK", "Olga Gouskova (Brugge)", "http://www.portretkunst.be/gouskova.php");

addOption("LZ", "maak je keuze", "", 1);
addOption("LZ", "Luc Standaert (Zottegem)", "http://www.portretkunst.be/standaert.php");
addOption("LZ", "An Verniers (Antwerpen)", "http://www.portretkunst.be/verniers.php");

addOption("regio", "maak je keuze", "", 1);
addList("regio", "Antwerpen", "", "Apen");
addList("regio", "Oost-Vlaanderen", "", "Oost");
addList("regio", "West-Vlaanderen", "", "West");

addOption("Apen", "maak je keuze", "", 1);
addOption("Apen", "Ceci Casariego (Antwerpen)", "http://www.portretkunst.be/casariego.php");
addOption("Apen", "An Verniers (Antwerpen)", "http://www.portretkunst.be/verniers.php");

addOption("Oost", "maak je keuze", "", 1);
addOption("Oost", "Marleen Dickel (Gent)", "http://www.portretkunst.be/dickel.php");
addOption("Oost", "Luc Standaert (Zottegem)", "http://www.portretkunst.be/standaert.php");

addOption("West", "maak je keuze", "", 1);
addOption("West", "Olga Gouskova (Brugge)", "http://www.portretkunst.be/gouskova.php");



adding a split in a category.

jscheuer1
01-03-2010, 04:46 PM
It's working now (hiding the unpopulated selects). You probably need to empty the browser's cache and delete session cookies to see the difference. If you don't know how to delete session cookies, then simply close all browser windows. I'm assuming you know how to clear the cache. Just make sure you do so without any browser window open to the page(s) that have this script on them.

chechu
01-03-2010, 04:54 PM
All perfect now. No idea what the cause was, but thanks !
I replaced the //, because I need the select bars to be visible. But it all works fine now.