[Solved] Google API AutoComplete not working inside ASP.Net UpdatePanel Partial PostBack

Last Reply 4 months ago By pandeyism

Posted 4 months ago

hello,

i have google auto completed extender i have 2 textbox inside the update panel in textbox change event google map api does not load again.

so is there any possibility that google addres api fire each time text focus so if partial post back run and user click in textbox to type it fires the google address api and to run again

       <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&key=AIzaSyCXH-IGTEU4esvnu4S7QQYLpGDLUo"></script>
       <script type="text/javascript">    
       $('<%=txtfrom.ClientID%>').focus(function () {
           $(function () {
               var textbox1 = $(this).find('[id*=txtfrom]');
               var textbox2 = $(this).find('[id*=txtto]');
               ApplyAutoComplete(textbox1);
               ApplyAutoComplete(textbox2);

           });
           function ApplyAutoComplete(input) {
               google.maps.event.addDomListener(window, 'load', function () {
                   var places;
                   for (var i = 0; i < input.length; i++) {
                       var options = { types: ['(regions)'] };
                       places = new google.maps.places.Autocomplete(input[i], options);
                   }
                   google.maps.event.addListener(places, 'place_changed', function () {
                       var place = places.getPlace();
                       var address = place.formatted_address;
                       var mesg = "Address: " + address;
                   });
               });
           }
           var source, destination;
           var directionsDisplay;
           var directionsService = new google.maps.DirectionsService();

           function initialize(textBox) {
               var input = textBox;
               var options = {
                   types: ['(regions)']
                   // Uncomment if restrict for Country.
                   //, componentRestrictions: { country: 'in' }
               };
               var autocomplete = new google.maps.places.Autocomplete(input, options);
           }

           google.maps.event.addDomListener(window, 'load', function () {
               initialize(document.getElementById('<%=txtfrom.ClientID%>'));
               initialize(document.getElementById('<%=txtto.ClientID%>'));

               directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
           })
       });
   </script>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>     
        <script type="text/javascript"> Sys.Application.add_load(BindEvents); </script>
        <div class="form-group col-md-2 padding2">Origin ( City,ST )
            <asp:TextBox ID="txtfrom" runat="server" AutoPostBack="True" OnTextChanged="txtfrom_TextChanged" on ></asp:TextBox>
            <asp:Label ID="Label6" runat="server" Text="Origin is required" CssClass="validation" Visible="false"></asp:Label>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Origin is Required" CssClass="validation" SetFocusOnError="True" ControlToValidate="txtfrom" Display="Dynamic" ValidationGroup="pl"></asp:RequiredFieldValidator>
        </div>
        <div class="form-group col-md-2 padding2">Destination ( City,ST )       
            <asp:TextBox ID="txtto" runat="server" AutoPostBack="True" OnTextChanged="txtto_TextChanged" ></asp:TextBox>
            <asp:Label ID="Llbldistance" runat="server" Text=""></asp:Label><br />
            <asp:Label ID="Llblduration" runat="server" Text=""></asp:Label>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="Destination is required" CssClass="validation" SetFocusOnError="True" ControlToValidate="txtto" Display="Dynamic" ValidationGroup="pl"></asp:RequiredFieldValidator>  
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

i have textbox inside the update panel with textbox google api is associated so google api is only loaded on post back if partial post back occur google api does not load again

Posted 4 months ago

Hi nauna,

Refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&key="></script>
    <script type="text/javascript">
        $(function () {
            SetAutoComplete();
        });
        function SetAutoComplete() {
            $('<%=txtfrom.ClientID%>').focus(function () {
                var textbox1 = $(this).find('[id*=txtfrom]');
                var textbox2 = $(this).find('[id*=txtto]');
                ApplyAutoComplete(textbox1);
                ApplyAutoComplete(textbox2);
            });
        }
        function ApplyAutoComplete(input) {
            google.maps.event.addDomListener(window, 'load', function () {
                var places;
                for (var i = 0; i < input.length; i++) {
                    var options = { types: ['(regions)'] };
                    places = new google.maps.places.Autocomplete(input[i], options);
                }
                google.maps.event.addListener(places, 'place_changed', function () {
                    var place = places.getPlace();
                    var address = place.formatted_address;
                    var mesg = "Address: " + address;
                });
            });
        }
        var source, destination;
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        function initialize(textBox) {
            var input = textBox;
            var options = {
                types: ['(regions)']
            };
            var autocomplete = new google.maps.places.Autocomplete(input, options);
        }
        google.maps.event.addDomListener(window, 'load', function () {
            initialize(document.getElementById('<%=txtfrom.ClientID%>'));
            initialize(document.getElementById('<%=txtto.ClientID%>'));
            directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
        })

        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null) {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                    SetAutoComplete();
                }
            });
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="form-group col-md-2 padding2">
        Origin ( City,ST )
        <asp:TextBox ID="txtfrom" runat="server" AutoPostBack="True" OnTextChanged="change"></asp:TextBox>
        <asp:Label ID="Label6" runat="server" Text="Origin is required" CssClass="validation"
            Visible="false"></asp:Label>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Origin is Required"
            CssClass="validation" SetFocusOnError="True" ControlToValidate="txtfrom" Display="Dynamic"
            ValidationGroup="pl"></asp:RequiredFieldValidator>
    </div>
    <div class="form-group col-md-2 padding2">
        Destination ( City,ST )
        <asp:TextBox ID="txtto" runat="server" AutoPostBack="True"></asp:TextBox>
        <asp:Label ID="Llbldistance" runat="server" Text=""></asp:Label><br />
        <asp:Label ID="Llblduration" runat="server" Text=""></asp:Label>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="Destination is required"
            CssClass="validation" SetFocusOnError="True" ControlToValidate="txtto" Display="Dynamic"
            ValidationGroup="pl"></asp:RequiredFieldValidator>
    </div>
    </form>
</body>
</html>

Screenshot