Autocomplete field not working in case of collection type

[SamyDahmani]

Hello,

I'm trying to use the autocomplete form as collection to be able to add many addresses, (OneToMany relation), the field is displayed but the autocomplete is not working.

$builder->add('addresses', 'collection', array('type' => new AddressFormType(), 'allow_add' => true, 'allow_delete' => true));

The autocomplete is working fine whith the following: $builder->add('addresses', new AddressFormType());

How can I make it working with collection type ?

Thank you.

[egeloen]

@SamyDahmani Can you provide more info about your AddressFormType?

[SamyDahmani]

Hi @egeloen

Here is my AddressFormType;

   use Ivory\GoogleMap\Places\AutocompleteComponentRestriction;

   class AddressFormType extends AbstractType
   {
      public function buildForm(FormBuilderInterface $builder, array $options)
       {
         $builder->add('Address','places_autocomplete', array(
         'prefix' => 'js_prefix_',
         'async' => false,
         'language' => 'fr',
         'component_restrictions' => array(
         AutocompleteComponentRestriction::COUNTRY => 'fr'))
            );
       }

     public function getName()
     {
        return 'sw_company_address';
     }
 }

[egeloen]

I need to investigate as I though you're using the async mode (which is buggy) but it is not the case... Doesn't it work with an initial collection or when you try to append a new item in the collection or both?

[SamyDahmani]

It is not working in both cases.

I compared the HTML codes of both cases (working and not working) and I noticed that in the not working one two lines are missing: < script src="http://maps.googleapis.com/maps/api/js?v=3&amp;libraries=places&amp;language=fr&amp;sensor=false" type="text/javascript"> < script src="http://maps.gstatic.com/cat_js/intl/fr_ALL/mapfiles/api-3/16/13/%7Bmain,places%7D.js" type="text/javascript">

I don't know if it is the cause but I tried to add them manually but it doesn't solve the issue.

[egeloen]

I think I have found the issue but will not be easy to fix... Can you confirm the missing script tags are rendered in the prototype of the form used to add fields on the fly? Or are you rendering a map on the same page?

[SamyDahmani]

No, the missing script tags are not rendered in the prototype and I'm not rendering a map on the same page.

[egeloen]

I don't understand what's going on... The form type calls an helper which renders the google map api loading (See https://github.com/egeloen/IvoryGoogleMapBundle/blob/master/Form/Type/PlacesAutocompleteType.php#L138 and https://github.com/egeloen/ivory-google-map/blob/master/src/Ivory/GoogleMap/Helper/Places/AutocompleteHelper.php#L168)

If the google map api is not loaded it can only come from the fact it has already be loaded earlier but in any case, it should not break anything as the api is already loaded. Can you debug $this->getAutocompleteHelper()->getApiHelper()->isLoaded() just before this line https://github.com/egeloen/IvoryGoogleMapBundle/blob/master/Form/Type/PlacesAutocompleteType.php#L138 ?

[SamyDahmani]

I added the new line but I didn't notice any new thing in the rendered HTML page. What is expected by adding this new line ?

[egeloen]

Basically, I would like you dump the result via var_dump(/* the line */);die; and gives me the output :) I would like to know if the result is true or false.

[SamyDahmani]

Ah Ok. The result is: boolean false

[egeloen]

Definitively not what I would like to hear because I still don't understand what's going on... Can you copy paste the generated collection?

[SamyDahmani]

Here is the generated collection:

