1

I want to implement the simple autocomplete function from google, as simple as in their example: Google Autocomplete Example

I created a random html page and tested the code with my API key, it worked fine.

Now I am struggling to implement this code into my flask application. I do not get any errors, but while I am entering a cityname there is no autocomplete and of course if I submit what I entered I get an error:

main.js:38 Uncaught TypeError: Cannot read property 'length' of undefined

I am loading my Jquery and my JS in my basic.html at the bottom in the footer (every of my other pages extends this basic html, because there is also the navbar and head):

{% block footer %}
<div class="container-fluid" id="footer">
<div class="col-sm-4">
<p> Footer Element </p>
<p> Footer Element </p>
<p> Footer Element </p>
<p> Footer Element </p>
</div>

</div> 

<script type=text/javascript src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>

<script type=text/javascript src="{{ url_for('static', filename='js/bootstrap.js') }}"></script>

<script type=text/javascript src="{{ url_for('static', filename='js/main.js') }}"></script>

{% endblock %}
{% block googlemapjs %}{% endblock %}

In my main.js there is only the code from the google example and nothing more. And in my zimmer_einstellen.html I am trying to implement the autocomplete function:

{% extends "basic.html" %} 

{% block content %}
<div class = "container zimmer_einstellen">

<table id="address">
  <tr>
    <td class="label">Street address</td>
    <td class="slimField"><input class="field" id="street_number"
          disabled="true"></input></td>
    <td class="wideField" colspan="2"><input class="field" id="route"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">City</td>
    <td class="wideField" colspan="3"><input class="field" id="locality"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">State</td>
    <td class="slimField"><input class="field"
          id="administrative_area_level_1" disabled="true"></input></td>
    <td class="label">Zip code</td>
    <td class="wideField"><input class="field" id="postal_code"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">Country</td>
    <td class="wideField" colspan="3"><input class="field"
          id="country" disabled="true"></input></td>
  </tr>
</table>
</div>

{% endblock %}

{% block googlemapjs %}<script src="https://maps.googleapis.com/maps/api/js?key=HEREISAPIKEY&libraries=places&callback=initAutocomplete"
    async defer></script>{% endblock %}

I have already tryed so many possibilities to implement it in flask but nothing worked, the code itself is okay because on a single html page it works fine. What am I missing?

EDIT:

I just tested a simple alert() function onload, which didnt worked aswell, so jQuery is not recognized at all, but the path is correct (I inspected the path via HTML view in browser)

EDIT 2:

Okay so the problem is weird, my jQuery is only recognized on the basic.html itself but on none of the pages which extend the basic html. How do I fix this?

Roman
  • 3,563
  • 5
  • 48
  • 104
  • It's unclear what is 'my jquery'. look at the html sourse to see if jinja2 is filling is extendig basic.html in onther templates properly (right-click on the page in any browser to 'view source'). – GG_Python Jun 25 '16 at 04:23

1 Answers1

0

You're not calling the geolocate() function in your html. I don't see how it will work on a single html page either.

From the googles example, you need to add this:

<div id="locationField">
      <input id="autocomplete" placeholder="Enter your address"
             onFocus="geolocate()" type="text"></input>
</div>

Also, as already discussed in the previous question, this is not a jQuery issue. And AFAIK Google APIs do work on localhost.

Can you perhaps tell what the developer console says. (Open page --> Open console log (f12 in chrome) --> refresh page)

oxalorg
  • 2,768
  • 1
  • 16
  • 27
  • already done everything, developer console gives no errors. It only gives the mentioned error at the beginning when I submit the example and that only because autocomplete is not workling and I cant select anything, ofcourse its then this error, I am sure its because of localhost host, because I used the exact same example on a random html page which I created localy and it worked, so the only thing changed is, the localhost factor – Roman Jun 26 '16 at 08:50
  • @Roman let us know if that works then. Can't think of anything else atm. – oxalorg Jun 26 '16 at 08:54
  • I will work on this tomorrow again, probably I will upload it to heroku, so there will be a live version, thanks for your help guys. – Roman Jun 26 '16 at 21:12
  • Okay, it seems that it works perfectly while the user is annonymous (not logged in) But if a user loggs in and the autocomplete function is on a page which can be accessed only by a user who is registered, it does not work. – Roman Jun 27 '16 at 10:26
  • It does not work on any other page which can only be accessed by a registered user, it only works on pages where no login is required – Roman Jun 27 '16 at 10:30
  • @Roman That is extremely weird. I don't think this is an issue with the google api. Does the console say anything? Can you give the link to the app engine? – oxalorg Jun 27 '16 at 10:32
  • It seems it works only on the localhost:5000 and on no other route, give me a minute, I upload it to heroku – Roman Jun 27 '16 at 10:34
  • It has something to do with the URL and routes, now I uploaded it: http://monteur-awesome.herokuapp.com/ – Roman Jun 27 '16 at 10:43
  • But now the form on the index does not work aswell, while on my localhost it does. But on my localhost only the form on the index works. On other routes the autocomplete does not worl f.e. (click on the room image itself or on "suchen") there are also these forms – Roman Jun 27 '16 at 10:44
  • Probably it is caused because of insecure protocol, currently working on this – Roman Jun 27 '16 at 10:50
  • @Roman The console is clearly displaying the error. `getCurrentPosition() and watchPosition() are deprecated on insecure origins.`. That is because Google Chrome does not support location features on http, you need https. You should try using it on firefox for now. – oxalorg Jun 27 '16 at 10:50
  • yeah that is true while I uploaded it, I noticed this already, but on localhost there is no such an error – Roman Jun 27 '16 at 10:53
  • Now its secure, but still not working, not even on the index. In localhost it works only on the index – Roman Jun 27 '16 at 11:04