I just made a function that displays a dialog on the page in Javascript, this function is asynchronous because it loads the dialog which is a page in PHP. However, to display the message I need to pass parameters. This function works very well, but does not work at all on Safari, when I display the parameters, on Safari it returns "undefined", while on MS Edge, it returns the parameter values. I tried with another non-asynchronous function, and it displays parameters fine. Do you think Safari doesn't handle parameters for async functions or am I doing it wrong? Thank you very much to the people who will help me. (Sorry for my bad English).
Function :
async function openDialogInfo(title, message, button) {
alert(title + ' ' + message + ' ' + button);
var title = (typeof title !== 'undefined') ? encodeURI(title) : 'Information';
var message = (typeof message !== 'undefined') ? encodeURI(message) : 'Error retrieving message !';
var button = (typeof button !== 'undefined') ? encodeURI(button) : 'Ok';
if (title.length >= 3 && message.length >= 5 && button.length >= 3) {
if (screen.width >= 720) {
$("#out-popup-e").css({
'opacity': '0'
}).show();
} else {
$("#out-popup-e").show();
}
var params = `title=${title}&message=${message}&bouton=${button}`;
var resp = await fetch('../../../popup/popup_ecars_info.php', {
method: "POST",
body: params,
headers: {
"Content-type": 'application/x-www-form-urlencoded'
}
});
var out = await resp.text();
if (resp.status == '200') {
if (screen.width >= 720) {
$("#out-popup-e").animate({
'opacity': '1'
}, 400).html(out);
} else {
$("#out-popup-e").html(out);
$(".center-popup").css({
'bottom': '-700px'
}).animate({
'bottom': '0'
}, 400);
}
} else {
console.error('Error Message 2');
}
} else {
console.error('Error message 1');
}
}<button class="action" onclick="openDialogInfo('HELLO WORLD', 'New message for testing (don\'t work on Safari)')">TEST</button>
<button class="no-action" onclick="autreTest('New Message (work)')">New test</button>The problem is that you're declaring new variables with the same names as the parameters. Since they're declared with var the declarations are hoisted to the top of the function, and the initial undefined value are overriding the parameters.
Either use different variables or just reassign them rather than re-declaring them.
async function openDialogInfo(title, message, button) {
alert(title + ' ' + message + ' ' + button);
title = (typeof title !== 'undefined') ? encodeURI(title) : 'Information';
message = (typeof message !== 'undefined') ? encodeURI(message) : 'Error retrieving message !';
button = (typeof button !== 'undefined') ? encodeURI(button) : 'Ok';
if (title.length >= 3 && message.length >= 5 && button.length >= 3) {
if (screen.width >= 720) {
$("#out-popup-e").css({
'opacity': '0'
}).show();
} else {
$("#out-popup-e").show();
}
var params = `title=${title}&message=${message}&bouton=${button}`;
var resp = await fetch('../../../popup/popup_ecars_info.php', {
method: "POST",
body: params,
headers: {
"Content-type": 'application/x-www-form-urlencoded'
}
});
var out = await resp.text();
if (resp.status == '200') {
if (screen.width >= 720) {
$("#out-popup-e").animate({
'opacity': '1'
}, 400).html(out);
} else {
$("#out-popup-e").html(out);
$(".center-popup").css({
'bottom': '-700px'
}).animate({
'bottom': '0'
}, 400);
}
} else {
console.error('Error Message 2');
}
} else {
console.error('Error message 1');
}
}<button class="action" onclick="openDialogInfo('HELLO WORLD', 'New message for testing (don\'t work on Safari)')">TEST</button>
<button class="no-action" onclick="autreTest('New Message (work)')">New test</button>