I want to show a success notification if the submit was successful with this js notify library but it's doesn't works.
If I change the new Notify({ ... }) function to a simple alert("success"); then the alert is showing up...
But if I insert the same js code in the browser's Console then it's showing the notify ...
<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>
This statement in your comment under the question clarifies the issue:
I want to send the form's data then the page is just reloading immadiatelly and the notify doesn't showing up
The issue is because you've not called preventDefault() on the event which is raised. Therefore the form is still submit through the standard manner and a page redirect occurs. As you're using AJAX you need to prevent this behaviour.
Also note that it's slightly more semantic to hook the event handler to the submit event of the form element instead of the click of the submit button. Try this:
$("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);
}
});
});