Quiero mostrar una notificación de éxito si el envío fue exitoso con esta biblioteca de notificaciones js pero no funciona.
Si cambio la new Notify({ ... }) a una alert("success"); entonces aparece la alerta...
Pero si inserto el mismo código js en la consola del navegador, muestra la notificación...
<form action="" method="post"> <div class="form-group"> <label for="title"><h6>Title</h6></label> <input type="text" class="form-control" name="title" id="title"> </div> <div class="form-group"> <label for="content"><h6>Content</h6></label> <textarea class="form-control" id="content" name="content"></textarea> </div> <div class="form-group"> <button type="submit" class="btn btn-primary" id="edit">Save</button> </div> </form> <script> $("#edit").click(function() { var title = $("#title").val(); var content = $("#content").val(); $.ajax({ type: "POST", url: "edit.php", data: { title: title, content: content }, cache: false, success: function(data) { new Notify({ status: 'success', title: 'Test', text: 'Success', effect: 'fade', speed: 300, customClass: null, customIcon: null, showIcon: true, showCloseButton: true, autoclose: false, autotimeout: 3000, gap: 20, distance: 20, type: 1, position: 'right top' }) }, error: function(xhr, status, error) { console.error(xhr); } }); }); </script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-notify@0.5.5/dist/simple-notify.min.css" /> <script src="https://cdn.jsdelivr.net/npm/simple-notify@0.5.5/dist/simple-notify.min.js"></script>Esta declaración en su comentario debajo de la pregunta aclara el problema:
Quiero enviar los datos del formulario, luego la página se está recargando inmediatamente y la notificación no aparece.
El problema se debe a que no ha llamado a preventDefault() en el evento que se genera. Por lo tanto, el formulario aún se envía de la manera estándar y se produce una redirección de página. Como está utilizando AJAX, debe evitar este comportamiento.
También tenga en cuenta que es un poco más semántico vincular el controlador de eventos al evento de submit del elemento de form en lugar del click del button de envío. Prueba esto:
$("form").on('submit', e => { e.preventDefault(); // stop form submission $.ajax({ type: "POST", url: "edit.php", data: { title: $("#title").val(), content: $("#content").val() }, cache: false, success: function(data) { new Notify({ status: 'success', title: 'Test', text: 'Success', effect: 'fade', speed: 300, customClass: null, customIcon: null, showIcon: true, showCloseButton: true, autoclose: false, autotimeout: 3000, gap: 20, distance: 20, type: 1, position: 'right top' }) }, error: function(xhr, status, error) { console.error(xhr); } }); });