I cant make the datetime picker run on my school project

javainbegginer · 01-23-2013, 12:05 PM

Hi Java script Gurus.

I've been trying to figure out how to run the date_time picker java script but seems like it doesen't like me :-)

date and time picker should run when you select MATH and click Date taken text box

here is my problematic web:

Code:

<html>
<head>
<!--Date-->
<script language="JavaScript" src="datepicker.js" type="text/javascript"></script>
<link href="datepicker.css" rel="stylesheet" />
<title>OHAB SCHOOL</title>
<script type='text/javascript'>

function toggle(tbl_show,total_tbl)
     {
         for (i=1;i<total_tbl+1;i++)
         {
        eval("document.getElementById(\"thetbl"+i+"\").style.display='none'");
        }
         if (tbl_show!="") {     
             obj=document.getElementById("thetbl"+tbl_show);
             obj.style.display='';
             }
     }

function updatehosts(selectedchostgroup){
hostslist.options.length=0
if (selectedhostsgroup>0){
for (i=0; i<hosts[selectedhostsgroup].length; i++)
hostslist.options[hostslist.options.length]=new Option(hosts[selectedhostgroup][i].split("|")[0], hosts[selectedhostgroup][i].split("|")[1])
}
}
<!-- check Button -->
function enable_bld_button(buttonSel){    
   document.getElementById(buttonSel).disabled = false;
}
function getAllSelections(box) {
	var options = box.options;
	var selectedOptions = [];
	for (var i = 0; i < options.length; i++)
		if (options[i].selected)
			selectedOptions.push(options[i].value);
	return selectedOptions;
}
function BuildAlert(buildID) {
alert("Selected for " + getAllSelections(document.getElementById(buildID)));
      }


 <!-- ADDED -->
var ohabo = [];
ohabo["startList"] = ["addition","subtraction"];
ohabo["addition"] = ["whole","integer","fraction"];
ohabo["whole"] = ["whole Stuff 1","whole Stuff 2","whole Stuff 3"];
ohabo["integer"] = ["integer Stuff 1","integer Stuff 2","integer Stuff 3"];
ohabo["even"] = ["even Stuff 1","even Stuff 2","even Stuff 3"];

var nLists = 3; // number of select lists in the set

function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['pogi']['List'+i].length = 1;
document.forms['pogi']['List'+i].selectedIndex = 0;
}
var nCat = ohabo[currCat];
for (each in nCat) {
var nOption = document.createElement('option'); 
var nData = document.createTextNode(nCat[each]); 
nOption.setAttribute('value',nCat[each]); 
nOption.appendChild(nData); 
currList.appendChild(nOption); 
} 
}

function init() {
fillSelect('startList',document.forms['pogi']['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
</head>
<body >
<form name="pogi">
<table border="1">
  <tr>
    <td width="50%">
      <p>Select Subject</p>
    </td>
    <td>
     <select name="select_task" onchange="toggle(this.value,2)"> 
  <option value="">---SELECT ONE---</option>
  <option value="1">1 - Science</option>
  <option value="2">2 - Math</option>
  <option value="3">3 - Politics</option>
  <option value="4">4 - Pehm</option>
  <option value="5">6 - Others</option>
  </select>
    </td>
</tr>
</table>
</br>
<table border="1" id="thetbl1" style="display:none">
<tr>
   <td width="50%" align='center'><p>Select a Subject</p></td>
  <td ><select size="3" name="build_list" multiple="yes" id="build_lst" onfocus="enable_bld_button('button1')"> 
  <option>Phisics</option>
  <option>Chemistry</option>
  <option>Anatomy</option>
  <option>Botany</option>
  <option>Geology</option>
  
  </select></td>
   </td>   
</tr>
   <tr>
   <td align='center'><p>Exceute</p></td>
   <td align='center'><input id="button1" type='button' name="bld_button" disabled value='COMMIT' onclick="BuildAlert('build_lst')")></td>
   <!--onclick="get_build(getBUILDSelections this.form['build_list'].value)"-->
   </tr>
   </table>     
<table border="1" id="thetbl2" style="display:none">
</tr>
<tr>
   <td><p>Select a Subject</p></td>
   <td><p>Select a Topic</p></td>
   <td><p>Select Topic2</p></td>   
</tr>
<tr>
  <tr>
<td>
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Choose a Subject</option>
</select>

<td>
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Choose a Topic </option>
</select>
</td>
  <td>
<select id="build_2nd" name='List3' size="2"  multiple="yes" onchange="getValue(this.value, this.form['List2'].value, 
this.form['List1'].value)" onfocus="enable_bld_button('button2')">
<option selected >Choose Topic2</option>
</select>
</td>
  </tr>
  <tr>
   <td align='center'><p>Date Taken</p></td>
   <td align='center' colspan='2'><input size='5' type="text" name="SelectedDate" id="SelectedDate" readonly onClick="GetDate(this);" / id='userInput' value='date' />
   </td>
   </tr>
   <tr>
   <td align='center'><p>Exceute</p></td>
   <td align='center' colspan='2'><input id="button2" type='button' name="bld_button2" disabled value='COMMIT' onclick="BuildAlert('build_2nd')")></td>
   </tr>