<div id="sw_CompanyBundle_CompanyFormtype_addresses" data-prototype="<div><label class=&quot;required&quot;>__name__label__</label><div id=&quot;sw_CompanyBundle_CompanyFormtype_addresses___name__&quot;><div><label for=&quot;sw_CompanyBundle_CompanyFormtype_addresses___name___Adresse&quot; class=&quot;required&quot;>Adresse</label><input type=&quot;text&quot; placeholder=&quot;&quot; name=&quot;ws_CompanyBundle_CompanyFormtype[addresses][__name__][Adresse]&quot; id=&quot;sw_CompanyBundle_CompanyFormtype_addresses___name___Adresse&quot; value=&quot;&quot; /><script type=&quot;text/javascript&quot;>
function load_ivory_google_map_api () { google.load(&quot;maps&quot;, &quot;3&quot;, {&quot;other_params&quot;:&quot;libraries=places&amp;language=fr&amp;sensor=false&quot;}); };
</script><script type=&quot;text/javascript&quot; src=&quot;//www.google.com/jsapi?callback=load_ivory_google_map_api&quot;></script><script type=&quot;text/javascript&quot;>
js_prefix_53a89d5e7c1fa099115153 = new google.maps.places.Autocomplete(document.getElementById('sw_CompanyBundle_CompanyFormtype_addresses___name___Adresse'), {&quot;componentRestrictions&quot;:{&quot;country&quot;:&quot;fr&quot;}});
</script></div></div></div>">
    <div>
        <label class="required">
            <h4 style="text-align: center; border: 1px solid #999; border-radius: 5px 5px 5px 5px; padding: 10px;">Adresse 1</h4>
        </label>
        <div id="sw_CompanyBundle_CompanyFormtype_addresses_0">
            <div>
                <label for="sw_CompanyBundle_CompanyFormtype_addresses_0_Adresse" class="required">Adresse</label><input type="text" placeholder="" name="ws_CompanyBundle_CompanyFormtype[addresses][0][Adresse]" id="sw_CompanyBundle_CompanyFormtype_addresses_0_Adresse" value="">
                <script type="text/javascript">
                    function load_ivory_google_map_api () { google.load("maps", "3", {"other_params":"libraries=places&language=fr&sensor=false"}); };
                </script>
                <script type="text/javascript" src="//www.google.com/jsapi?callback=load_ivory_google_map_api"></script>
                <script type="text/javascript">
                    js_prefix_53a89d5e7c1fa099115153 = new google.maps.places.Autocomplete(document.getElementById('sw_CompanyBundle_CompanyFormtype_addresses_0_Adresse'), {"componentRestrictions":{"country":"fr"}});
                </script>
            </div>
        </div>
    </div>
    <a href="#" id="ajout_Adresse" class="btn">Ajouter une adresse</a>
</div>

[egeloen]

Are you sure there is nothing on your page which is broken because the generated code seems working (See http://jsfiddle.net/y6Q6Y/)

[SamyDahmani]

I'm really surprised :(, what could be the reason ?

[egeloen]

Good question :) The browser debugger does show you any error?

[SamyDahmani]

I can see the following errors:

Uncaught TypeError: undefined is not a function %7Bmain,places%7D.js:55
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. ajouter:1
Uncaught TypeError: undefined is not a function %7Bcommon,util,controls,places_impl%7D.js:1
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/Symfony/web/bundles/bazingageocoder/images/geocoder_marker.png
Uncaught TypeError: undefined is not a function 

[egeloen]

Can you try to replace the whole code of Ivory\GoogleMap\Helper\ApiHelper::render by:

return '<script type="text/javascript" src="//maps.google.com/maps/api/js?libraries=places&language=fr&sensor=false"></script>';

I'm wondering if there is an issue about using the google loader in order to load the lib when we don't use the async mode.

[SamyDahmani]

When I try to replace the line $view->vars['javascripts'] = $this->getAutocompleteHelper()->renderJavascripts($autocomplete);

I got the following error:

Uncaught ReferenceError: google is not defined ajouter:2
Variable "javascripts" does not exist in IvoryGoogleMapBundle:Form:places_autocomplete_widget.html.twig at line 2

I tried to add the line just after the line that you suggested to replace, I didn't have errors but no improvement regarding the autocomplete functionality and I still see the following errors in my browser debugger

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. ajouter:1
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/Symfony/web/bundles/bazingageocoder/images/geocoder_marker.png

[egeloen]

Have you tried to replace the ApiHelper::render method by the line I have given?

Your have replaced $view->vars['javascripts'] = $this->getAutocompleteHelper()->renderJavascripts($autocomplete); with what?

[SamyDahmani]

I replaced

$view->vars['javascripts'] = $this->getAutocompleteHelper()->renderJavascripts($autocomplete);

by

return '<script type="text/javascript" src="//maps.google.com/maps/api/js?libraries=places&language=fr&sensor=false"></script>';

[egeloen]

It is normal you get the error because you should not replace this line but the method content of the ApiHelper::render.

Basically, you should go to vendor/egeloen/google-map/src/Ivory/GoogleMap/Helper/ApiHelper.php and replace the render method content with the line I have given.

[SamyDahmani]

