I am attempting to write custom HTML to SweetAlert2, the code I am attempting to make has the user input a bot name then submit it to our API.
The code works fine on Windows, however when I do this on Chrome MacOS I get the error Uncaught (in promise) TypeError: Cannot read properties of null (reading 'value'). The placeholder also does not register on MacOS, this all works fine on Chrome Windows though.
Image of the placeholder not registering.
Submission Error
I believe it has to do with the HTML not registering on Chrome Mac because I took a look within the developer console and found it to not be showing the placeholder or ID at all. Developer Console Image
Original HTML:
<a class="button w-button is-link is-light" style="min-height: 0px;border-width: 1px;cursor: pointer;justify-content: center;padding-bottom: .5em;padding-left: 2em;padding-right: 2em;padding-top: calc(.6em - 2px);text-align: center;white-space: nowrap;" target="_blank" id="change-name">Change Bot Name</a>
Sweetalert JS:
// Update Bot Name:
$(function() {
$('#change-name').click(function() {
Swal.fire({
html: `<br><b>Update Bot Name</b><br><input type="text" id="newbotname" class="swal2-input" placeholder="Enter the new name for your bot.">`,
confirmButtonText: 'Update',
showCancelButton: true,
focusConfirm: false,
allowOutsideClick: false,
reverseButtons: true,
preConfirm: () => {
const NewBotName = Swal.getPopup().querySelector('#newbotname').value
if (!NewBotName) {
Swal.showValidationMessage(`Please ensure that you have entered a new bot name!`)
}
return { NewBotName: NewBotName }
}
}).then((result) => {
$.post("/service/bots/general/update/name",
{
NewBotName: `${result.value.NewBotName}`
},
function(data, status){
if (data.success == true) {
Swal.fire(
'Updated!',
'Your bot name has been updated.',
'success'
)
} else {
Swal.fire(
'Oops!',
'There was an error updating your bot name.',
'error'
)
}
});
})
})
});
I tried reading up on other answers about this but could not find one that resolves this, especially it not rendering the HTML properly such as the placeholder.
Update: this was the issue in v11.3.2, please upgrade to v11.3.3.
The problem with your code is that you're trying to imitate manually the build-in functionality with input.
Instead of doing this
Swal.fire({
html: `<br><b>Update Bot Name</b><br><input type="text" id="newbotname" class="swal2-input" placeholder="Enter the new name for your bot.">`,
preConfirm: () => {
const NewBotName = Swal.getPopup().querySelector('#newbotname').value
if (!NewBotName) {
...
})
Do what the documentation suggests you:
Swal.fire({
title: 'Update Bot Name',
input: 'text',
inputPlaceholder: 'Enter the new name for your bot'
preConfirm: (NewBotName) => {
if (!NewBotName) {
...
})