</table>
<form>
</body>
</html>

here is the date_time picker sample that worked:

Code:

<html> 
  <head>
    <title>My Web Page!</title>
	<link rel="stylesheet" href="images/main.css">
					<script type="text/javascript" language="javascript" src="images/prototype-1.js"></script>
			<script type="text/javascript" language="javascript" src="images/prototype-base-extensions.js"></script>
			<script type="text/javascript" language="javascript" src="images/prototype-date-extensions.js"></script>
			<script type="text/javascript" language="javascript" src="images/behaviour.js"></script>
							<script type="text/javascript" language="javascript" src="images/datepicker.js"></script>
										<link rel="stylesheet" href="images/datepicker.css">
							<script type="text/javascript" language="javascript" src="images/behaviors.js"></script>
  </head>
  <body>
     <!--<input size='5' type="text">-->
	 
	 <div style="float:left; width:400px;">Date and time, horizontal layout, 24-hour time:</div> <input class="datetimepicker"/>
	
	</form>
  </body>
</html>

you may also download the datetimepicker.js here: http://www.htmldrive.net/items/show/...me-Picker.html

devnull69 · 01-23-2013, 12:35 PM

Why would you use eval() like this

Code:

eval("document.getElementById(\"thetbl"+i+"\").style.display='none'");

It is equivalent to

Code:

document.getElementById("thetbl"+i).style.display='none';

You should never use eval() ... it's considered very bad practice

javainbegginer · 01-23-2013, 01:01 PM

Quote:

Originally Posted by devnull69

Why would you use eval() like this

Code:

eval("document.getElementById(\"thetbl"+i+"\").style.display='none'");

It is equivalent to

Code:

document.getElementById("thetbl"+i).style.display='none';

You should never use eval() ... it's considered very bad practice

Hi Devnull69,

thank you for your attention, that code has been advised to me by someone, I don't see any error on the javascript console regarding to that. I may do change that and use your helpful advise, but for now my main concern is to make the datetime picker work.

Old Pedant · 01-23-2013, 08:44 PM

In the one that you say *DOES* work you have

Code:

<script type="text/javascript" language="javascript" src="images/prototype-1.js"></script>
<script type="text/javascript" language="javascript" src="images/prototype-base-extensions.js"></script>
<script type="text/javascript" language="javascript" src="images/prototype-date-extensions.js"></script>
<script type="text/javascript" language="javascript" src="images/behaviour.js"></script>

*ALL* of which are missing from the one you say does not work.

Almost surely, the datepicker.js code *RELIES* upon those LIBRARIES (because that is what they are).

So if the libraries aren't there, the datepicker.js code falls flat on its face.

Mind you, I don't know this for a fact, since you don't bother to show us the code for datapicker.js, but it's a logical place to start from.

In the future, when you want help with code, you need to post *ALL* the relevant code. Here, you didn't even bother to post datepicker.js. In general, if there is a lot of code to be shown, the best way to do so is to give us the URL of some page we can go look at.

Oh...and repeat this MANTRA 100 times, at least:

Quote:

eval( ) is evil; I will not use it.
eval( ) is evil; I will not use it.
eval( ) is evil; I will not use it.
...

You said "...that code has been advised to me by someone, ...". So that "someone" is a person who you should definitely *NOT* listen to in the future.

Old Pedant · 01-23-2013, 08:48 PM

And one more mantra to repeat 100 times:

Code:

language="JavaScript" is very very obsolete; I will not use it.
language="JavaScript" is very very obsolete; I will not use it.
language="JavaScript" is very very obsolete; I will not use it.
...

Old Pedant · 01-23-2013, 08:53 PM

Okay, mea culpa on one point. You did, indeed, give us a link to where you got datepicker.js from.

But when I go look at that page http://www.htmldrive.net/edit_media/2010/201009/20100902/Date%20Time%20Picker/datepicker.htm and do a VIEW==>>SOURCE indeed I see all those libraries, just as you showed them.

So...you need them.

javainbegginer · 01-24-2013, 05:41 AM

Hi Old Pedant,

Many thanks on your advises, I have changed the lines the you said that are improper to use and also I have connected the libraries of date&time picker that I did before (I failed to post it previously)

Here it is, but still I cant make it work:

Code:

<html>
<head>
<link rel="stylesheet" href="images/main.css">
<script type="text/javascript" src="images/prototype-1.js"></script>
<script type="text/javascript" src="images/prototype-base-extensions.js"></script>
<script type="text/javascript" src="images/prototype-date-extensions.js"></script>
<script type="text/javascript" src="images/behaviour.js"></script>
<script type="text/javascript" src="images/datepicker.js"></script>
<link rel="stylesheet" href="images/datepicker.css">
<script type="text/javascript" src="images/behaviors.js"></script>
<title>OHAB SCHOOL</title>
<script type='text/javascript'>

