SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I cant make the datetime picker run on my 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 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>
    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:
    site_1 & site_2

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi javainbegginer,

    Welcome to the forums

    The problem with your code is your method name 'toggle':

    HTML Code:
    <select name="select_task" onchange="toggle(this.value,2)">
    This is a method name used by Prototype and by overwriting it, you are causing things to crash.
    Change 'toggle' to any other name, such as 'updateContent' and this will solve your problem.

    HTH

    P.S. As an aside, you might consider using jQuery's datepicker as an alternative.

  3. #3
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi javainbegginer,

    Welcome to the forums

    The problem with your code is your method name 'toggle':

    HTML Code:
    <select name="select_task" onchange="toggle(this.value,2)">
    This is a method name used by Prototype and by overwriting it, you are causing things to crash.
    Change 'toggle' to any other name, such as 'updateContent' and this will solve your problem.

    HTH

    P.S. As an aside, you might consider using jQuery's datepicker as an alternative.

    Thanks Pullo!

    date time picker works now, I also changed the "toggle" to the one that you have suggested but there is a change on the selection box behavior on the "Select Subject" under MATH

    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 UpdateContent(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="UpdateContent(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>

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    M'kay. What is happening with the selection box and what do you want to happen?

  5. #5
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi javainbegginer,

    Welcome to the forums

    The problem with your code is your method name 'toggle':

    HTML Code:
    <select name="select_task" onchange="toggle(this.value,2)">
    This is a method name used by Prototype and by overwriting it, you are causing things to crash.
    Change 'toggle' to any other name, such as 'updateContent' and this will solve your problem.

    HTH

    P.S. As an aside, you might consider using jQuery's datepicker as an alternative.
    Quote Originally Posted by Pullo View Post
    M'kay. What is happening with the selection box and what do you want to happen?
    Hi Pullo,

    This is the initial code that I constructed before I planned to add datetime picker

    Code:
    <html>
    <head>
    
    <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>
    as you can see once you selected the MATH every selection box updates on its contents. When I have changed the "toggle" as per you have advised the 1st selection box on "Select Subject" expanded and some strange contents is added. (I'm not good in english explanations) but you can observe it if you compare this code from the previous

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    No probs. i'm just off out the door now, but I'll have a look at it later.
    Shouldn't be too hard to sort out.


Bookmarks

Posting Permissions

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