Conflicting scripts in head?

[jaidanwolf]

Hey there, I am working on a site where I need to use javascript code for a slideshow as well as an inquiry form on the same page. However, I can't get them to show up at the same time (to be more specific, I can't get the slideshow and the popup calendar on the form to show up all together...it seems to be allowing only one at a time - and even then, it's only showing the arrival date popup calendar and not the departure date calendar).I'm guessing it's to do with pieces of code that are overlapping, since the scripts are from independent sources, but I can't figure out what. Any help would be greatly appreciated. The page head is as follows.INQUIRY FORM CODE

<script type="text/javascript">function go(){location=document.forms[0].gowhere.value;}</script><script language="JavaScript" type="text/javascript"><!--function checkform ( form ){  if (form.salutation.value == "") {    alert( "Please enter your salutation." );    form.salutation.focus();    return false ;  }  if (form.first_name.value == "") {    alert( "Please enter your first name." );    form.first_name.focus();    return false ;  }  if (form.last_name.value == "") {    alert( "Please enter your last name." );    form.last_name.focus();    return false ;  }  if (form.email.value == "") {    alert( "Please enter your email address." );    form.email.focus();    return false ;  }  if (form.country.value == "") {    alert( "Please enter your country of residence." );    form.country.focus();    return false ;  }  if (form.indate.value == "") {    alert( "Please enter your check-in date." );    form.email.focus();    return false ;  }  if (form.outdate.value == "") {    alert( "Please enter your check-out date." );    form.email.focus();    return false ;  }  if (form.elements['00NA000000269Gz'].value == "") {    alert( "Please enter the no. of bedrooms requested." );    form.elements['00NA000000269Gz'].focus();    return false ;  }    if (form.elements['00NA000000269H4'].value == "") {    alert( "Please enter the no. of adults." );    form.elements['00NA000000269H4'].focus();    return false ;  }    if (form.elements['00NA000000269H9'].value == "") {    alert( "Please enter the no. of children." );    form.elements['00NA000000269H9'].focus();    return false ;  }     return true ;}//--></script><style type="text/css">@import "css/jquery.datepick.css";/* Or use these for a ThemeRoller theme instead@import "css/ui-southstreet.datepick.css";*/</style><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.datepick.js"></script><script type="text/javascript">$(function() {//	$.datepick.setDefaults({useThemeRoller: true});	$('#indate').datepick({dateFormat: 'd-M-yy', onSelect: showDate, minDate: new Date()});	$('#outdate').datepick({dateFormat: 'd-M-yy', onSelect: showDate, minDate: new Date()});});function showDate(dateStr, date) {     if (this.id == 'indate') {         $('#outdate').datepick('option', 'minDate', date); 		var dateString = date; 		var myDate = new Date(dateString);				$('#00NA000000268NL').val((myDate.getMonth()+1) + "/" + myDate.getDate() + "/" + myDate.getFullYear())    }     else {         $('#indate').datepick('option', 'maxDate', date); 		var dateString = date; 		var myDate = new Date(dateString);				$('#00NA000000268NQ').val((myDate.getMonth()+1) + "/" + myDate.getDate() + "/" + myDate.getFullYear())    } }//function showDate(date) {//	$('#00NA000000268NQ').datepick.minDate =  new Date(date);	// $('#00NA000000268NL').val(date) //}function showDate2(date) {	// $('#00NA000000268NQ').val(date) }</script>

AND THE SLIDESHOW CODE:

<link rel="stylesheet" type="text/css" href="images/slideshow/css/slideshow.css" media="screen" /><style type="text/css">.slideshow a#vlb{display:none}</style><script type="text/javascript" src="images/slideshow/js/mootools.js"></script><script type="text/javascript" src="images/slideshow/js/visualslideshow.js"></script>

[justsomeguy]

Are there any Javascript errors on the page? Are any of the scripts assigning themselves to window.onload? If so, only one of them would run. The slideshow code isn't there, that's just the HTML tags that includes the code.

[jaidanwolf]

Oops, sorry about that. I forgot that it's referencing so many different files. I'm a bit hesitant to post the code from the js files because they're so long and there are quite a few of them. As far as I can see, no errors are showing up when the page loads. And I searched all of the js files for window.onload but nothing came up. I did see things like:

