onclick event in infowindow - datepicker return date
kathb4
below
The link is http://trees-2010
and then append -dev.test.www.nhm.ac.uk/
I am trying to get a datepicker (jquery ui datepicker preferably) to
appear in the form which comes up in the infowindow for the markers. I
did a bunch of searching, and came up with alot of references to
lightbox and slimbox, but nothing really similar that I could
translate into what I want/am trying to do.
As you can see I have a javascript function which does an alert of if
you click the date field, but I can't get anything to return back to
that input field.
I have to admit I am not quite understanding what is going on - before
DOM, after DOM etc...
Are there any sites someone can point me to so I can learn? Or even a
slice of code ;)
Thanks - having fun -K
kathb4
you want on top of the infowindow to be greater than that of the
infowindow.
So to get jquery datepicker in a form in the infowindow, create the
form per usual in the inforwindow.
then in jquery call the inputted datepicker at
$(':text[name*=date]').live('click',function() {
$(this).datepicker({showOn: 'focus'}).focus();
});
and set .ui-datepicker { width: 17em; padding: .2em .2em 0; z-index:
999;}
On 22 Feb, 18:01, kathb4 <kat...@googlemail.com> wrote:
> I don't want my link to get picked up so bear with me as I split it up
> below
>
> The link ishttp://trees-2010
Qunhuan
Hi,
I am trying to make datepicker work inside infowindow (v3), but not successful.
To present the problem, I combined a simple map (copied from http://code.google.com/apis/maps/documentation/javascript/examples/infowindow-simple.html) and a simple datepicker example (added the css and js code download + changed the contentString). The datepicker works outside the map. When opening this new demo html, it can be seen a marker inside a map. When the marker is clicked, an infowindow is opened, within which there is a datepicker widget. When the datepicker is clicked, it is supposed to see the datepicking happening. However, when I click the datepicker widget, nothing seems happening. Following is the html code I used (run inside Tomcat):
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Info Window Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<link type="text/css" href="resources/css/jquery-ui-1.8.17.datepicker.css" rel="stylesheet" />
<script type="text/javascript" src="resources/js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="resources/js/jquery-ui-1.8.17.datepicker.min.js"></script>
<script type="text/javascript">
$(function(){
// Datepicker
$('#datepicker').datepicker({
inline: true
});
});
$(':text[name*=date]').live('click',function() {
$(this).datepicker({showOn: 'focus'}).focus();
});
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var contentString = '<div id="content"><form id="" onsubmit="" action="" method="post"><table><td>Date: <input id="datepicker" type="text"></td></table></form></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Datepicker test'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<div id="content"><form id="" onsubmit="" action="" method="post"><table><td>Date: <input id="datepicker" type="text"></td></table></form></div>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Could anyone help please?
Many thanks in advance,
Qunhuan
Rossko
>
> <div id=*"content"*><form id=*""* onsubmit="" action=*""* method=*"post"*><
> table><td>Date: <input id=*"datepicker"* type=*"text"*></td></table></form
>
> ></div>
>
> <body onload="initialize()">
It's invalid HTML to place a <div> outside of the <body>
Qunhuan
Thanks for pointing this out. It looks the browsers are error
tolerant. But I move the code into the body part. I wanted to show the
jQuery datepicker truly works outside the map area. I have to admit I
am not an expert in javascript
Following kathb4’s idea, I also added the following code to the css
file.
$(this).datepicker({showOn:
'focus'}).focus();
});
I also tried infobubble (http://google-maps-utility-library-
v3.googlecode.com/svn/trunk/infobubble/examples/example.html), also
with no luck.
Could someone shed some light please?
Rossko
to your demo, we don't have enough context.
Qunhuan
It is working now, so long as I removed the datepicker from outside the map. This is the working code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Info Window Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<link type="text/css" href="resources/css/jquery-ui-1.8.17.datepicker.css" rel="stylesheet" />
<script type="text/javascript" src="resources/js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="resources/js/jquery-ui-1.8.17.datepicker.min.js"></script>
<script type="text/javascript">
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Datepicker test'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
$('#datepicker').datepicker();
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
google.maps.event.addListener(infowindow, 'domready', function() {
$('#datepicker').datepicker();
});
Nothing else.
Sorry I could not provide a demo link as I don't have a host site at the moment. Everything runs on my local host.