I replaced the content of the render method but still not working :( I checked the source code and I can see that the line is added.

[egeloen]

Is it possible you copy/paste the whole html content of your page? Or at least, send it to me by email if you don't want that somebody can see it.

[SamyDahmani]

here is the whole html content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" href="/Symfony/web/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="/Symfony/web/css/bootstrap-combined.min.css" type="text/css" />
    <link rel="stylesheet" href="/Symfony/web/css/bootstrap-menu.css" type="text/css" />
    <link rel="stylesheet" href="/Symfony/web/css/bootstrap-responsive.css" type="text/css" />
    <link rel="stylesheet" href="/Symfony/web/css/social-buttons.css" type="text/css" />
    <link rel="stylesheet" href="/Symfony/web/css/global.css" type="text/css" />
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
</head>

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script type="text/javascript" href="/Symfony/web/js/html5shiv.js"> </script>
<![endif]-->

<!-- Fav and touch icons -->

<body>

<div class="container" style="margin-top:60px;">

    <div class="row-fluid" style="margin-top: 40px; padding=10px; min-height: 400px;">
        <form class="form-horizontal" method="post" >
            <div><label class="required">Adresses &amp; Contacts :</label><div id="sw_CompanyBundle_CompanyFormtype_addresses" data-prototype="&lt;div&gt;&lt;label class=&quot;required&quot;&gt;__name__label__&lt;/label&gt;&lt;div id=&quot;sw_CompanyBundle_CompanyFormtype_addresses___name__&quot;&gt;&lt;div&gt;&lt;label for=&quot;sw_CompanyBundle_CompanyFormtype_addresses___name___Adresse&quot; class=&quot;required&quot;&gt;Adresse&lt;/label&gt;&lt;input type=&quot;text&quot; placeholder=&quot;Ex:1 Rue Didouche Mourad, Alger&quot; name=&quot;sw_CompanyBundle_CompanyFormtype[addresses][__name__][Adresse]&quot; id=&quot;sw_CompanyBundle_CompanyFormtype_addresses___name___Adresse&quot; value=&quot;&quot; /&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;//maps.google.com/maps/api/js?libraries=places&amp;language=fr&amp;sensor=false&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;
js_prefix_53a9490c9c428099453505 = new google.maps.places.Autocomplete(document.getElementById(&#039;sw_CompanyBundle_CompanyFormtype_addresses___name___Adresse&#039;), {&quot;componentRestrictions&quot;:{&quot;country&quot;:&quot;dz&quot;}});
&lt;/script&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;"></div></div><input type="hidden" id="sw_CompanyBundle_CompanyFormtype__token" name="sw_CompanyBundle_CompanyFormtype[_token]" value="_vECuLjhvKHciBXn-qekF2RLm0TheCJ2WYhdYd6L80M" />
        </form>
    </div>

    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var $container = $('div#sw_CompanyBundle_CompanyFormtype_addresses');
            var $lienAjout = $('<a href="#" id="ajout_Adresse" class="btn">Ajouter une adresse</a>');
            $lienAjout.click(function(e) {
                ajouterAdresse($container);
                e.preventDefault(); 
                return false;
            });

            var index = $container.find(':input').length;
.
            if (index == 0) {
                ajouterAdresse($container);
            } else {
                $container.children('div').each(function() {
                    ajouterLienSuppression($(this));
                });
            }
            $container.append($lienAjout);
            function ajouterAdresse($container) {

                var $prototype = $($container.attr('data-prototype').replace(/__name__label__/g, '<h4 style="text-align: center; border: 1px solid #999; border-radius: 5px 5px 5px 5px; padding: 10px;">Adresse ' + (index+1) + '</h4>')
                        .replace(/__name__/g, index));

                if (index != 0){
                    ajouterLienSuppression($prototype);
                }

                $container.append($prototype);
                index++;
            }

            function ajouterLienSuppression($prototype) {
                $lienSuppression = $('<a href="#" class="btn btn-danger">Supprimer</a>');
                $prototype.append($lienSuppression);

                $lienSuppression.click(function(e) {
                    $prototype.remove();
                    e.preventDefault();
                    return false;
                });
            }
        });

    </script>

</div>
<!-- BEGIN FOOTER -->
<footer>
</footer>
<script type="text/javascript" href="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="/Symfony/web/js/global.js" type="text/javascript"></script>
<!-- Call jQuery 1.9, call bootstrap.js and run the carousel when the DOM is ready. Slide every 10 seconds. -->
<script src="/Symfony/web/js/jquery.min.js" type="text/javascript"></script>
<script src="/Symfony/web/js/jquery.js" type="text/javascript"></script>
<script src="/Symfony/web/js/bootstrap.min.js" type="text/javascript"></script>

<div id="sfwdt8f7dac" class="sf-toolbar" style="display: none"></div><script>/*<![CDATA[*/    Sfjs = (function() {        "use strict";        var noop = function() {},            profilerStorageKey = 'sf2/profiler/',            request = function(url, onSuccess, onError, payload, options) {                var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');                options = options || {};                options.maxTries = options.maxTries || 0;                xhr.open(options.method || 'GET', url, true);                xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');                xhr.onreadystatechange = function(state) {                    if (4 !== xhr.readyState) {                        return null;                    }                    if (xhr.status == 404 && options.maxTries > 1) {                        setTimeout(function(){                            options.maxTries--;                            request(url, onSuccess, onError, payload, options);                        }, 500);                        return null;                    }                    if (200 === xhr.status) {                        (onSuccess || noop)(xhr);                    } else {                        (onError || noop)(xhr);                    }                };                xhr.send(payload || '');            },            hasClass = function(el, klass) {                return el.className.match(new RegExp('\\b' + klass + '\\b'));            },            removeClass = function(el, klass) {                el.className = el.className.replace(new RegExp('\\b' + klass + '\\b'), ' ');            },            addClass = function(el, klass) {                if (!hasClass(el, klass)) { el.className += " " + klass; }            },            getPreference = function(name) {                if (!window.localStorage) {                    return null;                }                return localStorage.getItem(profilerStorageKey + name);            },            setPreference = function(name, value) {                if (!window.localStorage) {                    return null;                }                localStorage.setItem(profilerStorageKey + name, value);            };        return {            hasClass: hasClass,            removeClass: removeClass,            addClass: addClass,            getPreference: getPreference,            setPreference: setPreference,            request: request,            load: function(selector, url, onSuccess, onError, options) {                var el = document.getElementById(selector);                if (el && el.getAttribute('data-sfurl') !== url) {                    request(                        url,                        function(xhr) {                            el.innerHTML = xhr.responseText;                            el.setAttribute('data-sfurl', url);                            removeClass(el, 'loading');                            (onSuccess || noop)(xhr, el);                        },                        function(xhr) { (onError || noop)(xhr, el); },                        '',                        options                    );                }                return this;            },            toggle: function(selector, elOn, elOff) {                var i,                    style,                    tmp = elOn.style.display,                    el = document.getElementById(selector);                elOn.style.display = elOff.style.display;                elOff.style.display = tmp;                if (el) {                    el.style.display = 'none' === tmp ? 'none' : 'block';                }                return this;            }        }    })();/*]]>*/</script><script>/*<![CDATA[*/    (function () {                Sfjs.load(            'sfwdt8f7dac',            '/Symfony/web/app_dev.php/_wdt/8f7dac',            function(xhr, el) {                el.style.display = -1 !== xhr.responseText.indexOf('sf-toolbarreset') ? 'block' : 'none';                if (el.style.display == 'none') {                    return;                }                if (Sfjs.getPreference('toolbar/displayState') == 'none') {                    document.getElementById('sfToolbarMainContent-8f7dac').style.display = 'none';                    document.getElementById('sfToolbarClearer-8f7dac').style.display = 'none';                    document.getElementById('sfMiniToolbar-8f7dac').style.display = 'block';                } else {                    document.getElementById('sfToolbarMainContent-8f7dac').style.display = 'block';                    document.getElementById('sfToolbarClearer-8f7dac').style.display = 'block';                    document.getElementById('sfMiniToolbar-8f7dac').style.display = 'none';                }            },            function(xhr) {                if (xhr.status !== 0) {                    confirm('An error occurred while loading the web debug toolbar (' + xhr.status + ': ' + xhr.statusText + ').\n\nDo you want to open the profiler?') && (window.location = '/Symfony/web/app_dev.php/_profiler/8f7dac');                }            },            {'maxTries': 5}        );    })();/*]]>*/</script>
</body>
</html>