function toggle(tbl_show,total_tbl)
     {
         for (i=1;i<total_tbl+1;i++)
         {
        document.getElementById("thetbl"+i).style.display='none';
        }
         if (tbl_show!="") {     
             obj=document.getElementById("thetbl"+tbl_show);
             obj.style.display='';
             }
     }

function updatehosts(selectedchostgroup){
hostslist.options.length=0
if (selectedhostsgroup>0){
for (i=0; i<hosts[selectedhostsgroup].length; i++)
hostslist.options[hostslist.options.length]=new Option(hosts[selectedhostgroup][i].split("|")[0], hosts[selectedhostgroup][i].split("|")[1])
}
}
<!-- check Button -->
function enable_bld_button(buttonSel){    
   document.getElementById(buttonSel).disabled = false;
}
function getAllSelections(box) {
	var options = box.options;
	var selectedOptions = [];
	for (var i = 0; i < options.length; i++)
		if (options[i].selected)
			selectedOptions.push(options[i].value);
	return selectedOptions;
}
function BuildAlert(buildID) {
alert("Selected for " + getAllSelections(document.getElementById(buildID)));
      }


 <!-- ADDED -->
var ohabo = [];
ohabo["startList"] = ["addition","subtraction"];
ohabo["addition"] = ["whole","integer","fraction"];
ohabo["whole"] = ["whole Stuff 1","whole Stuff 2","whole Stuff 3"];
ohabo["integer"] = ["integer Stuff 1","integer Stuff 2","integer Stuff 3"];
ohabo["even"] = ["even Stuff 1","even Stuff 2","even Stuff 3"];

var nLists = 3; // number of select lists in the set

function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['pogi']['List'+i].length = 1;
document.forms['pogi']['List'+i].selectedIndex = 0;
}
var nCat = ohabo[currCat];
for (each in nCat) {
var nOption = document.createElement('option'); 
var nData = document.createTextNode(nCat[each]); 
nOption.setAttribute('value',nCat[each]); 
nOption.appendChild(nData); 
currList.appendChild(nOption); 
} 
}

function init() {
fillSelect('startList',document.forms['pogi']['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
</head>
<body >
<form name="pogi">
<table border="1">
  <tr>
    <td width="50%">
      <p>Select Subject</p>
    </td>
    <td>
     <select name="select_task" onchange="toggle(this.value,2)"> 
  <option value="">---SELECT ONE---</option>
  <option value="1">1 - Science</option>
  <option value="2">2 - Math</option>
  <option value="3">3 - Politics</option>
  <option value="4">4 - Pehm</option>
  <option value="5">6 - Others</option>
  </select>
    </td>
</tr>
</table>
</br>
<table border="1" id="thetbl1" style="display:none">
<tr>
   <td width="50%" align='center'><p>Select a Subject</p></td>
  <td ><select size="3" name="build_list" multiple="yes" id="build_lst" onfocus="enable_bld_button('button1')"> 
  <option>Phisics</option>
  <option>Chemistry</option>
  <option>Anatomy</option>
  <option>Botany</option>
  <option>Geology</option>
  
  </select></td>
   </td>   
</tr>
   <tr>
   <td align='center'><p>Exceute</p></td>
   <td align='center'><input id="button1" type='button' name="bld_button" disabled value='COMMIT' onclick="BuildAlert('build_lst')")></td>
   <!--onclick="get_build(getBUILDSelections this.form['build_list'].value)"-->
   </tr>
   </table>     
<table border="1" id="thetbl2" style="display:none">
</tr>
<tr>
   <td><p>Select a Subject</p></td>
   <td><p>Select a Topic</p></td>
   <td><p>Select Topic2</p></td>   
</tr>
<tr>
  <tr>
<td>
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Choose a Subject</option>
</select>

<td>
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Choose a Topic </option>
</select>
</td>
  <td>
<select id="build_2nd" name='List3' size="2"  multiple="yes" onchange="getValue(this.value, this.form['List2'].value, 
this.form['List1'].value)" onfocus="enable_bld_button('button2')">
<option selected >Choose Topic2</option>
</select>
</td>
  </tr>
  <tr>
   <td align='center'><p>Date Taken</p></td>
   <td align='center' colspan='2'><input size='5' type="text" name="SelectedDate" id="SelectedDate" class="datetimepicker"/>
   </td>
   </tr>
   <tr>
   <td align='center'><p>Exceute</p></td>
   <td align='center' colspan='2'><input id="button2" type='button' name="bld_button2" disabled value='COMMIT' onclick="BuildAlert('build_2nd')")></td>
   </tr>
</table>
<form>
</body>
</html>