Safari and iOS devices not working with jQuery AJAX call

Question

I'm trying to get a cookie set through AJAX. It works on Android devices, Chrome, FF, Opera, Microsoft Edge, IE, except Safari and iOS devices. Is there something magical I'm missing about Safari and iOS that AJAX has hidden up it's sleeve?

Here is the code that I have that works on the Android devices/etc.

Javascript File

function setCookie() {
var $cookieName   = 'example-cookie',
            $cookieMethod = 'example-method',
            $cookieGet    = 'example-get'

        $.ajax({
            type: 'POST',
            url: $(location).attr('protocol') + 'to/location.php',
            data: {
                name: $cookieName,
                method: $cookieMethod,
                get: $cookieGet
            },
            cache: false,
            success: function(data, textStatus, jQxhr) {
                try {
                    $('.report .display-result').css('display', 'none').css('position', 'absolute')
                        .css('width', '100%').html($(data).filter('.display').html()).fadeIn(1000);

                    setTimeout(function() {
                        $('.report .display-result').fadeOut(1000);
                    }, 4000);
                } catch (err) {/*alert(err);*/}
            },
            error: function(jqXhr, textStatus, errorThrown) {
                try {
                    alert(jqXhr.responseText);
                } catch (err) {/*alert.log(err);*/}
            }
        });
    }

PHP File

    <?php

require_once '../to/class/Class.php';

$uc           = new Class();
$cookieName   = $_POST['name'];
$cookieMethod = $_POST['method'];
$cookieId     = $_POST['get'];

$uc->method($_POST['name'], $_POST['method'], $_POST['get']);
?>

<?php
if (!empty($uc->method($_POST['name'], 'get-cookie'))):
    $cookie = json_decode($uc->method($_POST['name'], 'get-cookie'));

    // Making sure the cookie exists and is not empty.
    if (!empty($cookie)):
        // Making sure the cookie has id's, if not, will spit out 'Successly added to report'.
        if (isset($cookie->data->id)) {
            foreach ($cookie->data->id as $chkDuplicates) {
                // If any id's match, there is a duplicate. Make sure that they know they've added this already.
                if ($chkDuplicates == $_POST['get']) {
                    $duplicateFound = true;
                    break;
                }
            }
        }

        if (isset($duplicateFound)): ?>
            <div class="display info">
                <h3 class="alert alert-info">You've already added this to your report.</h3>
            </div>
        <?php else: ?>
            <div class="display success">
                <h3 class="alert alert-success">Successfully added to report.</h3>
            </div>
        <?php endif; ?>
    <?php endif; ?>
<?php else: ?>
    <div class="display failure">
        <h3 class="alert alert-failure">Unfortunately, that item wasn't added, please refresh the page and try again.</h3>
    </div>
<?php endif; ?>

For whatever reason this seems to not work in Safari and iOS devices. Whenever I try to get the alert(jqXhr), I get nothing. Same goes with jqXhr.responseText, textStatus gives me 'error', and errorThrown is blank like the rest of the stuff. I'm at a bit of a loss on this one. Any support here is greatly appreciated and thanks for the time to look at this.

Answer 1

Safari can do some heavy caching of AJAX requests. Perhaps you your previously tested your jQuery in Safari before the response was fully working and your API was giving an empty response.

Try this to invalidate the Safari cache with following changes to your API url + '&nocache=' + new Date().getTime() . What this does is basically make Safari treat the Ajax url like a different url on every request and thus Safari will get a fresh response from your API endpoint.

 $.ajax({
            type: 'POST',
            url: $(location).attr('protocol') + 'to/location.php' + '&nocache=' + new Date().getTime(),
            data: {
                name: $cookieName,
                method: $cookieMethod,
                get: $cookieGet
            },
            cache: false,
            success: function(data, textStatus, jQxhr) {
                try {
                    $('.report .display-result').css('display', 'none').css('position', 'absolute')
                        .css('width', '100%').html($(data).filter('.display').html()).fadeIn(1000);

                    setTimeout(function() {
                        $('.report .display-result').fadeOut(1000);
                    }, 4000);
                } catch (err) {/*alert(err);*/}
            },
            error: function(jqXhr, textStatus, errorThrown) {
                try {
                    alert(jqXhr.responseText);
                } catch (err) {/*alert.log(err);*/}
            }
        });

Answer 2

Alright, so it had to do with the JS file and the url for AJAX.

Apparently, iOS/Safari does not read

$(location).attr('protocol')

So make sure to change that to

$(location).attr('origin')

Sheesh, such a simple thing that took way too long to track down. Hope this helps with anyone in the future.