I have a compatibility issue with Safari and all iOS devices. I created this jQuery code (see the link below ) for a project but I don't understand why it doesn't work with Safari. With the Chrome, Firefox, Android it works well.
(function ($) {
$.ajaxSetup({ cache: false });
const ajax_dir = '/wp-content/plugins/oxygen-functions/assets/ajax/';
// SELECT LOCATION-SERVICE FORM
$('.serv-select select').html(select_vars.services_select);
$('.loc-select select').html(select_vars.locations_select);
$('.service-location-form')
.closest('form')
.submit(async function (e) {
e.preventDefault();
$(this).find('.frm_message').addClass('d-none');
var form = $(this).serializeArray(),
service = form.find((x) => x['name'] == `item_meta[33]`).value,
loc = form.find((x) => x['name'] == `item_meta[34]`).value,
cat = loc + ',' + service,
posts = await $.ajax({
type: 'post',
async: true,
url: ajax_dir + 'posts-by-cat.php',
dataType: 'json',
data: {
post_type: 'services',
cat: cat,
},
}),
url = await $.ajax({
type: 'post',
async: true,
url: ajax_dir + 'post-link-id.php',
dataType: 'json',
data: {
id: posts[0],
},
});
//console.log(url);
location.href = url;
});
})(jQuery);
This is the error that I getting from the DevConsole:
Unhandled Promise Rejection [object Object]
(anonymous function) - scripts.js:21
asyncFunctionResume
(anonymous function)
promiseReactionJobWithoutPromise
How I can fix it? some idea?
Thanks!
Currently, your code doesn't have any error catching blocks.
Try to insert the function content into the try/catch
block
(function ($) {
$.ajaxSetup({ cache: false });
const ajax_dir = '/wp-content/plugins/oxygen-functions/assets/ajax/';
// SELECT LOCATION-SERVICE FORM
$('.serv-select select').html(select_vars.services_select);
$('.loc-select select').html(select_vars.locations_select);
$('.service-location-form')
.closest('form')
.submit(async function (e) {
e.preventDefault();
try {
$(this).find('.frm_message').addClass('d-none');
var form = $(this).serializeArray(),
service = form.find((x) => x['name'] == `item_meta[33]`).value,
loc = form.find((x) => x['name'] == `item_meta[34]`).value,
cat = loc + ',' + service,
posts = await $.ajax({
type: 'post',
async: true,
url: ajax_dir + 'posts-by-cat.php',
dataType: 'json',
data: {
post_type: 'services',
cat: cat,
},
}),
url = await $.ajax({
type: 'post',
async: true,
url: ajax_dir + 'post-link-id.php',
dataType: 'json',
data: {
id: posts[0],
},
});
//console.log(url);
location.href = url;
} catch(err) {
console.log(err);
// Handle error here. - maybe ajax fail
}
});
})(jQuery);
This is the whole snippet:
(function ($) {
$.ajaxSetup({ cache: false });
const ajax_dir = '/wp-content/plugins/oxygen-functions/assets/ajax/';
// SELECT LOCATION-SERVICE FORM
$('.serv-select select').html(select_vars.services_select);
$('.loc-select select').html(select_vars.locations_select);
var closestForm = $('.service-location-form').closest('form');
closestForm.submit(async function (e) {
e.preventDefault();
e.stopImmediatePropagation(); // <-- I fixed my issue with it
$(this).find('.frm_message').addClass('d-none');
var form = $(this).serializeArray();
var service = form.find((x) => x['name'] == `item_meta[33]`).value;
var loc = form.find((x) => x['name'] == `item_meta[34]`).value;
var cat = loc + ',' + service;
try {
var posts = await $.ajax({
type: 'post',
async: true, // true was a string
url: ajax_dir + 'posts-by-cat.php',
dataType: 'json',
data: {
post_type: 'services',
cat: cat,
},
});
} catch (safariError) {
console.error(safariError);
}
var url = await $.ajax({
type: 'post',
async: true, // also was 'true'
url: ajax_dir + 'post-link-id.php',
dataType: 'json',
data: {
id: posts[0],
},
});
//console.log(url);
location.href = url;
});
})(jQuery);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.