Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    4
    Thanked 0 Times in 0 Posts

    I cant make the datetime picker run on my school project

    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

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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

  • Users who have thanked devnull69 for this post:

    javainbegginer (01-23-2013)

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    4
    Thanked 0 Times in 0 Posts

    devnull69

    Quote Originally Posted by devnull69 View Post
    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.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,512
    Thanks
    77
    Thanked 4,378 Times in 4,343 Posts
    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:
    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.
    Last edited by Old Pedant; 01-23-2013 at 08:55 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    javainbegginer (01-24-2013)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,512
    Thanks
    77
    Thanked 4,378 Times in 4,343 Posts
    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.
    ...
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    javainbegginer (01-24-2013)

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,512
    Thanks
    77
    Thanked 4,378 Times in 4,343 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    javainbegginer (01-24-2013)

  • #7
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •