JavaScript function call not working in Safari on iOS

Question

I use this JavaScript code...

function data_addproduct(id){
var hr   = new XMLHttpRequest();
var url  = "scripts/data_processing.php";
var data = "addproduct";
var vars = "data="+data+"&id="+id;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
        var return_data = hr.responseText;
        document.getElementById("ui_checkout").innerHTML = return_data;
        document.getElementById("ui_checkout_mobile").innerHTML = return_data;
        data_refreshtotal();
        data_refreshproducts();
    }
}
hr.send(vars);
document.getElementById("ui_checkout").innerHTML = "<br>Updating...";
document.getElementById("ui_checkout_mobile").innerHTML = "<br>Updating...";

}

However in Safari on iOS, its not calling the other two functions...

data_refreshtotal();
data_refreshproducts();

its strange because it works fine in Chrome for iOS, anyone know how to fix it in Safari?

FUNCTIONS it calls:

function data_refreshtotal(){   
var hr   = new XMLHttpRequest();
var url  = "scripts/data_processing.php";
var data = "refreshtotal";
var vars = "data="+data;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
        var return_data = hr.responseText;
        document.getElementById("ui_total").innerHTML = return_data;
        document.getElementById("ui_total_mobile").innerHTML = return_data;
        document.getElementById("ui_checkout_notify").innerHTML = "Online EPOS";
    }
}
hr.send(vars);
document.getElementById("ui_total").innerHTML = "Updating...";
document.getElementById("ui_total_mobile").innerHTML = "Updating...";
document.getElementById("ui_checkout_notify").innerHTML = "Updating...";
}
function data_refreshproducts(){    
var hr   = new XMLHttpRequest();
var url  = "scripts/data_processing.php";
var data = "refreshproducts";
var vars = "data="+data;

hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
        var return_data = hr.responseText;
        document.getElementById("ui_checkout").innerHTML = return_data;
        document.getElementById("ui_checkout_mobile").innerHTML = return_data;
        document.getElementById("ui_checkout_notify").innerHTML = "Online EPOS";
    }
}
hr.send(vars);
document.getElementById("ui_checkout").innerHTML = "<br>Updating...";
document.getElementById("ui_checkout_mobile").innerHTML = "<br>Updating...";
document.getElementById("ui_checkout_notify").innerHTML = "Updating...";
}

Answer 1

From what you have posted, the only thing that makes any sense is that (somehow) data_refreshtotal and data_refreshproducts have fallen out of scope when they are being called. Here's your same code, refactored and namespaced to make sure every function is still in scope when you call it:

var Cart;
if (!Cart) {
    Cart = {};
}
(function () {
    'use strict';
    Cart.stringificate = function stringificate(data) {
        var key = '',
            postData = '';
        for (key in data) {
            if (data.hasOwnProperty(key)) {
                postData += '&' + key + '=' + data[key];
            }
        }
        return postData.substring(1);
    };
    Cart.ajax = function ajax(options) {
        var hr = new XMLHttpRequest(),
            method = options.method ? options.method.toUpperCase() : "POST",
            url = options.url || "scripts/data_processing.php",
            i = 0;
        hr.open(method, url, true);
        hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        hr.onreadystatechange = function () {
            if (hr.readyState === 4 && hr.status === 200) {
                options.callback(hr.responseText);
            }
        };
        hr.send(Cart.stringificate(options.data));
        for (i = 0; i < options.notices.length; i += 1) {
            document.getElementById(options.notices[i]).innerHTML = "<br />Updating&hellip;";
        }
    };
    Cart.data_refreshtotal = function data_refreshtotal() {
        Cart.ajax({
            "data": {
                "data": "refreshtotal"
            },
            "callback": function (return_data) {
                document.getElementById("ui_total").innerHTML = return_data;
                document.getElementById("ui_total_mobile").innerHTML = return_data;
                document.getElementById("ui_checkout_notify").innerHTML = "Online EPOS";
            },
            "notices": [
                "ui_total",
                "ui_total_mobile",
                "ui_checkout_notify"
            ]
        });
    };
    Cart.data_refreshproducts = function data_refreshproducts() {
        Cart.ajax({
            "data": {
                "data": "refreshproducts"
            },
            "callback": function (return_data) {
                document.getElementById("ui_checkout").innerHTML = return_data;
                document.getElementById("ui_checkout_mobile").innerHTML = return_data;
                document.getElementById("ui_checkout_notify").innerHTML = "Online EPOS";
            },
            "notices": [
                "ui_checkout",
                "ui_checkout_mobile",
                "ui_checkout_notify"
            ]
        });
    };
    Cart.data_addproduct = function data_addproduct(id) {
        Cart.ajax({
            "data": {
                "data": "addproduct",
                "id": id
            },
            "callback": function (return_data) {
                document.getElementById("ui_checkout").innerHTML = return_data;
                document.getElementById("ui_checkout_mobile").innerHTML = return_data;
                Cart.data_refreshtotal();
                Cart.data_refreshproducts();
            },
            "notices": [
                "ui_checkout",
                "ui_checkout_mobile"
            ]
        });
    };
}());

I used Cart as the namespace simply because it seems as if you are making a shopping cart (and it was quick to type :) ). Try running this and see if the functions get called.