AngularUI, location loaded via $http -> Timeout error

Camunda 7 Topics Discussion & Questions
,
1

Hello together,

I want to make use of the angularUi integration Typeaehad. Here is the reference im refering to: Angular directives for Bootstrap

And here is the working Plnkr: Plunker - http://angular-ui.github.io/bootstrap/

That the code is working in Camunda I changed it a little bit:

<div ng-controller="TypeaheadCtrl">

    <h4>Asynchronous results</h4>
    <pre>Model: {{asyncSelected | json}}</pre>
    <input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">
    <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
    <div ng-show="noResults">
        <i class="glyphicon glyphicon-remove"></i>No Results Found
    </div>

</div>
    <script>

        function TypeaheadCtrl($scope, $http) {

            $scope.selected = undefined;
            $scope.getLocation = function (val) {
                return $http.get('//maps.googleapis.com/maps/api/geocode/json', {
                    params: {
                        address: val,
                        sensor: false
                    }
                }).then(function (response) {
                    return response.data.results.map(function (item) {
                        return item.formatted_address;
                    });
                });
            };
        }
</script>

I tink the code is working however I always get this error:

Request Timeout : Your request timed out. Try to refresh the page.

Is there some magic I have to add to the code so it is able to get the location from Google API?

Cheers

Marc

2

Hi Marc,

could you check if the request is send correctly? You can do that by opening the developer console (F12 in most browsers) and go to the Network tab. If you then reload the page, you will see all requests this page is making. Make sure that your request to googleapis appears there and gets a response.

Cheers
Sebastian

3

Hey Sebastian,

I dont think it is seding it correctly. I took 2 print screens from the network tab in the console.

The first printscreen shows the log when i start the process and the second one is after i have entered some letter in the input field.

Do you have any suggestion for that problem?

Cheers Marc

Printscreen1

printscreen1.png3195×1605 286 KB

’
Printscreen2
printscreen2.png3195×1611 335 KB

4

Hi Marc,

I was able to reproduce your issue and raised a bug report: https://app.camunda.com/jira/browse/CAM-5855

If you do not use the angular $http service to make the request against the external resource, it should work. Try to inject $q in your Controller and replace the content of your getLocation function with this snippet:

var deferred = $q.defer();

var req = new XMLHttpRequest();
req.addEventListener('load', function(response) {
  var data = JSON.parse(response.target.responseText);
  deferred.resolve(data.results.map(function (item) {
      return item.formatted_address;
  }));
});

req.open('GET', 'http://maps.googleapis.com/maps/api/geocode/json?address='+val+'&sensor=false');
req.send();

return deferred.promise;

Does this work for you?

Cheers
Sebastian

1 Like
5

Thank you, it works perfect for me :+1:

6