Google Places Autocomplete Issue with worklight - can't tap

Ask Time：2014-07-09T06:24:02 Author：André Perazzi

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?

Author:André Perazzi，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/24642453/google-places-autocomplete-issue-with-worklight-cant-tap

Leandro David :

I just tried it and it worked fine for me. This is what I did, let us know if you did anything different\n\n\nCreated a new Hybrid app\nAdded jquery.geocomplete.js to common/js folder\nUpdated the index.html code with the code sample provided by the api\ndocumentation\nTested on common preview (works fine)\nCreated an android environment and executed it on a Nexus 7 device(android 4.4.2) -\nWorked fine.\n\n\nWith \"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.\n\nThis is the code for index.html\n\n<!DOCTYPE HTML>\n<html>\n <head>\n <meta charset=\"UTF-8\">\n <title>googleplaces</title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0\">\n \n <link rel=\"stylesheet\" href=\"css/main.css\">\n <style type=\"text/css\" media=\"screen\">\n form {\n background: url(https://developers.google.com/maps/documentation/places/images/powered-by-google-on-white.png) no-repeat center right;\n }\n</style>\n <script>window.$ = window.jQuery = WLJQ;</script>\n </head>\n <body style=\"display: none;\">\n <form>\n <input id=\"geocomplete\" type=\"text\" placeholder=\"Type in an address\" size=\"90\" />\n <input id=\"find\" type=\"button\" value=\"find\" />\n </form>\n\n <script src=\"js/initOptions.js\"></script>\n <script src=\"js/main.js\"></script>\n <script src=\"js/messages.js\"></script>\n <script src=\"http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places\"></script>\n <script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></script>\n <script src=\"js/jquery.geocomplete.js\"></script>\n\n <script>\n $(function(){\n\n $(\"#geocomplete\").geocomplete()\n .bind(\"geocode:result\", function(event, result){\n $.log(\"Result: \" + result.formatted_address);\n })\n .bind(\"geocode:error\", function(event, status){\n $.log(\"ERROR: \" + status);\n })\n .bind(\"geocode:multiple\", function(event, results){\n $.log(\"Multiple: \" + results.length + \" results found\");\n });\n\n $(\"#find\").click(function(){\n $(\"#geocomplete\").trigger(\"geocode\");\n });\n\n\n\n });\n </script>\n </body>\n</html>\n",

2014-07-24T19:47:26

Diogo Ebert :

Have you tried to stop propagating the click event?\n\n\n $( \"p\" ).click(function( event ) { event.stopPropagation(); // Do\n something });\n",

2015-06-28T22:41:12

Francine Perazzi :

Try Stopping propagation\n\n<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>event.stopImmediatePropagation demo</title>\n <style>\n p {\n height: 30px;\n width: 150px;\n background-color: #ccf;\n }\n div {\n height: 30px;\n width: 150px;\n background-color: #cfc;\n }\n </style>\n <script src=\"https://code.jquery.com/jquery-1.10.2.js\"></script>\n</head>\n<body>\n\n<p>paragraph</p>\n<div>division</div>\n\n<script>\n$( \"p\" ).click(function( event ) {\n event.stopImmediatePropagation();\n});\n$( \"p\" ).click(function( event ) {\n // This function won't be executed\n $( this ).css( \"background-color\", \"#f00\" );\n});\n$( \"div\" ).click(function( event ) {\n // This function will be executed\n $( this ).css( \"background-color\", \"#f00\" );\n});\n</script>\n\n</body>\n</html>\n",

2015-06-29T03:29:21

Google Places Autocomplete Issue with worklight - can't tap