[Solved] Google Place Autocomplete not working after partial PostBack in ASP.Net

Last Reply 11 days ago By dharmendr

Posted 13 days ago

I have a web app that has a tree and a webtab contaol on it. When the users click a site the webtab gets updated with the current info.

I also have a textbox bound to the google autocomplete address. The problem I'm having is when the page loads the first time the google textbox works, but once I click on a site and the updatepanel updates, the google address textbox will not work.

I have found some articel talking about browser losing connection to the controls after the update and I have added the code to rebind them, but for some reason it not working for me. 

Below is the code I'm using can anyone see what I'm doing wrong? 

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmcmiQCp72J7WqC3orQpCgtW23DwXgOcs&sensor=false&libraries=places"></script> 
<script type="text/javascript">
     $(function () {
        ApplyAutoComplete();
     });
     var prm = Sys.WebForms.PageRequestManager.getInstance();
     prm.add_endRequest(function () {
         ApplyAutoComplete();
     });

     function ApplyAutoComplete() {
         google.maps.event.addDomListener(window, 'load', function () {
             var places = new google.maps.places.Autocomplete(document.getElementById('TextBox1'));
             google.maps.event.addListener(places, 'place_changed', function () {
                 var place = places.getPlace();
                 var address = place.formatted_address;
                 var latitude = place.geometry.location.lat();
                 var longitude = place.geometry.location.lng();
                 var mesg = "Address: " + address;
                 var addsplit = address.split(",");
                 var StatCity = addsplit[2];
                 var City = addsplit[1].trim();
                 var address1 = addsplit[0];
                 var Zip = addsplit[2].substring(4, 10).trim();

                 mesg += "\nLatitude: " + latitude;
                 mesg += "\nLongitude: " + longitude;
                 mesg += "\nAddess: " + addsplit[0];
                 mesg += "\nCity: " + addsplit[1];
                 mesg += "\nState: " + StatCity.substring(0, 3);
                 mesg += "\nZip: " + addsplit[2].substring(4, 10);
                 //alert(mesg);
                 
                 var text1 = document.getElementById("<%=SiteStreetAddress.ClientID%>");
                 text1.value = address1;
                 var citytext = document.getElementById('<%=SitePostalCity.ClientID%>');
                 citytext.value = City;
                 var zipcode = document.getElementById("<%=SitePostalZip.ClientID%>");
                 zipcode.value = Zip;

                 var lun = document.getElementById("<%=GISLun.ClientID%>");
                 lun.value = longitude;
                 var lat = document.getElementById("<%=GISLat.ClientID%>");
                 lat.value = latitude;

                 var ddl = $find('<%=SiteState.ClientID%>');

                 var i;
                 var iindex = 0;
                 var itext = "";
                 for (i = 0; i < ddl.get_items().getLength() ; i++) {
                     var wddItem = ddl.get_items().getItem(i);
                     if (wddItem.get_text().trim() == StatCity.substring(0, 3).trim()) {
                         iindex = i;
                         itext = wddItem.get_text().trim();
                         break;
                     }
                 }
                 ddl.selectItemByIndex(iindex, true, true);                                 
             });
         });         
     }
 </script> 

 

You are viewing reply posted by: dharmendr 11 days ago.
Posted 11 days ago

Hi case,

Check this example. Now please take its reference and correct your code.

HTML

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" />
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_Key&libraries=places"></script>
    <script type="text/javascript">
        $(function () {
            ApplyAutoComplete();
        });
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null) {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                    ApplyAutoComplete();
                }
            });
        };

        function ApplyAutoComplete() {
            google.maps.event.addDomListener(window, 'load', Autocomplete());
        }

        function Autocomplete() {
            var places = new google.maps.places.Autocomplete(document.getElementById('TextBox1'));
            google.maps.event.addListener(places, 'place_changed', function () {
                var place = places.getPlace();
                var address = place.formatted_address;
                var latitude = place.geometry.location.lat();
                var longitude = place.geometry.location.lng();
                var mesg = "Address: " + address;
                var addsplit = address.split(",");
                var StatCity = addsplit[2];
                var City = addsplit[1].trim();
                var address1 = addsplit[0];
                var Zip = addsplit[2].substring(4, 10).trim();

                mesg += "\nLatitude: " + latitude;
                mesg += "\nLongitude: " + longitude;
                mesg += "\nAddess: " + addsplit[0];
                mesg += "\nCity: " + addsplit[1];
                mesg += "\nState: " + StatCity.substring(0, 3);
                mesg += "\nZip: " + addsplit[2].substring(4, 10);
                alert(mesg);
                // Your rest code.
            });
        }
    </script>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static" Height="20px" Width="301px"></asp:TextBox>
            <asp:Button ID="Button1" Text="Save" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Screenshot