Javascript load functions asychronosuly

Question

I am getting geolocation. Problem I have is that the geolocation takes a few seconds to respond. By that time my ajax has already been called on document ready and the long/lat is never posted. How can I make sure the ajax is not called until the gelocationing is complete?

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
} else {
    //get it another way

    //else
    var Longitude = '0';
    var Latitude = '0';
}

function showPosition(position) {
    var Longitude = position.coords.longitude;
    var Latitude = position.coords.latitude;
}

$.ajax({
    url: 'activities.php?action=log-campaign-visit',
    type: 'post',
    data: {
        DeviceID: session,
        CampaignId: id,
        User: userid,
        IP: IP,
        Agent1: agent1,
        Referer1: referer1,
        CouponId: couponId,
        CampaignMedium: Cmedium,
        CampaignSource: source1,
        URL: fullUrl,
        RedemptionCode: RedemptionCode,
        Userlanguage: userLang,
        ScreenWidth: screenWidth,
        ScreenHeight: screenHeight,
        ScreenOrientation: orientation,
        Longitude: Longitude,
        Latitude: Latitude
    },
    success: function (data) {
        $('#RedemptionCode').html(data);
        if (data == 'Success') {}
    },
    done: function () {
        alert("done");
    },
    fail: function () {
        alert("error");
    },
    always: function () {
        alert("complete");
    },
});

Answer 1

Move the Ajax call to a sepparate function. Then in the call it in the showPosition function and in the else part of the first if. This way, it always get called, and it waits for the geolocation to be complete.
If you could check if geolocation is not possible and call the ajax call in that case too, would be a good idea too.

Answer 2

Put your ajax call within a function; call it from the

• function showPosition
• else block
• and after a timeout (the user might not notice to accept the geolocationing)

Answer 3

If geolocation is available then you need to sent the ajax request after the geolocatoion callback is completed

I've moved the ajax request to a separate method because it has to be called twice, first in the else portion second in the geolocation callback

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
} else {
    // get it another way

    doAjax('0', '0')
}

function showPosition(position) {
    var Longitude = position.coords.longitude;
    var Latitude = position.coords.latitude;
    doAjax(Latitude, Longitude)

}

function doAjax(Latitude, Longitude) {
    $.ajax({
        url : 'activities.php?action=log-campaign-visit',
        type : 'post',
        data : {
            DeviceID : session,
            CampaignId : id,
            User : userid,
            IP : IP,
            Agent1 : agent1,
            Referer1 : referer1,
            CouponId : couponId,
            CampaignMedium : Cmedium,
            CampaignSource : source1,
            URL : fullUrl,
            RedemptionCode : RedemptionCode,
            Userlanguage : userLang,
            ScreenWidth : screenWidth,
            ScreenHeight : screenHeight,
            ScreenOrientation : orientation,
            Longitude : Longitude,
            Latitude : Latitude
        },
        success : function(data) {
            $('#RedemptionCode').html(data);
            if (data == 'Success') {
            }
        },
        done : function() {
            alert("done");
        },
        fail : function() {
            alert("error");
        },
        always : function() {
            alert("complete");
        }
        ,
    });
}