jquery UI datepicker not selecting Date

jcanker · September 6, 2013

I've used datepicker before, and it's pretty simple to implement.

On my current project, however, it displays the datepicker without issue, but when I click the date it's tries to follow the '#' link that's generated rather than grabbing the date and populating the input block with it.

What is causing this to NOT follow the prevent default and to try to follow the link?

The html for this page is:


	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="http://fonts.googleapis.com/css?family=Cardo" rel="stylesheet" type="text/css">
    	<link href="http://fonts.googleapis.com/css?family=Lato:400,400italic" rel="stylesheet" type="text/css">
		
		<script src="javascript/galleria/galleria-1.2.9.min.js"></script>
		<script src="javascript/jquery-1.9.1.min.js"></script>
		<script src="javascript/jquery.slides.min.js"></script>
		<script src="javascript/jquery-ui-1.10.3.custom.min.js"></script>

		<link rel="stylesheet" type="text/css" href="css/gahmusa.css">
		<link rel="stylesheet" media="screen" href="css/superfish/superfish.css">
<!--		<link rel="stylesheet" media="screen" href="css/superfish/superfish-navbar.css">  -->
		<link rel="stylesheet" media="screen" href="css/jquery-ui-1.10.3.custom.css">
	
		<script src="javascript/superfish/hoverIntent.js"></script>
		<script src="javascript/superfish/superfish.js"></script>
		
		<title>Website Administration Portal</title>
		<!-- initialise Superfish Menus-->
		<script>
 			jQuery(document).ready(function(){
    		jQuery("ul.sf-menu").superfish({
      				pathClass:	"current",
					cssArrows:	false
    			});
  			});
		</script>	
		<!-- Initialize TinyMCE-->
		<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script>
		<script type="text/javascript">
			tinymce.init({
    		selector: "textarea"
 			});
		</script>
	</head>
	<body>
		<div id="banner">
			<a href="default.php"><img src="images/400px_Foundation.png" style="float:left;padding-left:80px;width:400px"/>
			<img src="images/400px_Museum.png" style="float:left;width:400px"/></a>
		</div>
		<div class="lato16">
    		<ul class="sf-menu">
	        	<li class="topLevel"><a href="visit.php" >VISIT THE MUSEUM</a>
					<ul>
						<li><a href="about.php" >ABOUT THE MUSEUM</a></li>
						<li><a href="groups.php" >GROUPS & TOURS</a></li>
						<li><a href="events.php" >EVENTS AND RENTALS</a></li>
						<li><a href="oralhistory.php" >ORAL HISTORY</a></li>
						<li><a href="volunteer.php" >VOLUNTEERS & INTERNSHIPS</a></li>
					</ul>
				</li>
         		<li id="secondTopLevel" class="topLevel" ><a href="explore.php" >EXPLORE OUR EXHIBITS</a>
					<ul>
						<li><a href="currentExhibit.php" >CURRENT EXHIBIT</a></li>
			<!--			<li><a href="permanentExhibits.php" >PERMANENT EXHIBITS</a>
							<ul>
								<li><a href="timeline.php" >TIMELINE</a></li>
							</ul>
						</li>
						<li><a href="futureExhibits.php" >FUTURE EXHIBITS</a></li>
						<li><a href="programs.php" >PROGRAMS</a></li>  -->
						
					</ul>
				</li>
            	<li id="lastTopLevel" class="topLevel"><a href="join.php" >THE FOUNDATION</a>
					<ul>
						<li><a href="mission.php">MISSION</a></li>
						<li><a href="leadership.php">FOUNDATION LEADERS</a></li>
						
						<li><a href="dga.php">DISTINGUISHED<br/>GERMAN-AMERICAN<br/>OF THE YEAR ™</a></li>
						<li><a href="ongoingPrograms.php">ONGOING PROGRAMS</a></li>
						<li><a href="#" >KEEP THE HERITAGE ALIVE</a>
							<ul>
								<li> <a href="waysToGive.php" >WAYS TO GIVE</a> 
						<!--		<ul>
										<li><a href="membership.php" >MEMBERSHIP</a></li>
										<li><a href="volunteer.php">VOLUNTEERS & INTERNSHIPS</a></li>
									</ul>-->
								</li>
							</ul>
						</li>
					</ul>
				</li>
            	<li class="stretch"></li>
        	</ul>
		</div>
		<div style="clear:both></div>