false;var D=C.onload||$empty;delete C.onload;C.id=C.name=$pick(C.id,C.name,B.id,B.name,"IFrame_"+$time());B=new Element(Bvar Asset=new Hash({java script:function(F,D){D=$extend({onload:$empty,document:document,check:$lambda(true)}var E=D.onload.bind(,A=D.check,G=D.document;delete D.onload;delete D.check;image:function(C,{B=$merge({onload:$empty,onabort:$empty,onerror:$empty},:)D=D.onload=D.onabort=D.onerror=null;G.delay(1,A,A);var E=new Asset.image(F,{onload:function(){C.onProgress.call(this,B,D.indexOf(F));

Is that relevant or does it only matter if it's window.onload? If it's necessary to really dig into the code, I'll go ahead and post all of the js scripts. Thanks again!

[justsomeguy]

That looks like it's been minified, any of those single-character variables could refer to the window object. If the people writing that know what they're doing then they aren't going to have their scripts just overwrite the load event. Are you checking for errors though? Don't expect the browser to go out of its way to tell you there's a Javascript error, you'll need to look.

[jaidanwolf]

Hey, thanks...I checked and am seeing a lot of errors but part of that may be because I haven't validated yet. Right now, I'm not quite sure what to look for because javascript is my weak point.This is the test site if you have a chance to see for yourself (login is username: testsite, password: enter)The slideshow is working but the arrival/departure date calendar popups are not. If I move the positioning of the slideshow code to be ABOVE the calendar code in the head, then the arrival calendar works but the slideshow and departure calendar do not. Any help would be so much appreciated because I'm completely stuck. And if there are any specific files or pieces of code that I should post to make things clearer, please let me know and I'll do so!

[justsomeguy]

On this line:$('#indate').datepick({dateFormat: 'd-M-yy', onSelect: showDate, minDate: new Date()});Firebug says that $('#indate') is null. That probably means that code is running before the page loads and before that element has been created. Either assign that code to run when the page loads, or move the code after the elements they are trying to interact with.

[jaidanwolf]

Sorry to be dense but I'm really shaky with Javascript...how would I assign the code to run when the page loads? Or where would I move it to? Like I said, if - in the header - I move the slideshow reference code to be above the calendar code, then the slideshow won't work. And vice-versa (ie. right now the slideshow code is at the bottom of the head section and it works fine while the calendars are "broken").I hate to say it but that's about all I can figure out...I'm not sure exactly what's conflicting with what or where to move the code (or how to alter it within the js files) in a way that won't mess things up further. Sorry for my ignorance on the subject and thanks again, your help is appreciated!

[thescientist]

basically what he is getting at is that in order for Javascript to act upon elements on the page (known as the DOM) they have to have been loaded into the browser, or else you will get the null error JSG is referring to. One way to ensure that the page has loaded and that all page elements have loaded is to run the script after the page has loaded. i.e.

<body onload="your_function()">

here are some links that might help provide you some more context on the situationhttp://www.w3schools.com/htmldom/default.asphttp://www.w3schools.com/jsref/event_body_onload.asp

[jaidanwolf]

Really sorry, I've checked out the links you provided (thanks for that) and I understand the basic idea but am clearly doing something wrong. I tried adding <body onload="your_function()"> and replacing your_function with pieces from the code in the head section that seemed related, like showDate(dateStr, date) -- I'm sure that's completely off course though!I understand what you're suggesting should be done, I'm just not sure exactly how to do it and it's driving me insane. I would try to get the proper web designer (the one who set up the form itself) to have a look but I haven't been able to reach him and I really need to get a rough but working version of this site up soon. Unfortunately, while I'm normally okay with html, this kind of coding is almost gibberish to me so I can't even see where I'm going wrong

[thescientist]

could you post your new code?

<body onload="your_function()">

this is only meant to call a function, not to put you're functions code in it. "your_function" would still be defined elsewhere (say external stylesheet) and you just call it on the body's onload event handler. like in the second link I gave youhttp://www.w3schools.com/jsref/event_body_onload.aspsee how body onload just calls the function, while it's being defined in the head section? That's the example we are trying to explain to you.

[jaidanwolf]

Hi, yes this is the example from your link that I was looking at:

<head><script type="text/javascript">function load(){alert("Page is loaded");}</script></head><body onload="load()"><h1>Hello World!</h1></body>

I see there in the head section, it has a piece of code defining what will happen (ie. the box popping up to say "Page is loaded"). And then in the body, the <body onload="load()"> bit is calling up that function, right? My confusion is that I have no idea how to call up the right function, or which function I should be referencing (am I meant to reference something from the head or one of the stylesheets?)From my current head section, this is the bit that's required for the slideshow:

<script type="text/javascript">function go(){location=document.forms[0].gowhere.value;}</script><script type="text/javascript">var a = new Image(); a.src = 'menu1.jpg';var b = new Image(); b.src = 'menuhover1.jpg';var c = new Image(); c.src = 'menu2.jpg';var d = new Image(); d.src = 'menuhover2.jpg';var e = new Image(); e.src = 'menu3.jpg';var f = new Image(); f.src = 'menuhover3.jpg';var g = new Image(); g.src = 'menu4.jpg';var h = new Image(); h.src = 'menuhover4.jpg';</script><script language="JavaScript" type="text/javascript"><!--function checkform ( form ){  if (form.salutation.value == "") {    alert( "Please enter your salutation." );    form.salutation.focus();    return false ;  }  if (form.first_name.value == "") {    alert( "Please enter your first name." );    form.first_name.focus();    return false ;  }  if (form.last_name.value == "") {    alert( "Please enter your last name." );    form.last_name.focus();    return false ;  }  if (form.email.value == "") {    alert( "Please enter your email address." );    form.email.focus();    return false ;  }  if (form.country.value == "") {    alert( "Please enter your country of residence." );    form.country.focus();    return false ;  }  if (form.indate.value == "") {    alert( "Please enter your check-in date." );    form.email.focus();    return false ;  }  if (form.outdate.value == "") {    alert( "Please enter your check-out date." );    form.email.focus();    return false ;  }  if (form.elements['00NA000000269Gz'].value == "") {    alert( "Please enter the no. of bedrooms requested." );    form.elements['00NA000000269Gz'].focus();    return false ;  }    if (form.elements['00NA000000269H4'].value == "") {    alert( "Please enter the no. of adults." );    form.elements['00NA000000269H4'].focus();    return false ;  }    if (form.elements['00NA000000269H9'].value == "") {    alert( "Please enter the no. of children." );    form.elements['00NA000000269H9'].focus();    return false ;  }     return true ;}//--></script><style type="text/css">@import "css/jquery.datepick.css";/* Or use these for a ThemeRoller theme instead@import "themes16/southstreet/ui.all.css";@import "css/ui-southstreet.datepick.css";*/</style><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.datepick.js"></script><script type="text/javascript">$(function() {//	$.datepick.setDefaults({useThemeRoller: true});	$('#indate').datepick({dateFormat: 'd-M-yy', onSelect: showDate, minDate: new Date()});	$('#outdate').datepick({dateFormat: 'd-M-yy', onSelect: showDate, minDate: new Date()});});function showDate(dateStr, date) {     if (this.id == 'indate') {         $('#outdate').datepick('option', 'minDate', date); 		var dateString = date; 		var myDate = new Date(dateString);				$('#00NA000000268NL').val((myDate.getMonth()+1) + "/" + myDate.getDate() + "/" + myDate.getFullYear())    }     else {         $('#indate').datepick('option', 'maxDate', date); 		var dateString = date; 		var myDate = new Date(dateString);				$('#00NA000000268NQ').val((myDate.getMonth()+1) + "/" + myDate.getDate() + "/" + myDate.getFullYear())    } }//function showDate(date) {//	$('#00NA000000268NQ').datepick.minDate =  new Date(date);	// $('#00NA000000268NL').val(date) //}function showDate2(date) {	// $('#00NA000000268NQ').val(date) }</script>

Whichever set of scripts is on the bottom is the one that works. So right now, the calendars are working just fine and the slideshow is not. If I move the slideshow script section to the bottom of the head, then it works and the calendars don't.Clearly, whichever script is on the bottom is overriding the other. So my question is, to make them work together, do I need to be looking at the head section, the individual js files or the stylesheet? I'm sorry, I'm just so lost. I understand the example you posted but I don't know how to apply it to my own situation.