I'm working on a project where a piece of the DOM is determined after a jQuery AJAX request. The code is working fine in Google Chrome, Mozilla Firefox, and even Edge. The issue comes with all (from what I can see) modern version of Safari.
It seems that the request isn't being completed on Safari at all - but it's not throwing any errors so the other JavaScript on the page (that doesn't involved POST/GET Requests) is working as intended. The console doesn't have any errors, either.
Here is a look at the code I'm using to make one of the requests:
$(document).ready(function(){
$.ajax({
type: 'POST',
url: '/include/userbar.php',
async: false,
}).done(function(data){
if(data.replace('Invalid Permissions') == data){
$('#userBarContain').html(data);
} else {
$.ajax({
type: 'POST',
url: '/include/guestbar.php',
async: false
}).done(function(data){
$('#userBarContain').html(data);
});
}
});
Basically, we do an AJAX request on $(document).ready() and if the data returned is an Invalid Permissions error, we do the second request for the guestbar.php. Regarless of where we post to, we put the data returned into the $('#userBarContain') DOM element.
In Safari, I'm not seeing either the successful OR the fallback data being inserted into the DOM. I read that Safari doesn't always play well with async requests, but even with async: false I'm seeing the same issues.
EDIT: After getting access to a modern Macbook, I've found that it was actually a CSS3 selector I was using elsewhere that was causing this problem (without errors in the console unless I called the function again manually). I wanted to update this for future Google Searches that might come across this issue as well.
The selector in question was $('*[name^="option["'). Apparently, Safari doesn't play well with this sort of selector. After appending a class to the object(s) that I needed to iterate through, the problem seems to have been resolved.