<!--[if lt IE 7]><script type="text/javascript" src="javascript/iehoverfix.js"></script><![endif]-->
	

    <div id="TemplateHead" style="background-color:#fff"; ><!--width = 400 w/ 80px padding-->
        <div id="titleTextContainer" style="width:320px;margin-left:80px;" ><!--start 80 px in, 320px wide-->
        	<div id="titleText" style="width:550px; float:left;margin-top:20px;margin-bottom:20px;"><!--268px wide-->
            	<span class="lato48">Administration Portal</span>
            </div>
            <div id="titleSubText" style="width:525px;float:left "><!--268px wide-->
            	<span class="cardoItal18">Use This Portal To Administer the GAHMUSA Website</span>
            </div>
        </div>
        <div id="titlePhotoContainer" style="margin-left:600px;text-align:center">
        	<img src="images/denkmal_cutout.png"  height="200px"/>
        </div>
    </div>


<script>
	$(function() {
		$( ".datepicker" ).datepicker();
	});
	</script>
		<div id="tagline" class="lato26" style="margin:0px;background-color:#FCD209; text-align:left">
    	CREATE NEW EVENT IN SCHEDULE
    	</div>

		<div class="oneThird" style="background: #ffffff;">
		<div class="oneThirdHeader"></div>
			<div class="oneThirdLeft">
			 
			</div>
			<div class="oneThirdRight">
			
		<p>
			<form id='createEventForm' name='createEventForm' action='php/procCreateEvent.php' method='POST'>
				<table id='createEventTable' name='createEventTable' style='width:100%'>
					<tr>
						<td>Event Name/ Headline</td>
						<td><input name='eventName' id='eventName' size='55'/></td>
					</tr>
					<tr>
						<td>Event Date</td>
						<td><input class='datepicker' name='eventName' id='eventName' size='20'/></td>
					</tr>
					<tr>
						<td>Event Start Time</td>
						<td>
							<select name='eventStartHour' id='eventStarthour'  >
						<option value='00' >12 AM</option>
						<option value='01' >1 AM</option>
						<option value='02' >2 AM</option>
						<option value='03' >3 AM</option>
						<option value='04' >4 AM</option>
						<option value='05' >5 AM</option>
						<option value='06' >6 AM</option>
						<option value='07' >7 AM</option>
						<option value='08' >8 AM</option>
						<option value='09' >9 AM</option>
						<option value='10' >10 AM</option>
						<option value='11' >11 AM</option>
						<option value='12' >12 PM</option>
						<option value='13' >1 PM</option>
						<option value='14' >2 PM</option>
						<option value='15' >3 PM</option>
						<option value='16' >4 PM</option>
						<option value='17' >5 PM</option>
						<option value='18' >6 PM</option>
						<option value='19' >7 PM</option>
						<option value='20' >8 PM</option>
						<option value='21' >9 PM</option>
						<option value='22' >10 PM</option>
						<option value='23' >11 PM</option></select> : <select name='eventStartMin' id='eventStartMin' class='datepicker' >
						<option value'00'>00</option>
						<option value'05'>05</option>
						<option value'10'>10</option>
						<option value'15'>15</option>
						<option value'20'>20</option>
						<option value'25'>25</option>
						<option value'30'>30</option>
						<option value'35'>35</option>
						<option value'40'>40</option>
						<option value'45'>45</option>
						<option value'50'>50</option>
						<option value'55'>55</option>			
							</select>			
						</td>
					</tr>
					<tr>
						<td>Event Name/Headline</td>
						<td><input name='eventName' id='eventName' size='20'/></td>
					</tr>
				</table>
			</form>


			</div>
			<br style="clear: left;" />
		</div>

jcanker · September 6, 2013

Figured it out: I had copied/pasted the input blocks when I created the form and forgot to change the name and id. It's working now that it has a unique id.

Sign In

jquery UI datepicker not selecting Date

Recommended Posts

jcanker

Link to comment

Share on other sites

jcanker

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information