Develop Reference

sweet alert redirect to same jsp with changing section

This is my home.jsp and my sweet alert redirects to same page to other section. The redirect is successful but the sweet alert is not closed. If i set closeOnConfirm as true redirect is not working.
$(document).ready(function(){
$(".btn").on("click",function(){
var dataString=$("#myForm").serialize();
$.ajax({
type: "POST",
url: "some.jsp",
dataType: 'json',
data: dataString,
success: function (data) {
console.log(data);//"success"
if (data.stat === "success") {
swal({
title: "Submitted!",
closeOnConfirm: false
}, function () {
window.location.href="home.jsp#about";
});
} else if (data.stat === "failed") {
swal({
title: "Submission Failed!",
closeOnConfirm: true
});
}
},
error: function (data) {
console.log(data);
}
});
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<div id="myForm">
<form>
<input type="text" name="text">
<input type="button" value="Send" class="btn">
</form>
</div>
<div id="about">
<!-- Some Data -->
</div>

Try changing your sweetalert config in the following way it works fine
sweetAlert({
title: "Hello",
text: "<button type='button' class='btn btn-fb fb-share'>Share on Facebook</button>",
type: null,
confirmButtonText: "Close",
html: true,
closeOnConfirm: true, //It does close the popup when I click on close button
closeOnCancel: true,
allowOutsideClick: true
}, function() {});
$(document).on("click", ".fb-share", function(e) {
//do something else
openFbPopup();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

swal.close() in call back function cleared my problem.
$(document).ready(function() {
$(".btn").on("click", function() {
var dataString = $("#myForm").serialize();
$.ajax({
type: "POST",
url: "some.jsp",
dataType: 'json',
data: dataString,
success: function(data) {
console.log(data); //"success"
if (data.stat === "success") {
swal({
title: "Submitted!",
confirmButtonText: "Visit About",
closeOnConfirm: false
}, function() {
window.location.href = "home.jsp#about";
swal.close();
});
} else if (data.stat === "failed") {
swal({
title: "Submission Failed!",
closeOnConfirm: true
});
}
},
error: function(data) {
console.log(data);
}
});
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<div id="myForm">
<form>
<input type="text" name="text">
<input type="button" value="Send" class="btn">
</form>
</div>
<div id="about">
<!-- Some Data -->
</div>

How to reset form with sweetalert2

I am using SweetAlert2. I want when user click on Reset button a popUp of SweetAlert appears for confirmation. I had done this already.
HTML
<form id="storyForm" action="ephp/storyPublish.php" method="POST">
<input type="text" name="userName" />
<input type="Email" name="userEmail" />
<button type="submit">Publish</button>
<button type="reset" class="model_img" id="sa-warning">Reset</button>
</form>
JS
$("#storyForm").on('reset', function(e) {
var form = $(this);
e.preventDefault();
swal({
title: "Are you sure?",
text: "Do you really want to reset?",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Go on!',
cancelButtonText: "Ops no!",
}).then(function(isConfirm) {
swal({
title: 'Success!',
text: 'Invoice created! Go to the invoice tab to pay it.',
type: 'success'
}, function() {
form.reset();
});
},function(dismiss) {
if(dismiss == 'cancel') {
swal("Cancelled", "Invoice not created!", "error");
}
});
});
PopUp is appearing but form is not reseting, what's wrong with this Javascript?
Here is the Fiddle

Hi I was able to get your form to reset but not using your form.reset() function, I was able to get it to work by giving the inputs ids and then handling the reset using sweetalerts result.
HTML
<form id="storyForm" action="ephp/storyPublish.php" method="POST">
<input type="text" name="userName" id="userName" /> <!--added the id here-->
<input type="Email" name="userEmail" id="userEmail" /> <!--added the id here-->
<button type="submit">Publish</button>
<button type="reset" class="model_img" id="sa-warning">Reset</button>
</form>
JavaScript
$("#storyForm").on('reset', function(e) {
var form = $(this);
e.preventDefault();
swal({
title: "Are you sure?",
text: "Do you really want to reset?",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Go on!',
cancelButtonText: "Ops no!",
}).then((result) => {
if (result.value) {
$("#userName").val("");
$("#userEmail").val("");
swal(
'Reset!',
'Your form has been reset.',
'success'
)
/*swal({
title: 'Success!',
text: 'Invoice created! Go to the invoice tab to pay it.',
type: 'success'
});*/
// result.dismiss can be 'cancel', 'overlay',
} else if (result.dismiss === 'cancel') {
swal("Cancelled", "Invoice not created!", "error");
}
});
});
NOTE - I commented out your Success swal as it wasn't adding an invoice but if you want it to do so just un comment it and remove the sweetalert above it.
Here is a jsFiddle
I hope this helps good luck!

onclick event only work on first <td> child (laravel foreach)

I make button action on every data from table row. every row produces using foreach laravel blade template. the event will trigger a Javascript action to delete the data. but on my case the button only work on first row data.
here my Javascript and html code :
function hapusFaskes(kode){
var kodeStr = kode.toString();
var mes = confirm('Yakin Faskesnya mau di Hapus?');
alert(kode);
if (mes == true){
$.ajax({
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
url:'{{url('deleteFaskes')}}'+'/'+kode,
type:'get',
success: function (r){
console.log(r);
alert(r);
location.reload();
}
});
}
}
<tbody id="hasil-tabel">
#foreach ($faskes as $val)
<tr>
<td>{{$val->kode}}</td>
<td>{{$val->nama}}</td>
<td>{{$val->jenis}}</td>
<td>{{$val->alamat}}</td>
<td>{{$val->notelp}}</td>
<td>{{$val->jambuka}}</td>
<td>
<a href="{{url('editfaskes').'/'.$val->kode}}" class="btn btn-default" >Edit</a>
Hapus
</td>
</tr>
#endforeach
</tbody>
I don't know if there are something wrong on my code, if you know something wrong, please inform me and that will be a big help for me if you know something wrong on my code. thanks

Try using the below code with form action along with sweet alert for confirmation.
<form action="{{ url('deleteFaskes/'. kode) }}" method="POST" class="btn-inblock-laravel">
{!! method_field('delete') !!}
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<a class="btn btn-danger btn-icon btn-xs tip" type="button" onclick="commonDelete(this)"><i class="icon-remove3"></i></a>
</form>
// include sweet alert js in assets folder
<script src="{{ asset('assets/js/sweetalert.min.js') }}"></script>
<script>
function commonDelete(element) {
swal({
title: "Are you sure?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function () {
element.parentElement.submit();
setTimeout(function () {
swal({
title: "Deleted!",
text: "",
type: "success",
showConfirmButton: false
});
}, 2000);
});
}
</script>

Form onSubmit with SweetAlert2

function confirmdelete()
{
return swal({ title: 'Are you sure?',
text: 'You will not be able to recover this imaginary file!',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
closeOnConfirm: false },
function() {
swal( 'Deleted!',
'Your file has been deleted.',
'success' );
});
}
<form action="<?=$site_url?>admin/islemler/delete.php" method="post" class="form-inline" onsubmit="return confirmdelete()">
<input type="button" id="<?=$calismalarimiz['id']?>" class="btn btn-warning btn-xs guncelle" value="Güncelle"/>
<input type="hidden" name="sil<?=$calismalarimiz['id']?>" value="<?=$calismalarimiz['id']?>"/>
<input type="submit" id="sil<?=$calismalarimiz['id']?>" class="btn btn-danger btn-xs" value="Sil"/>
</form>
if I click submit button, sweetAlert is show, but before clicking confirm or cancel button, form post delete.php

SweetAlert isn't waiting confirm

My SweetAlert confirm is not waiting any action. Confirm box just flashes and then action will be executed. What's wrong?
<script type="text/javascript">
function confirmDelete() {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Delete",
cancelButtonText: "Cancel",
closeOnConfirm: false,
closeOnCancel: false
});
}
</script>
<form onsubmit="confirmDelete()" action="index.php" method="post">
<button type="submit" name="delete">Delete</button>
</form>
Also tried this. Same problem... the window just flashes and action executes.
<script type="text/javascript">
function confirmDelete() {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Delete",
cancelButtonText: "Cancel",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
document.deleteForm.submit();
}
});
}
</script>
<form id="deleteForm" action="index.php" method="post">
<button onclick="confirmDelete()" type="input" name="delete">Delete</button>
</form>

You can use preventDefault:
<form id="deleteForm" action="index.php" method="post">
<button id="delete-btn" type="input" name="delete">Delete</button>
</form>
<script type="text/javascript">
$("#delete-btn").on("click", function(e) {
e.preventDefault(); //prevents the form from being submitted
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Delete",
cancelButtonText: "Cancel",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
document.deleteForm.submit();
}
});
}
</script>

Change your code as per below:
In view:
<form id="my_form" action="index.php" method="post">
DELETE
</form>
In js code:
<script>
$(document).ready(function(){
$('._delete_data').click(function(e){
Swal.fire({
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((result) => {
if (result.value) {
$(document).find('#my_form').submit();
}
})
});
});
</script>