AngularJS $http and jQuery AJAX not firing on Mobile Browsers only

Question

I have a very simple angular test app that calls $http.get('http://localhost:3001/pets') and writes them using ngRepeat as < DIV >s into index.html

The URL returns Array with 3 objects like so:

[
    {
      "id": 1,
      "name": "cat",
      "location": "bedroom"
    },
....
]

Which then get assigned using .success() to $scope.pets (Actual is Code below).

This works perfectly in all desktop browsers.

However, does nothing when I load the page on my Android using Chrome or Firefox (and IE on Nokia). There is no effect - the NodeJS/Express do not even seem to receive the request.

I tried replacing the $http.get with $.ajax (... $scope.$apply...) - code below.

I tried using services, $deffered and $q as explaned here: http://chariotsolutions.com/blog/post/angularjs-corner-using-promises-q-handle-asynchronous-calls/

When I point Chrome Mobile/Firefox directly to the API (http://localhost:3001/pets) the data is loaded into the browser with no problem. I tried hardcoding the values, like this:

$scope.pets = [{"id": 1000, "name": "GOAT", "location": "EVERYWHERE"}];

... and the do the ngClick to call $http.get and override the values.

Again, works fine on Desktop - does nothing on Mobile.

I made sure I've added the CORS headers:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, PATCH, DELETE
Access-Control-Allow-Headers: X-Requested-With,content-type
Access-Control-Allow-Credentials: true

Why? Why would this not work on the phone browser? And I googled for 2 days....

$scope.getPets = function () {
      $http.get('http://localhost:3001/pets')
    .success(function(response){
        //$scope.httpPets = response;
        console.log('Hello, this is dog with your GET request.')
        console.log(response);
    })
    .error(function(err){
      console.log("ERROR", err)
    })
    .then(function(response){
      console.log('Here then', response.data);
      $scope.httpPets = response.data;
    })
};

or this:

$scope.getPets = function(){
 $.ajax('http://localhost:3001/pets').success(function(data) {
        $scope.$apply(function(){ $scope.pets = data;});
        console.log(data);
    });
};

Thank you in advance for any suggestions.

Kop4lyf · Accepted Answer · 2015-05-21 15:29:24Z

2

Check your URL. It says localhost, so it wont work unless your server is residing in the mobile (localhost means server present on same machine).

You need to give the proper url.

That means, if you are using mobile browsers, you might be giving url in the address bar like eg.

http://192.168.1.2/

So the http call should be:

$http.get('http://192.168.1.2:3001/pets')

You need to make the http calls to this url only.

Other way(and widely used for websites) is to use relative URL, this method will make calls to the domain on which you are present and works for all sites. Example,

$http.get('/pets')

will equal to

$http.get('http://192.168.1.2:3001/pets')

Check with these..

edited May 21, 2015 at 15:29

answered May 21, 2015 at 15:20

Kop4lyf

4,6001 gold badge28 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS $http and jQuery AJAX not firing on Mobile Browsers only

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related