Possible Duplicate:
ASP.NET asynchronous post-back on asp:button click
I am creating an asp.net application with an embedded google map (v3)... I am having issues when I press the submit button, the map disappears, rather than displaying the the points I added and the route between them. The markers display fine when new addresses are entered, it just seems to be the submit button that is causing me trouble. Perhaps it is causing a post-back that the map is not surviving? Any thoughts would be greatly appreciated!!!
Here is my current code:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="NewCallForm.ascx.cs" Inherits="RamRideOps.Controls.NewCallForm" %>
<table class="style1" id="NewCallTable">
<tr>
<td class="style23" align="right">
Thank you for calling RamRide! Can I have your <span class="style3"><strong>
first name</strong></span>
please?</td>
<td class="style24" colspan="2">
<asp:TextBox ID="name" runat="server" CausesValidation="True"
MaxLength="25" style="margin-bottom: 0px"
ontextchanged="newCall_name_TextChanged"></asp:TextBox>
</td>
<td class="style25">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="name" CssClass="ErrorMessage" ErrorMessage="* Enter the patron's first name."
Font-Bold="False" Display="Dynamic" ValidationGroup="NewCallFormSubmit">*</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
CssClass="ErrorMessage" Display="Dynamic"
ErrorMessage="* Names may only contain letters."
ControlToValidate="name" SetFocusOnError="True"
ValidationExpression="[a-z|A-Z]{2,25}" ValidationGroup="NewCallFormSubmit">*</asp:RegularExpressionValidator>
</td>
<td class="style30">
</td>
<td class="style25">
</td>
</tr>
<tr>
<td class="style4" align="right">
What is the <span class="style3"><strong>phone number</strong></span> our driver
can reach you at?</td>
<td class="style8" colspan="2">
<asp:TextBox ID="phone" runat="server" CausesValidation="True"
MaxLength="14" ontextchanged="newCall_phone_TextChanged" Height="22px"></asp:TextBox>
</td>
<td class="style5">
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="phone" CssClass="ErrorMessage" ErrorMessage="* Enter the call-back number."
Font-Bold="False" Display="Dynamic" ValidationGroup="NewCallFormSubmit">*</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server"
CssClass="ErrorMessage" Display="Dynamic"
ErrorMessage="* Invalid phone number." ControlToValidate="phone"
SetFocusOnError="True"
ValidationExpression="(\d{10})|((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"
ValidationGroup="NewCallFormSubmit">*</asp:RegularExpressionValidator>
</td>
<td class="style31">
</td>
<td class="style5">
</td>
</tr>
<tr>
<td class="style17" align="right">
<span class="style3"><strong>How many</strong></span> people need a ride?</td>
<td class="style18" colspan="2">
<asp:TextBox ID="numPatrons" runat="server" CausesValidation="True"
ontextchanged="newCall_numPatrons_TextChanged"></asp:TextBox>
</td>
<td class="style19" style="font-style: italic">
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server"
ControlToValidate="numPatrons" CssClass="ErrorMessage" ErrorMessage="* Enter the number of patrons."
Font-Bold="False" Display="Dynamic" ValidationGroup="NewCallFormSubmit">*</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server"
CssClass="ErrorMessage" Display="Dynamic"
ErrorMessage="* Invalid number of patrons." ControlToValidate="numPatrons"
SetFocusOnError="True"
ValidationExpression="(\d{1}[0-9]{1,2})|([1-9{1}])"
ValidationGroup="NewCallFormSubmit">*</asp:RegularExpressionValidator>
<asp:RangeValidator ID="RangeValidator1" runat="server"
ControlToValidate="numPatrons" CssClass="ErrorMessage" Display="Dynamic"
ErrorMessage="Number of patrons must be 1-255" MaximumValue="255"
MinimumValue="1" SetFocusOnError="True"
ValidationGroup="NewCallFormSubmit" Type="Integer">*</asp:RangeValidator>
</td>
<td class="style49">
We can send multiple vehicles for large groups.</td>
<td class="style19">
</td>
</tr>
<tr>
<td class="style11" align="right">
Where is the <span class="style3"><strong>pick-up location</strong></span>?</td>
<td class="style12" colspan="2">
<asp:TextBox ID="pickup" runat="server" CausesValidation="True"
MaxLength="80" Rows="2" TextMode="MultiLine"
onchange="showPickup()"></asp:TextBox>
</td>
<td class="style13">
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server"
ControlToValidate="pickup" CssClass="ErrorMessage" ErrorMessage="* Enter the pick-up location."
Font-Bold="False" Display="Dynamic" ValidationGroup="NewCallFormSubmit">*</asp:RequiredFieldValidator>
<asp:CustomValidator ID="CustomValidator1" runat="server"
ClientValidationFunction="ValidateAddress" ControlToValidate="pickup"
CssClass="ErrorMessage" Display="Dynamic"
ErrorMessage="* Invalid pick-up address."
onservervalidate="puAddressValidator_ServerValidate" SetFocusOnError="True"
ValidationGroup="NewCallFormSubmit">*</asp:CustomValidator>
</td>
<td class="style48">
No dorm pick-ups!</td>
<td class="style13">
</td>
</tr>
<tr>
<td class="style14" align="right">
Where is the <span class="style3"><strong>drop-off location?</strong></span></td>
<td class="style15" colspan="2">
<asp:TextBox ID="dropoff" runat="server" CausesValidation="True"
MaxLength="200" Rows="2" TextMode="MultiLine"
onchange="showDropoff()"></asp:TextBox>
</td>
<td class="style16">
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server"
ControlToValidate="dropoff" CssClass="ErrorMessage" ErrorMessage="* Enter the drop-off location."
Font-Bold="False" Display="Dynamic" ValidationGroup="NewCallFormSubmit">*</asp:RequiredFieldValidator>
<asp:CustomValidator ID="CustomValidator2" runat="server"
ClientValidationFunction="ValidateAddress" ControlToValidate="dropoff"
CssClass="ErrorMessage" Display="Dynamic"
ErrorMessage="* Invalid drop-off address."
onservervalidate="doAddressValidator_ServerValidate" SetFocusOnError="True"
ValidationGroup="NewCallFormSubmit">*</asp:CustomValidator>
</td>
<td class="style47">
<em>No Old-Town, bar, or party drop-offs!</em></td>
<td class="style16">
</td>
</tr>
<tr>
<td class="style2" align="right">
<asp:Image ID="checkMark" runat="server" ImageUrl="~/img/checkmark.png"
Height="20px" Visible="False" />
</td>
<td class="style44">
<asp:Button ID="submitButton" runat="server" Text="Submit" ValidationGroup="NewCallFormSubmit"
OnClientClick="calcRoute()" onclick="submitButton_Click" />
</td>
<td class="style41">
</td>
<td class="style55">
</td>
<td>
</td>
</tr>
<tr>
<td class="style4" align="right">
Thank you, there are
<asp:TextBox ID="ridesAhead" runat="server" BorderStyle="Dotted"
Font-Bold="False" MaxLength="3" ReadOnly="True" Width="28px"
Font-Underline="False" ontextchanged="TextBox1_TextChanged"
style="text-align: center"></asp:TextBox>
rides ahead of you...</td>
<td class="style8" colspan="2">
</td>
<td style="font-style: italic" class="style5">
</td>
<td class="style46">
We cannot give estimated wait times.</td>
<td class="style5">
</td>
</tr>
<tr>
<td class="style4" align="right">
The driver will call you at
<asp:TextBox ID="phoneDisplay" runat="server" BorderStyle="Dotted" Font-Bold="False"
MaxLength="1" ReadOnly="True" Width="85px" Font-Underline="False"
ontextchanged="phoneDisplay_TextChanged" style="text-align: center"></asp:TextBox>
when they arrive.</td>
<td class="style8" colspan="2">
</td>
<td class="style5">
</td>
<td class="style46">
Please verify the call-back number.</td>
<td class="style5">
</td>
</tr>
<tr>
<td class="style20" align="right">
</td>
<td class="style21" colspan="2">
<asp:Button ID="resetButton" runat="server" Text="New Call"
onclick="resetButton_Click" CausesValidation="False" />
</td>
<td class="style22">
</td>
<td class="style35">
</td>
<td class="style22">
</td>
</tr>
<tr>
<td class="style2" align="right">
</td>
<td colspan="4">
<asp:ValidationSummary ID="ValidationSummary1" runat="server"
CssClass="ErrorMessage" DisplayMode="List"
ValidationGroup="NewCallFormSubmit" />
</td>
<td>
</td>
</tr>
</table>
<table id="NewCallSubTable">
<tr>
<td align="left" valign="top">
<h1>
Pick-Up and Drop-Off Locations
</h1>
<!-- Map Layout -->
<div id="map_canvas" style="width: 500px; height: 500px;"></div>
</td>
<td valign="top" align="left">
<h1>
Current Bar/Party-House Black-List
</h1>
<uc:BlackListForm ID="BlackListForm1" runat="server"></uc:BlackListForm>
</td>
</tr>
</table>
<!-- Dynamic p/u & d/o location validator-->
<script type="text/javascript">
function ValidateAddress(source, args) {
var dropoff = document.getElementById('<%= dropoff.ClientID %>');
var pickup = document.getElementById('<%= pickup.ClientID %>');
if (dropoff.value.length > 80 || pickup.value.length > 80) {
args.IsValid = false;
source.errormessage = "* Address must be 80 chars or less.";
}
else {
args.IsValid = true;
}
}
</script>
<!--MAP SCRIPT-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=<%= Google_API_key%>&sensor=false&v=3.7"></script>
<!--INTELLISENSE HELPER-->
<script src="/Scripts/google-maps-3-vs-1-0.js" type="text/javascript"></script>
<!--MARKER_MANAGER SCRIPT-->
<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js" type="text/javascript"></script>
<!--GEOCODER/DIRECTIONS_DISPLAY SCRIPT-->
<script type="text/javascript">
var infoWindow, geocoder, directionsDisplay, map, transf_address;
var default_zoom = parseInt('<%= default_zoom %>');
var default_point = new google.maps.LatLng(40.575475, -105.084604);
var directionsService = new google.maps.DirectionsService();
var startLL, endLL;
var markers = [];
//Functions
function initialize_map() {
var mapOptions = {
zoom: default_zoom,
center: default_point,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
};
geocoder = new google.maps.Geocoder();
directionsDisplay = new google.maps.DirectionsRenderer();
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function interpretKnownAddress(initAdd) {
if (initAdd.indexOf("old town") != -1) {
return "100 N College Ave, Fort Collins, CO 80524-2444";
}
else if (initAdd.indexOf("csu") != -1) {
return "Colorado State University"
}
else {
return initAdd + ", Fort Collins, Colorado";
}
}
function showPickup() {
var pickup_address = document.getElementById('<%=pickup.ClientID%>').value;
if (pickup_address != '' && pickup_address != null) {
transf_address = interpretKnownAddress(pickup_address);
get_latlong(transf_address, "start");
}
}
function showDropoff() {
var dropoff_address = document.getElementById('<%=dropoff.ClientID%>').value;
if (dropoff_address != '' && dropoff_address != null) {
transf_address = interpretKnownAddress(dropoff_address);
get_latlong(transf_address, "end");
}
}
function get_latlong(srcAddress, markerType) {
if (geocoder && markerType && srcAddress != '') {
var geocoderRequest = {
address: srcAddress
};
geocoder.geocode(geocoderRequest, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
if (markerType == "start") {
var greenA = new google.maps.MarkerImage('/img/MapMarkers/green_MarkerA.png');
marker = new google.maps.Marker({
icon: greenA,
map: map,
shape: {
type: 'poly',
coord: [4, 4, 29, 4, 29, 29, 22, 29, 17, 35, 16, 35, 10, 29, 4, 29, 4, 4]
}
});
markers.push(marker);
startLL = results[0].geometry.location;
}
else if (markerType == "end") {
var redB = new google.maps.MarkerImage('/img/MapMarkers/red_MarkerB.png');
marker = new google.maps.Marker({
map: map,
icon: redB,
shape: {
type: 'poly',
coord: [4, 4, 29, 4, 29, 29, 22, 29, 17, 35, 16, 35, 10, 29, 4, 29, 4, 4]
}
});
markers.push(marker);
endLL = results[0].geometry.location;
}
else {
marker = new google.maps.Marker({
map: map,
icon: 'icon.png',
shape: {
type: 'poly',
coord: [4, 4, 29, 4, 29, 29, 22, 29, 17, 35, 16, 35, 10, 29, 4, 29, 4, 4]
}
});
markers.push(marker);
}
marker.setPosition(results[0].geometry.location)
infoWindow = new google.maps.InfoWindow();
var infoContent = '<strong>' + results[0].formatted_address + '<strong>';
infoWindow.setContent(infoContent);
infoWindow.open(map, marker);
}
});
} //if
else {
alert("Location: " + srcAddress + "could not be found! Please verify this location.");
} //else
} //end get_latlong
function calcRoute() {
var request = {
origin: startLL,
destination: endLL,
provideRouteAlternatives: false,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
else {
alert('Route could not be displayed!')
}
});
var center = new google.maps.LatLng((startLL.lat() + endLL.lat()) / 2, (startLL.lng() + endLL.lng()) / 2);
map.setCenter(center);
} //end calcRoute
// Removes the overlays from the map, but keeps them in the array
function clearMarkers() {
if (markers) {
for (i in markers) {
markers[i].setMap(null);
}
}
}
// Shows any overlays currently in the array
function showMarkers() {
if (markers) {
for (i in markers) {
markers[i].setMap(map);
}
}
}
// Deletes all markers in the array by removing references to them
function deleteMarkers() {
if (markersy) {
for (i in markers) {
markers[i].setMap(null);
}
markers.length = 0;
}
}
//initialization listener
google.maps.event.addDomListener(window, 'load', initialize_map);
</script>
<!--End Google Scripts-->