Estoy intentando escribir HTML personalizado en SweetAlert2, el código que intento crear hace que el usuario ingrese un nombre de bot y luego lo envíe a nuestra API.
El código funciona bien en Windows, sin embargo, cuando hago esto en Chrome MacOS, aparece el error Uncaught (in promise) TypeError: Cannot read properties of null (reading 'value') . El marcador de posición tampoco se registra en MacOS, aunque todo esto funciona bien en Chrome Windows. Imagen del marcador de posición que no se registra. Error de envío
Creo que tiene que ver con el HTML que no se registra en Chrome Mac porque eché un vistazo dentro de la consola del desarrollador y descubrí que no mostraba el marcador de posición o la ID en absoluto. Imagen de la consola del desarrollador
HTML original:
<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>Alerta dulce 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' ) } }); }) }) });Intenté leer otras respuestas sobre esto, pero no pude encontrar una que lo resuelva, especialmente si no muestra el HTML correctamente, como el marcador de posición.
Actualización: este fue el problema en v11.3.2, actualice a v11.3.3.
El problema con su código es que está tratando de imitar manualmente la funcionalidad integrada con la entrada.
En lugar de hacer esto
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) { ... })Haz lo que la documentación te sugiere:
Swal.fire({ title: 'Update Bot Name', input: 'text', inputPlaceholder: 'Enter the new name for your bot' preConfirm: (NewBotName) => { if (!NewBotName) { ... })