[SamyDahmani]

and here is the whole code of the html page for the working case (not collection):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

            <link rel="stylesheet" href="/Symfony/web/css/bootstrap.css" type="text/css" />
        <link rel="stylesheet" href="/Symfony/web/css/bootstrap-combined.min.css" type="text/css" />
        <link rel="stylesheet" href="/Symfony/web/css/bootstrap-menu.css" type="text/css" />
        <link rel="stylesheet" href="/Symfony/web/css/bootstrap-responsive.css" type="text/css" />
        <link rel="stylesheet" href="/Symfony/web/css/social-buttons.css" type="text/css" />
        <link rel="stylesheet" href="/Symfony/web/css/global.css" type="text/css" />
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
    </head>

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script type="text/javascript" href="/Symfony/web/js/html5shiv.js"> </script>
<![endif]-->

<!-- Fav and touch icons -->

<body>

<div class="container" style="margin-top:60px;">

    <div class="row-fluid" style="margin-top: 40px; padding=10px; min-height: 400px;">
                    <form class="form-horizontal" method="post" >
               <div><label class="required">addresses</label><div id="sw_CompanyBundle_CompanyFormtype_addresses"><div><label for="sw_CompanyBundle_CompanyFormtype_addresses_Adresse" class="required">Adresse</label><input type="text" placeholder="Ex:1 Rue Didouche Mourad, Alger" name="sw_CompanyBundle_CompanyFormtype[addresses][Adresse]" id="sw_CompanyBundle_CompanyFormtype_addresses_Adresse" value="" /><script type="text/javascript" src="//maps.google.com/maps/api/js?libraries=places&language=fr&sensor=false"></script><script type="text/javascript">
