Google Places Autocomplete Issue with worklight - can't tap

Question

I'm trying to get Google Places Autocomplete API working on WorkLight, but it looks like there is something wrong.

When using my computer's browser, once I start typing the name of a place, the Autocomplete suggestions works fine and I am able to pick one. But when running the app on a mobile device (either Android or iPhone), I am able to see the autocomplete results, but nothing happens when I tap them.

I found some js libraries that makes it easier to get GooglePlaces Autocomplete API working - I mean, except on mobile devices (WorkLight / Cordova App)

I Also found some people reporting that problem with cordova. Some were able to fix the problem by adding a "needclick" class to google's element, but that didn't work for me

Here is a JS Library for testing: http://ubilabs.github.io/geocomplete/

StackOverflow link with related issue:

can't tap on item in google autocomplete list on mobile

Does anyone have any idea for a possible solution?

It'd be helpful if you could provide a demo project... – Idan Adar Jul 10 '14 at 05:28 — Idan Adar, Jul 10 '14 at 05:28

score 2 · Accepted Answer · answered Jul 24 '14 at 19:47

I just tried it and it worked fine for me. This is what I did, let us know if you did anything different

Created a new Hybrid app
Added jquery.geocomplete.js to common/js folder
Updated the index.html code with the code sample provided by the api documentation
Tested on common preview (works fine)
Created an android environment and executed it on a Nexus 7 device(android 4.4.2) - Worked fine.

With "worked fine" I mean that I can see the list of options provided while I type in the text field and I can tap one of the options and it will fill the text field.

This is the code for index.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>googleplaces</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
        <!--
            <link rel="shortcut icon" href="images/favicon.png">
            <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> 
        -->
        <link rel="stylesheet" href="css/main.css">
        <style type="text/css" media="screen">
        form {
            background: url(https://developers.google.com/maps/documentation/places/images/powered-by-google-on-white.png) no-repeat center right;
        }
</style>
        <script>window.$ = window.jQuery = WLJQ;</script>
    </head>
    <body style="display: none;">
        <form>
      <input id="geocomplete" type="text" placeholder="Type in an address" size="90" />
      <input id="find" type="button" value="find" />
    </form>

        <script src="js/initOptions.js"></script>
        <script src="js/main.js"></script>
        <script src="js/messages.js"></script>
        <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="js/jquery.geocomplete.js"></script>

        <script>
  $(function(){

    $("#geocomplete").geocomplete()
      .bind("geocode:result", function(event, result){
        $.log("Result: " + result.formatted_address);
      })
      .bind("geocode:error", function(event, status){
        $.log("ERROR: " + status);
      })
      .bind("geocode:multiple", function(event, results){
        $.log("Multiple: " + results.length + " results found");
      });

    $("#find").click(function(){
      $("#geocomplete").trigger("geocode");
    });



  });
    </script>
    </body>
</html>

score 1 · Answer 2 · answered Jun 28 '15 at 22:41

1

Have you tried to stop propagating the click event?

$( "p" ).click(function( event ) { event.stopPropagation(); // Do something });

answered Jun 28 '15 at 22:41

Diogo Ebert

55
5

score 1 · Answer 3 · answered Jun 29 '15 at 03:29

Try Stopping propagation

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.stopImmediatePropagation demo</title>
  <style>
  p {
    height: 30px;
    width: 150px;
    background-color: #ccf;
  }
  div {
    height: 30px;
    width: 150px;
    background-color: #cfc;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>paragraph</p>
<div>division</div>

<script>
$( "p" ).click(function( event ) {
  event.stopImmediatePropagation();
});
$( "p" ).click(function( event ) {
  // This function won't be executed
  $( this ).css( "background-color", "#f00" );
});
$( "div" ).click(function( event ) {
  // This function will be executed
  $( this ).css( "background-color", "#f00" );
});
</script>

</body>
</html>

score 1 · Answer 4 · answered Mar 30 '16 at 13:45

1

If you use Ionic, the issue is caused by the css attribute "pointer-events:none" set by ionicModal;

Try to add this to you css file:

.pac-container {
     pointer-events:auto;
}

answered Mar 30 '16 at 13:45

Marius Bedrule

41
1
6

Google Places Autocomplete Issue with worklight - can't tap

4 Answers4