Problems with CalendarPopup

[Darghon]

Hello all,

 

I have a form with several date input fields, to make sure no one can enter an invalid date, every field is set to readonly and will show a date input screen underneath when clicked on. (to select a date)

 

It all worked fine until I implemented a tabbed sequence at the bottom of the page, with several date fields in them.

 

Now, each time I click on a date field, in firefox I get a error: Permission denied to get property HTMLDivElement.parentNode.

But the calendar still shows, in Internet explorer i just get a javascript error:Invalid Argument

and nothing happens.

 

here are some of the code snippits

		<div id="tabs">
			<ul id='tabheader'>
			<?php
				foreach($request_record->detail as $detail){						
			?>
				<li <?php echo ($openTab == $detail->dest_svr_desc)?'id="selected"':''; ?> title="<?php echo $detail->dest_svr_desc; ?>">
					<span class='clickable' onclick="toggleTab(document.getElementById('tabheader'),document.getElementById('tabcontent'), '<?php echo $detail->dest_svr_desc; ?>')"><?php echo $detail->dest_svr_desc; ?></span>
				</li>
			<?php
				}
			?>
			</ul>
		</div>
		<div id="tabcontent">
		<?php
			foreach($request_record->detail as $detail){						
		?>
			<div id='<?php echo $detail->dest_svr_desc; ?>' title='<?php echo $detail->dest_svr_desc; ?>'<?php echo ($openTab == $detail->dest_svr_desc)?'':'style="display:none;"'; ?>>
				<table class="MainTable">
					<tr>
						<td>Date deployment</td>
						<td class="detail">
							<?php echo ($mode == "v")?"<span>":"<input type='text' name='py_dtdep_html' value='";
									echo $detail->py_dtdep_html; 
									echo ($mode == "v")?"</span>":"' id='py_dtdep_html' onclick=\"CalPopup.select(this,'py_dtdep_html','yyyy/MM/dd'); return false;\" readonly />"; ?>
						</td>
					</tr>
				</table>
			</div>
		<?php
			}
		?>
		</div>

 

the div that the calendar popup calls is at the bottom of the page after the form is closed just before </body>

	<DIV ID="CalPop" STYLE="position:absolute;visibility:hidden;background-color:#EEEEEE;;layer-background-color:white;"></DIV>

 

and this is the javascript code that does everything

or is supposed to do

		function toggleTab(tabHeader, tabPanel, tab){
		window.location.hash = tab;
		var tabs = tabHeader.getElementsByTagName('li');
		var x = null;
		for(var i = 0;i < tabs.length;i++){
			x = tabs[i];
			if(x.title == tab){
				x.id = 'selected';
			}
			else{
				x.id = '';
			}
		}

		tabs = tabPanel.getElementsByTagName('div');
		x = null;
		for(var i = 0;i < tabs.length;i++){
			x = tabs[i];
			if(x.title == tab){
				x.style.display = 'block';
			}
			else if(x.title != ''){
				x.style.display = 'none';
			}
		}
	}

	window.onload = function(){	
		//Make sure the right tab is selected when page is opened
		var url = window.location.href;
		if(url.indexOf('#') != -1)  
			toggleTab(document.getElementById('tabheader'),document.getElementById('tabcontent'), url.substr(url.indexOf('#')+1));

		CalPopup = new CalendarPopup("CalPop");
		CalPopup.showNavigationDropdowns();
	}

 

Can anyone explain what is going wrong, so maybe even solve the problem?