js_prefix_53a94aa9544db335481574 = new google.maps.places.Autocomplete(document.getElementById('sw_CompanyBundle_CompanyFormtype_addresses_Adresse'), {"componentRestrictions":{"country":"dz"}});
</script></div></div></div><input type="hidden" id="sw_CompanyBundle_CompanyFormtype__token" name="sw_CompanyBundle_CompanyFormtype[_token]" value="_vECuLjhvKHciBXn-qekF2RLm0TheCJ2WYhdYd6L80M" />
              </form>
            </div>
 <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var $container = $('div#sw_CompanyBundle_CompanyFormtype_addresses');
            var $lienAjout = $('<a href="#" id="ajout_Adresse" class="btn">Ajouter une adresse</a>');
            $lienAjout.click(function(e) {
                ajouterAdresse($container);
                e.preventDefault(); 
                return false;
            });

            var index = $container.find(':input').length;
.
            if (index == 0) {
                ajouterAdresse($container);
            } else {
                $container.children('div').each(function() {
                    ajouterLienSuppression($(this));
                });
            }
            $container.append($lienAjout);
            function ajouterAdresse($container) {

                var $prototype = $($container.attr('data-prototype').replace(/__name__label__/g, '<h4 style="text-align: center; border: 1px solid #999; border-radius: 5px 5px 5px 5px; padding: 10px;">Adresse ' + (index+1) + '</h4>')
                        .replace(/__name__/g, index));

                if (index != 0){
                    ajouterLienSuppression($prototype);
                }

                $container.append($prototype);
                index++;
            }

            function ajouterLienSuppression($prototype) {
                $lienSuppression = $('<a href="#" class="btn btn-danger">Supprimer</a>');
                $prototype.append($lienSuppression);

                $lienSuppression.click(function(e) {
                    $prototype.remove();
                    e.preventDefault();
                    return false;
                });
            }
        });

    </script>

</div>
<!-- BEGIN FOOTER -->
<footer>
</footer>
<script type="text/javascript" href="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="/Symfony/web/js/global.js" type="text/javascript"></script>
<!-- Call jQuery 1.9, call bootstrap.js and run the carousel when the DOM is ready. Slide every 10 seconds. -->
<script src="/Symfony/web/js/jquery.min.js" type="text/javascript"></script>
<script src="/Symfony/web/js/jquery.js" type="text/javascript"></script>
<script src="/Symfony/web/js/bootstrap.min.js" type="text/javascript"></script>

