Trouble getting $http to work on second page

ionic-v1
1

Hi Everyone,

I’m new here, and I’m enjoying ionic so far, but I have a small problem that I can’t figure ou how to solve.
I used the blank template to start my project, added two views (login view and main app view).

The login is working and switching state accordingly. Now in the main app view, I have a link that has to be clicked.
When clicking the link the current geolocation should be acquired and send to a server using $http POST.
I can’t get the $http to work.

The code:

angular.module(‘Hulpdienst’)

.controller(‘melding’, [’$scope’,’$rootScope’,’$state’,’$http’,’$cordovaGeolocation’,’$cordovaDialogs’,‘Base64’,’$timeout’, function($scope,$rootScope,$state,$http,$cordovaGeolocation,$cordovaDialogs,Base64,$timeout) {

//Login en naar melding pagina
$scope.login = function() {
    
    var username = document.getElementById("klantnummer").value;
    var password = document.getElementById("postcode").value;

    if(username == "")
    {
        //navigator.notification.alert("Please enter username", null, "Username Missing", "OK");
        navigator.notification.alert("Vul alstublieft een klantnummer in.",null, "Onjuist of geen klantnummer ingevoerd", "OK");
        return;
    }

    if(password == "")
    {
        //navigator.notification.alert("Please enter password", null, "Password Missing", "OK");
        navigator.notification.alert("Vul alstublieft de cijfers van uw postcode in.",null, "Onjuiste of geen postcode ingevoerd", "OK");
        return;
    }

    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://projects.grapefish.nl/hdapp/wp-admin/admin-ajax.php?action=login&username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
    xhr.onload = function(){
        if(xhr.responseText == "FALSE")
        {
            navigator.notification.alert("Verkeerde combinatie van klantnummer en postcodecijfers",null,"Kan niet inloggen", "Probeer opnieuw");
        }
        else if(xhr.responseText == "TRUE")
        {
            $state.go('melding', {});
        }
    }  
    xhr.send();
}

//Locatie ophalen en melding versturen functie
$scope.getLocation = function () {
    var posOptions = {enableHighAccuracy: false};
    $cordovaGeolocation
    .getCurrentPosition(posOptions)
    .then(function (position) {
        $rootScope.lat  = position.coords.latitude
        $rootScope.long = position.coords.longitude
        //navigator.notification.alert("Latitude: " + lat + "Longitude: " + long,null,"","OK");
    }, function(err) {
        navigator.notification.alert("Er is iets fout gegaan",null,"","OK");
    });
}

$scope.stuurMelding = function() {
    $timeout(function() {
        //navigator.notification.alert("Werkt! "+$rootScope.lat,null,"","OK");
        $http({
            method: 'POST', 
            url: 'http://projects.grapefish.nl/hdapp/wp-json/pods/custom_meldingen', 
            data: {title: "Melding Uit App", content: "Dit is een test uit de app", abonnee: "2", status: "publish"},
            headers: {
                'Authorization': 'Basic ' + Base64.encode('admin' + ':' + 'Gr4p3f1sHdW#7')
            }
        }).success(function(data){
            navigator.notification.alert("Werkt!",null,"","OK");
        });
    }, 500);
}

}])

I’ve tried numerous things but can’t get it to work.
Sorry if this is a noob question, I’m just starting to get into ionic/angular development.

Kind regards,
Rik

2

Have you tried CORS?
Whats the response of the POST request?

In addition may I Recommend setting the headers prior to the $http function
like something on app.run

 $http.defaults.headers.common.Authorization = 'Basic YmVlcDpib29w';

if you wanna clear it just use

delete  $http.defaults.headers.common.Authorization;
3

I tried the same code for the first page in the app. Then it works.

I will have a look and get back with more info on the response. I know that in the browser it gives a Cors error, but in the app it worked when I had the single page with the link.