I'am use sweeet alert with type input text to handle confirmation in my program. This is my js code,
$(document).on('click', '.tl_skripsi', function(){
var id = $(this).attr("id"); //ID mjudul
Swal.fire({
title: "Anda yakin tidak lulus?",
text: "",
input: 'text',
inputPlaceholder: "Ketik 'TIDAK LULUS'",
confirmButtonColor: "#DD6B55",
confirmButtonText: "Tidak Lulus",
closeOnConfirm: false,
cancelButtonText: "Batal",
showCancelButton: true,
}).then(result => {
var konfirmasi = swal.getInput();
if (konfirmasi === "TIDAK LULUS") {
$.ajax({
url: '<?php echo base_url(); ?>prodi/#',
type: 'POST',
data: {id: id},
error: function() {
alert('Something is wrong');
},
success: function(data) {
window.location.href="<?php echo base_url(); ?>prodi/redirect_tl_skripsi";
}
});
} else {
toastr.error(konfirmasi);
}
})
});
My problem is condition always return false even though I have type TIDAK LULUS.
Note: value konfirmasi is captured
Related
I have this page for searching and updating students scores using Ajax.
I have the following JavaScript code to save scores using ajax when 'Save' button is clicked:
function saveScores() {
const id = arguments[0];
var form = document.querySelector("#scores-form");
var studRegNo = form.querySelector('input[name="studRegNo'+id+'"]').value;
var visit1 = form.querySelector('input[name="visit1'+id+'"]').value;
var visit2 = form.querySelector('input[name="visit2'+id+'"]').value;
var visit3 = form.querySelector('input[name="visit3'+id+'"]').value;
var visit4 = form.querySelector('input[name="visit4'+id+'"]').value;
var visit5 = form.querySelector('input[name="visit5'+id+'"]').value;
var visit6 = form.querySelector('input[name="visit6'+id+'"]').value;
const Toast = Swal.mixin({
toast: true,
showConfirmButton: true,
confirmButtonColor: '#10393b',
showCancelButton: true,
confirmButtonText: 'Yes',
cancelButtonText: 'No',
})
Toast.fire({
icon: 'question',
title: 'Do you want to save changes'
}).then((result) => {
if (result.dismiss !== 'cancel') {
$.ajax({
type: 'POST',
url: '../include/ajaxInsert.php',
data: {
studRegNo: studRegNo,
userId: <?php echo $userId; ?>,
visit1: visit1,
visit2: visit2,
visit3: visit3,
visit4: visit4,
visit5: visit5,
visit6: visit6,
id: id,
},
cache: false,
success: function(data) {
if(data!="empty"){
const Toast = Swal.mixin({
toast: true,
showConfirmButton: false,
timer: 2500,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
Toast.fire({
icon: 'success',
title: 'Changes saved successfully.'
})
}
else{
const Toast = Swal.mixin({
toast: true,
showConfirmButton: false,
timer: 1500,
timerProgressBar: true,
})
Toast.fire({
icon: 'warning',
title: 'No changes made.'
})
}
},
error: function(xhr, status, error) {
console.error(xhr);
},
});
}
})
}
I can successfully search students using PHP/PDO and display the result
I can successfully save the scores without refreshing the page
What I want is to refresh and update the row affected(Total) or the table data after saving the scores without refreshing the page.
Is that possible? and any solution to do that is welcomed.
You'll have to sum up visit1 through 6 and set the innerHtml of the total element to the result in your success function. You didnt give the id of the total element so i assumed it was total.
function saveScores() {
const id = arguments[0];
var form = document.querySelector("#scores-form");
var studRegNo = form.querySelector('input[name="studRegNo'+id+'"]').value;
var visit1 = form.querySelector('input[name="visit1'+id+'"]').value;
var visit2 = form.querySelector('input[name="visit2'+id+'"]').value;
var visit3 = form.querySelector('input[name="visit3'+id+'"]').value;
var visit4 = form.querySelector('input[name="visit4'+id+'"]').value;
var visit5 = form.querySelector('input[name="visit5'+id+'"]').value;
var visit6 = form.querySelector('input[name="visit6'+id+'"]').value;
const Toast = Swal.mixin({
toast: true,
showConfirmButton: true,
confirmButtonColor: '#10393b',
showCancelButton: true,
confirmButtonText: 'Yes',
cancelButtonText: 'No',
})
Toast.fire({
icon: 'question',
title: 'Do you want to save changes'
}).then((result) => {
if (result.dismiss !== 'cancel') {
$.ajax({
type: 'POST',
url: '../include/ajaxInsert.php',
data: {
studRegNo: studRegNo,
userId: <?php echo $userId; ?>,
visit1: visit1,
visit2: visit2,
visit3: visit3,
visit4: visit4,
visit5: visit5,
visit6: visit6,
id: id,
},
cache: false,
success: function(data) {
if(data!="empty"){
document.getElementById("total").innerHtml = visit1 + visit2 + visit3 + visit4 + visit5 + visit6;
const Toast = Swal.mixin({
toast: true,
showConfirmButton: false,
timer: 2500,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
Toast.fire({
icon: 'success',
title: 'Changes saved successfully.'
})
}
else{
const Toast = Swal.mixin({
toast: true,
showConfirmButton: false,
timer: 1500,
timerProgressBar: true,
})
Toast.fire({
icon: 'warning',
title: 'No changes made.'
})
}
},
error: function(xhr, status, error) {
console.error(xhr);
},
});
}
})
}
I have a sweetalert/javascript function and I want my users to upload two images and one text to my database. I only found out how to upload images using basic HTML "file" boxes. But not how to do it with sweetalert....
This is my sweetalert/Javascript code
$(document).ready(function() {
$('#new-btn').click(function() {
swal.mixin({
input: 'text',
confirmButtonText: 'Next →',
showCancelButton: true,
progressSteps: ['1', '2', '3']
}).queue([{
input: 'file',
inputAttributes: {
name: "image",
class: "image",
},
title: 'Profilbild hochladen',
text: 'Empfohlen wird 1X1'
},
{
input: 'file',
title: 'Hintergrundbild hochladen',
text: 'Empfohlen wird 16X9'
},
{
title: 'Über mich',
text: ''
},
]).then((result) => {
if (result.value) {
var kuerzeltest = "mk304";
$.ajax({
type: "POST",
url: "../../register/profil_update.php",
data: {
"post": result.value[2],
"kuerzel": kuerzeltest
},
});
$.ajax({
type: "POST",
url: "../../register/profil_update.php",
data: {
"bild": new FormData(this),
"bild2": result.value[1],
"kuerzel": kuerzeltest
},
contentType: false,
processData: false,
});
swal(
"Super!",
"Dein Profil wurde erfolgreich aktualisiert ",
"success"
)
}
})
});
})
and this is my backend code
<?php
include_once '../../userdata.php';
//Posts in Datenbank schreiben
$kuerzel = $_POST["kuerzel"];
$bild = $_FILES['bild'];
$bild2 = $_FILES['bild2'];
$post = $_POST["post"];
$pdo = new PDO ($dsn, $dbuser, $dbpass, array('charset'=>'utf8'));
$sql = "INSERT INTO user_bilder (kuerzel, bild, bild2, post) VALUES (?, ?, ?, ?)";
$statement = $pdo->prepare($sql);
$statement->execute(array("$kuerzel", "$bild", "$bild2", "$post"));
$row = $statement->fetchObject();
header("Location: ../webpage/home.php");
?>
My server where I run this code on https://mars.iuk.hdm-stuttgart.de/~mk304/Web_Projekt/webpage/ui/sweetalert/sweetalert_eingabe.php
I really don't know where my error is,
Brief
Hello everyone! I'm starter in javascript. I use Laravel + DataTables in my project. Now I use sweetalert2 instead of default confirms javascript.
Code
Here I call my javascript method:
<a href="#" onclick="deleteData('.$contact->id.')" class="btn btn-danger btn-xs">
<i class="fa fa-trash"></i>
<span>Delete</span>
</a>
Here my javascript function:
function deleteData(id){
var csrf_token = $('meta[name="csrf-token"]').attr('content');
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
cancelButtonColor: '#d33',
confirmButtonColor: '#3085d6',
confirmButtonText: 'Yes, delete it!'
}).then(function(){
$.ajax({
url: "{{url('contact')}}" + '/' + id,
type: "POST",
data: {'_method' : 'DELETE', '_token' : csrf_token},
success: function(data){
contacts.ajax.reload();
swal({
title: 'Success!',
text: 'Data has been deleted!',
type: 'success',
timer: '1500'
})
},
error: function(){
swal({
title: 'Oops...',
text: 'Something went wrong!',
type: 'error',
timer: '1500'
})
}
});
});
}
When I'll click to delete button:
Showing confirm model:
Then I'll click to cancel button. But after click to cancel button deleted data from database. And why are entries deleted in both cases?
You forgot to check the result of resolved promise:
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
cancelButtonColor: '#d33',
confirmButtonColor: '#3085d6',
confirmButtonText: 'Yes, delete it!'
}).then(function(result){
if (result.value) {
// perform the AJAX request
}
});
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7"></script>
Related example from the official docs: https://sweetalert2.github.io/#dismiss-handle
I have a button for deleting one row
<button class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>
and using javascript dialog() for trigger link
<script>
function dialog() {
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function() {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
});
}
</script>
the problem is SweetAlert closed and data in row deleted without confirm
function dialog() {
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
cancelButtonText: 'Cancel',
closeOnConfirm: false,
closeOnCancel: false
}, function (isConfirm) {
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
}
I have codeigniter flashdata + jQuery AJAX call to show it. the code:
<script type="application/javascript">
var res_no = '<?php echo $this->session->flashdata('res_no'); ?>';
var res_new = '<?php echo $this->session->flashdata('res_new'); ?>';
(function( $ ) {
$("#check-reservations").click(function() {
$.ajax({
type: "POST",
url: "mycontroller/function",
async: true,
data: {
res_no: res_no,
res_new: res_new
},
success: function(data) {
if(data) {
alert(data);
}
}
});
});
/*
Default Notifications
*/
$('#check-reservations').show(function() {
if (res_no) {
new PNotify({
title: 'Hmm no new Reservations..',
text: res_no,
type: 'custom',
addclass: 'notification-primary',
icon: 'fa fa-info-circle '
});
}
else if (res_new) {
new PNotify({
title: 'There\'s something new!',
text: res_new,
type: 'custom',
addclass: 'notification-success',
icon: 'fa fa-check'
});
}
});
}).apply( this, [ jQuery ]);
</script>
inside the $.ajax data, i have added both
res_no: res_no,
res_new: res_new
which are just strings with text, upon success I retrive back alert with text. I want to get back the
new PNotify({
title: 'Hmm no new Reservations..',
text: res_no,
type: 'custom',
addclass: 'notification-primary',
icon: 'fa fa-info-circle '
});
PHP:
/**
* #filtered_reservations
* #index
*/
$filtered_reservations = $this->filter_array($reservations);
if (count($filtered_reservations) > 0) {
foreach ($filtered_reservations as $index => $reservation) {
$this->db->insert('reservations', $reservation);
} // end foreach
return $this->session->set_flashdata('res_new', "Success ". count($filtered_reservations) ." Reservations were Inserted!");
print "Success ". count($filtered_reservations) ." Reservations were Inserted!";
print "Reservations: ". count($kigores_id) ." found on kigo!";
} /* end if */
/**
* #filtered_reservations
* equal to 0
*/
elseif (count($filtered_reservations) === 0) {
print "Sorry no new Reservations!";
return $this->session->set_flashdata('res_no', 'Sorry no new Reservations!');
//$this->ci_alerts->set('warning', "Sorry no new Reservations!");
}
} /* end reservations */
What should I write in the data? Only solution I found so far is the window.reload which will show me the notification like I want but with refresh..
In order for that to happen, you need to place this:
$('#check-reservations').show(function() {
if (res_no) {
new PNotify({
title: 'Hmm no new Reservations..',
text: res_no,
type: 'custom',
addclass: 'notification-primary',
icon: 'fa fa-info-circle '
});
} else if (res_new) {
new PNotify({
title: 'There\'s something new!',
text: res_new,
type: 'custom',
addclass: 'notification-success',
icon: 'fa fa-check'
});
}
});
inside your AJAX success results, like this:
$.ajax({
type: "POST",
url: "mycontroller/function",
async: true,
data: {
res_no: res_no,
res_new: res_new
},
success: function(data) {
if(data) {
$('#check-reservations').show(function() {
if (res_no) {
new PNotify({
title: 'Hmm no new Reservations..',
text: res_no,
type: 'custom',
addclass: 'notification-primary',
icon: 'fa fa-info-circle '
});
} else if (res_new) {
new PNotify({
title: 'There\'s something new!',
text: res_new,
type: 'custom',
addclass: 'notification-success',
icon: 'fa fa-check'
});
}
});
}
}
});