<div id="sfwdt8f7dac" class="sf-toolbar" style="display: none"></div><script>/*<![CDATA[*/    Sfjs = (function() {        "use strict";        var noop = function() {},            profilerStorageKey = 'sf2/profiler/',            request = function(url, onSuccess, onError, payload, options) {                var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');                options = options || {};                options.maxTries = options.maxTries || 0;                xhr.open(options.method || 'GET', url, true);                xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');                xhr.onreadystatechange = function(state) {                    if (4 !== xhr.readyState) {                        return null;                    }                    if (xhr.status == 404 && options.maxTries > 1) {                        setTimeout(function(){                            options.maxTries--;                            request(url, onSuccess, onError, payload, options);                        }, 500);                        return null;                    }                    if (200 === xhr.status) {                        (onSuccess || noop)(xhr);                    } else {                        (onError || noop)(xhr);                    }                };                xhr.send(payload || '');            },            hasClass = function(el, klass) {                return el.className.match(new RegExp('\\b' + klass + '\\b'));            },            removeClass = function(el, klass) {                el.className = el.className.replace(new RegExp('\\b' + klass + '\\b'), ' ');            },            addClass = function(el, klass) {                if (!hasClass(el, klass)) { el.className += " " + klass; }            },            getPreference = function(name) {                if (!window.localStorage) {                    return null;                }                return localStorage.getItem(profilerStorageKey + name);            },            setPreference = function(name, value) {                if (!window.localStorage) {                    return null;                }                localStorage.setItem(profilerStorageKey + name, value);            };        return {            hasClass: hasClass,            removeClass: removeClass,            addClass: addClass,            getPreference: getPreference,            setPreference: setPreference,            request: request,            load: function(selector, url, onSuccess, onError, options) {                var el = document.getElementById(selector);                if (el && el.getAttribute('data-sfurl') !== url) {                    request(                        url,                        function(xhr) {                            el.innerHTML = xhr.responseText;                            el.setAttribute('data-sfurl', url);                            removeClass(el, 'loading');                            (onSuccess || noop)(xhr, el);                        },                        function(xhr) { (onError || noop)(xhr, el); },                        '',                        options                    );                }                return this;            },            toggle: function(selector, elOn, elOff) {                var i,                    style,                    tmp = elOn.style.display,                    el = document.getElementById(selector);                elOn.style.display = elOff.style.display;                elOff.style.display = tmp;                if (el) {                    el.style.display = 'none' === tmp ? 'none' : 'block';                }                return this;            }        }    })();/*]]>*/</script><script>/*<![CDATA[*/    (function () {                Sfjs.load(            'sfwdt8f7dac',            '/Symfony/web/app_dev.php/_wdt/8f7dac',            function(xhr, el) {                el.style.display = -1 !== xhr.responseText.indexOf('sf-toolbarreset') ? 'block' : 'none';                if (el.style.display == 'none') {                    return;                }                if (Sfjs.getPreference('toolbar/displayState') == 'none') {                    document.getElementById('sfToolbarMainContent-8f7dac').style.display = 'none';                    document.getElementById('sfToolbarClearer-8f7dac').style.display = 'none';                    document.getElementById('sfMiniToolbar-8f7dac').style.display = 'block';                } else {                    document.getElementById('sfToolbarMainContent-8f7dac').style.display = 'block';                    document.getElementById('sfToolbarClearer-8f7dac').style.display = 'block';                    document.getElementById('sfMiniToolbar-8f7dac').style.display = 'none';                }            },            function(xhr) {                if (xhr.status !== 0) {                    confirm('An error occurred while loading the web debug toolbar (' + xhr.status + ': ' + xhr.statusText + ').\n\nDo you want to open the profiler?') && (window.location = '/Symfony/web/app_dev.php/_profiler/8f7dac');                }            },            {'maxTries': 5}        );    })();/*]]>*/</script>
</body>
</html>

[egeloen]

I have reproduced the issue on my computer. The issue is about jQuery.append which is not able to load the google map library... I will try to find a workaround...

[SamyDahmani]

Ok, thank you.

[egeloen]

I just read other issues and it's strange it is not working because I and others have already loading a map on the fly with jQuery.append. Can you try to configure the autocomplete as async?

[egeloen]

Btw, don't forget to reset the changes you have made in the vendor directory.

[SamyDahmani]

Yes, it is working with async = true.

the async mode is to display a map in the same time, right ?

Thank you for your help.

[egeloen]

No, the async mode is to defer the rendering of the feature when the google map library is loaded. (currently rendering a map and an autocomplete on the same page using the async mode is broken).

Technically, the code related to the feature is wrapped in a js function and this function is called as callback when the google map lib has finished to load. It is usefull when you try to render the feature on the fly in your document. For example, you render a map or an autocomplete using AJAX. But regarding your issue, it is usefull for form collection too :)

Closing as the issue is fixed :)

[SamyDahmani]

Thank you for your explanation and your help

[sourabh1801]

Hi I am getting attached error in my code

• I am getting error - "cannot read property 'replace' or undefined