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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Management Show/Hide of table

    Hello,
    I do not manage to run my script:
    Code:
    <html>
    
    <head>
    	<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
    	<link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/>
    	<link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
    	<link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
    	<script type="text/javascript" src="JS/JS_JQuery_2_1_0.js"></script>
    	<script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
    	<script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script>	
    	<script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
    </head>
    
    <body>
    
    <div id="inlineDatepick"></div>
     <input type="date" id="DATE1" Value='date' Size="9"></input>
    <input type="date" id="DATE2" Value='date' Size="19"></input>
    <br>
    	
    <fieldset id="Partie_Basse_Fieldset">
    <legend> DAILY TIMETABLE per request</legend>
    
    <div id="Partie_Basse_Div">
    	<table id="Table_Jour_" border="2" name="Tab_Jour" class="Class_Tab_Jour">
    	<tbody>
    		<tr align="center" id="Tab"> 
    			<td bgcolor="#F0FFFF"></td>	
    			<td bgcolor="#F0FFFF">Date</td>
    			<td bgcolor="#F0FFFF">Request</td>
    			<td bgcolor="#F0FFFF">Time(h)</td>
    			<td bgcolor="#F0FFFF">Description</td>
    			<td bgcolor="#F0FFFF">Worker</td>
    		</tr>		
    		<tr align="center" id="Line">
    			<td>					
    				<input type="button" name="NLine" id=""  size="3" value="New" 
    					onclick="CloneLine(this.parentNode.parentNode);">
    				</input>		
    			</td>
    			<td>					
    				<input type="date" name="TI_Date" id="TI_Date"  size="9" value="" readonly="readonly"></input>		
    			</td>
    			<td>					
    				<SELECT id="TS_Request_" NAME="SRequest" onChange="saveValue(this)">
    					<option value="*****************" selected="selected"></option>
    					<option>*****************
    				</SELECT>		
    			</td>
    			<td>					
    				<input type="text" name="time" id="TI_Time_"  size="5" value=""></input>		
    			</td>			
    			<td>					
    				<textarea name="" id="TA_Description_" rows="2" cols="30" value=""></textarea>			
    			</td>
    			<td>					
    				<SELECT id="TS_Worker_" NAME="SWorker" onChange="saveValue(this)">
    					<option value="*****************" selected="selected"></option>
    					<option>*****************
    				</SELECT>		
    			</td>										
    		</tr>	
    	</tbody>
    	</table>
    </div>	
    <div></div>
    </fieldset> 
    
    <script type="text/javascript">
    $(window).load(function()
    {
    	var Date_Init =  new Date();
    	var N_Day=Date_Init.getDate();
    	var N_Month=Date_Init.getMonth();
    	var N_Month_R=N_Month +1;
    	var N_Year=Date_Init.getFullYear();
    	document.getElementById("DATE1").value = N_Month_R + "/" + N_Day + "/" +  N_Year;
    			
        var dateArr = Date_Init.split("/");
        var IDfromDateText= dateArr[2] +  dateArr[0] + dateArr[1];	
        
    	// Je clone le tableau original				
        $("#Table_Jour_").clone().insertAfter("#Table_Jour_");
    	//Je lui donne un nouvel ID : "Table_Jour_"+IDfromDateText et à ces éléments
    	var New_Id = $("#Table_Jour_"+IDfromDateText);
    	$("#Table_Jour_").clone().attr('id', "#Table_Jour_"+IDfromDateText);
    	//Je masque le tableau original
    	$("#Table_Jour_").hide();
    });
    
    $(function() 
    {
       $('#inlineDatepick').datepick
       ({onSelect:
    		function(dates)
       		{
        		var dateText = $.datepick.formatDate(dates[0]);						
            	var dateArr = dateText.split("/");
            	var IDfromDateText= dateArr[2] +  dateArr[0] + dateArr[1]; 
    			document.getElementById("DATE1").value = dateText;        	
    			var Id_Tab = $("#Table_Jour_"+IDfromDateText);
    			
    			if ($(Id_Tab).length > 0)//Test la taille de l'objet si objet != vide alors il éxist
    			{				
    				//On masque TOUS les tableaux
    				$('.Class_Tab_Jour').hide(); 
       			    // J'affiche le tableau du jour sélectionné
    				$(Id_Tab).show();
    				document.getElementById("DATE2").value = Id_Tab; 				
    			}
    			else($(Id_Tab).length = 0)//Test la taille de l'objet si objet != vide alors il éxist
    			{
    				// Je masque tout les Tableaux
    				$('.Class_Tab_Jour').hide();
    				// Je fais apparaitre le tableau original pour le cloner
    				$("#Table_Jour_").show();
    				// Je clone le tableau original				
              	 	$("#Table_Jour_").clone().insertAfter("#Table_Jour_");
    				//Je lui donne un nouvel ID : "Table_Jour_"+IDfromDateText et à ces éléments
    				var New_Id = $("#Table_Jour_"+IDfromDateText);
    				$("#Table_Jour_").clone().attr('id', New_Id);
    				//Je masque le tableau original
    				$("#Table_Jour_").hide();
    			}      
       	 	}
    	});
    
    });
    
    function CloneLine(Line)
    {
    	newLine = Line.cloneNode(true); 
    	Line.parentNode.insertBefore(newLine,Line)
    	//Line.parentNode.appendChild(newLine);
    }
    
    </script>
    
    </body>
    </html>
    Normally it should:
    - in the initiation of page cloned the table (to Change are id, to date in the daytime in an input)
    - Click on the calendar:
    - verify if the day table exists:
    - if yes reveal it and mask the others
    - else creates it(change sound id, put in an input the date of day, mask the other table)
    (I began the HTML programming 3 weeks ago)
    You can help me please, thank you.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 594 Times in 593 Posts
    It maybe here
    Code:
    	<script type="text/javascript" src="JS/JS_JQuery_2_1_0.js"></script>
    	<script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
    	<script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script>	
    	<script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
    I do not have access to your files or folders so I used mine and as soon as I loaded my JQ and datepicker things appear to work just fine. Suggest you double check the paths and next make sure your not loading the datepicker two more times.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The solution :
    Code:
     
    <html>
    
    <head>
    	<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
    	<link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/>
    	<link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
    	<link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
    	<script type="text/javascript" src="JS/JS_JQuery_2_1_0.js"></script>
    	<script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
    	<script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script>	
    	<script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
    </head>
    
    <body>
    
    <div id="inlineDatepicker"></div>
     <input type="date" id="DATE1" Value='date' Size="9"></input>
     
    <fieldset id="Partie_Basse_Fieldset">
    <legend> DAILY TIMETABLE per request</legend>
    
    <div name="MesLignes" id="Partie_Basse_Div">
    	<table id="Table_Jour" border="2" name="MesTBL">
    	<tbody>
    		<tr align="center" id="Tab"> 
    			<td bgcolor="#F0FFFF"></td>	
    			<td bgcolor="#F0FFFF">Date</td>
    			<td bgcolor="#F0FFFF">Request</td>
    			<td bgcolor="#F0FFFF">Time(h)</td>
    			<td bgcolor="#F0FFFF">Description</td>
    			<td bgcolor="#F0FFFF">Worker</td>
    		</tr>		
    		<tr align="center" id="Line">
    			<td>					
    				<input type="button" name="NLine" id=""  size="3" value="New" 
    					onclick="CloneLine(this.parentNode.parentNode);">
    				</input>		
    			</td>
    			<td>					
    				<input type="date" name="date" id="TDate"  size="9" value="" readonly="readonly"></input>		
    			</td>
    			<td>					
    				<SELECT id="Select_Request" NAME="SRequest" onChange="saveValue(this)">
    					<option value="*****************" selected="selected"></option>
    					<option>*****************
    				</SELECT>		
    			</td>
    			<td>					
    				<input type="text" name="time" id=""  size="5" value=""></input>		
    			</td>			
    			<td>					
    				<textarea name="" id="TextArea_Description" rows="2" cols="30" value=""></textarea>			
    			</td>
    			<td>					
    				<SELECT id="Table_Select_Worker" NAME="SWorker" onChange="saveValue(this)">
    					<option value="*****************" selected="selected"></option>
    					<option>*****************
    				</SELECT>		
    			</td>										
    		</tr>	
    	</tbody>
    	</table>
    </div>	
    <div></div>
    </fieldset> 
    
    <script>
    
    $(window).load(function()
    {
    	$("#Table_Jour").hide();
    });
    
    $(function() 
    {
       $('#inlineDatepicker').datepick
       ({onSelect:
    		function(dates)
       		{
        		var dateText = $.datepick.formatDate(dates[0]);
       			document.getElementById("DATE1").value =dateText;
           		var dateArr = dateText.split("/");
            	var IDfromDateText= dateArr[2] +  dateArr[0] + dateArr[1];	 
    		 
    			if ($("#myDivTable_Jour_"+IDfromDateText).length > 0)
    			{
    				// Il existe..donc j'affiche le tableau
                    AffichDiv("Table_Jour_"+IDfromDateText);
    			}
    			else
    			{
    				// L'element n'existe pas.. je le crée ( clone)..
                    CreaTable("Table_Jour_"+IDfromDateText); 
                    // ...puis j'affiche le tableau
                    AffichDiv("Table_Jour_"+IDfromDateText);               
    			}           
       		}
       });
    });
    
    function AffichDiv(idTable)
    {
        //On masque TOUS les tableaux
     	$('div[name="MesTBL"]').hide(); 
        // On affiche celui que l'on a selectionné
     	$('#myDiv'+ idTable).show();   
    }
    
    function CreaTable(idTable)
    {
    	$("#Table_Jour").show();
    	//On clone le tableau d'origine
    	//et je lui donne comme ID : "MonTableau_"+ IDfromDateText 
        $("#Partie_Basse_Div").append("<div name='MesTBL' id='myDiv" + idTable + "'></div>")
    	$("#Table_Jour").clone().appendTo("#myDiv" + idTable)  
    	$("#Table_Jour").hide();
    }
    
    function CloneLine(Line)
    {
    	newLine = Line.cloneNode(true); 
    	Line.parentNode.insertBefore(newLine,Line)
    	//Line.parentNode.appendChild(newLine);
    }
    
    </script>
    </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
    •