using a angularjs variable in a ajax request with a .load url

Question

I am mostly a PHP coder and have VERY VERY limited dealing with jquery.

I am showing a banner ad based upon the end users' location. I'm using a AngularJS script to return the users zip code: http://jsfiddle.net/kL50yeek/21/

I'm using the follow ajax code to load the right banner ad based upon the zip provided:

<div id="adspaceNetwork_sponsored_bank"></div>

<script>
$('#adspaceNetwork_sponsored_bank').load("https://ia.lc/~creative/?
zip=02481");
</script>

You can see the code demo here: https://jsfiddle.net/cdLw0c48/22/

How do I pass the zipCode Var to the ajax load request?

This doesn't work: $('#adspaceNetwork_sponsored_bank').load('https://ia.lc/~creative/?zip='+zipCode);

score 1 · Accepted Answer · answered May 19 '15 at 05:17

I've update your jsfiddle here with angularjs bindings:

Here is your updated controller:

app.controller('MainCtrl', ['$scope', '$http', '$sce', 'ZipCodeLookupSvc',
    function($scope, $http, $sce, ZipCodeLookupSvc) {
      $scope.zipCode = null;
      $scope.message = 'Finding zip code...';

      ZipCodeLookupSvc.lookup().then(function(zipCode) {
        $scope.zipCode = zipCode;
          $http.get('https://ia.lc/~creative/?zip='+zipCode).success(function(res) {
              $scope.banner = $sce.trustAsHtml(res);
          });

      }, function(err) {
        $scope.message = err;
      });
  }]);

After we get the zipCode via ZipCodeLookupSvc, we use a $http.get call to fetch the banner, and set it as $scope.banner for use in your html code.

score 0 · Answer 2 · answered May 19 '15 at 05:16

I updated your code and transferred the load call.

app.controller('MainCtrl', ['$scope', 'ZipCodeLookupSvc', function($scope, ZipCodeLookupSvc) {
    $scope.zipCode = null;
    $scope.message = 'Finding zip code...';

    ZipCodeLookupSvc.lookup().then(function(zipCode) {
        $scope.zipCode = zipCode;
        $('#adspaceNetwork_sponsored_bank').load('https://ia.lc/~creative/?zip=' + zipCode);
    }, function(err) {
        $scope.message = err;
    });
}]);

score 0 · Answer 3 · answered May 19 '15 at 05:22

There are multiple problems in your handling of promises

(function (angular) {
    'use strict';

    var app = angular.module('MyApp', []);

    app.factory('GeolocationSvc', ['$q', '$window', function ($q, $window) {
        return function () {
            var deferred = $q.defer();

            if (!$window.navigator) {
                deferred.reject(new Error('Geolocation is not supported'));
            } else {
                $window.navigator.geolocation.getCurrentPosition(function (position) {
                    deferred.resolve({
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    });
                }, deferred.reject);
            }

            return deferred.promise;
        };
    }]);

    app.factory('ZipCodeLookupSvc', ['$q', '$http', 'GeolocationSvc', function ($q, $http, GeolocationSvc) {
        var MAPS_ENDPOINT = 'https://maps.google.com/maps/api/geocode/json?latlng={POSITION}&sensor=false';

        return {
            urlForLatLng: function (lat, lng) {
                return MAPS_ENDPOINT.replace('{POSITION}', lat + ',' + lng);
            },

            lookupByLatLng: function (lat, lng) {
                var deferred = $q.defer();
                var url = this.urlForLatLng(lat, lng);

                $http.get(url).success(function (response) {
                    // hacky
                    var zipCode;
                    angular.forEach(response.results, function (result) {
                        if (result.types[0] === 'postal_code') {
                            zipCode = result.address_components[0].short_name;
                        }
                    });
                    deferred.resolve(zipCode);
                }).error(deferred.reject.bind(deferred));

                return deferred.promise;
            },

            lookup: function () {
                var deferred = $q.defer();
                var self = this;

                GeolocationSvc().then(function (position) {
                    self.lookupByLatLng(position.lat, position.lng).then(function (zipCode) {
                        console.log('p')
                        deferred.resolve(zipCode);
                    }, deferred.reject.bind(deferred))
                }, deferred.reject.bind(deferred));

                return deferred.promise;
            }
        };
    }]);

    app.controller('MainCtrl', ['$scope', 'ZipCodeLookupSvc', function ($scope, ZipCodeLookupSvc) {
        $scope.zipCode = null;
        $scope.message = 'Finding zip code...';

        ZipCodeLookupSvc.lookup().then(function (zipCode) {
            $scope.zipCode = zipCode;
            console.log(zipCode)
            $('#adspaceNetwork_sponsored_bank').load('https://ia.lc/~creative/?zip=' + $scope.zipCode);
        }, function (err) {
            $scope.message = err;
        });
    }]);

})(angular);

Demo: Fiddle

Hi sir, can you pls help me in this question http://stackoverflow.com/q/30316654/4538704 — Sulthan Allaudeen, May 19 '15 at 05:54

using a angularjs variable in a ajax request with a .load url

3 Answers3