loading progress form submit using sweetalert - javascript

I would like to render a waiting time animation when submitting a form, but I prefer to use SweetAlert rather than a standard loading image.
This the basic code:
$("form").submit(function (e) {
e.preventDefault(); // stops the default action
$("#loader").show(); // shows the loading screen
$.ajax({
url: test.php,
type: "POST"
success: function (returnhtml) {
$("#loader").hide(); // hides loading sccreen in success call back
}
});
});
This is the code SweetAlert wants to implement:
window.swal({
title: "Checking...",
text: "Please wait",
imageUrl: "images/ajaxloader.gif",
showConfirmButton: false,
allowOutsideClick: false
});
//using setTimeout to simulate ajax request
setTimeout(() => {
window.swal({
title: "Finished!",
showConfirmButton: false,
timer: 1000
});
}, 2000);
<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-dev.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" />
plz someone make the tips for doing this

You were almost there! Just replace the #loader code with the sweet alert code.
$("form").submit(function (e) {
e.preventDefault(); // stops the default action
//$("#loader").show(); // shows the loading screen
window.swal({
title: "Checking...",
text: "Please wait",
imageUrl: "images/ajaxloader.gif",
showConfirmButton: false,
allowOutsideClick: false
});
$.ajax({
url: test.php,
type: "POST"
success: function (returnhtml) {
//$("#loader").hide(); // hides loading sccreen in success call back
window.swal({
title: "Finished!",
showConfirmButton: false,
timer: 1000
});
}
});
});

Related

Hide div after page reloaded on sweet alert

i'm using sweetalert in ajax post data, and have a div element that i want to hide after page reload, from the code below what i can do to do that :
$(document).ready(function() {
$(document).on('click', '#approve', function() {
swal.fire({
title: 'Are you sure ?',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes',
cancelButtonText: 'Cancel',
}).then((result) => {
if (result.value) {
$('.leftForms').each(function(e) {
valuesToSend = $(this).serialize();
$.ajax($(this).attr('action'), {
url: 'data.php',
type: 'POST',
method: $(this).attr('method'),
data: valuesToSend
})
.done(function(response) {
swal.fire({
title: 'Data berhasil diupdate!',
text: response.message,
icon: 'success'
}).then(function() {
location.reload();
localStorage.removeItem('leftcontent');
localStorage.getItem('rightcontent', data);
});
})
});
}
})
});
});
i want to hide this, at the moment after location.reload(), is that possible ?
<div id="content1">
<p>blaa..blaa.. bla..</p>
</div>
Why are you reloading the page ? You can hide remove the div using JavaScript instead.
Instead of location.reload(); do $("#content1").remove(); to remove the element or $("#content1").hide() to hide it.
Also localStorage.removeItem('leftcontent'); and localStorage.getItem('rightcontent', data); isn't being executed.
if you want this choice to actually persist you need to save something to a database for clear reasons, you could use local storage but it will be cleared if the user clears the cache, just save the choice to the local storage then just check for that var when the page reloads and remove the element with:
...
.then(function() {
localStorage.setItem('choice','hide');
location.reload();
$(document).ready(function() {
if(localStorage.getItem('choice')=='hide'){
$("#content1").remove();
}
...
but as #Gazmend pointed out you don't even need to reload the page, just remove the element instead of reloading if reloading is not necessary for other reasons

Open swal without clicking any ok or cancel icon

I am using sweetalert 2 where I just need to open the swal directly calling ajax instead of doing an confirm or something, what change I need to do, following this code
https://sweetalert2.github.io/recipe-gallery/bootstrap.html
Tried it like this
$(document).on('click','.readmore',function() {
swal({
title: 'ajax request pending',
text: 'processing request',
showConfirmButton: false,
closeOnConfirm: false,
preConfirm => function(){
url: 'https://example.com/controller/method/action',
type: post,
dataType: json,
data: { key: value },
success: swal.confirm( response.message ),
error: swal.confirm( response.message )
}
},
function(){
swal({
title: 'ajax request finished',
text: response.message,
showSpinner: false,
showConfirmButton: true,
closeOnConfirm: true
});
}
});
But it ended up in a error :d
Uncaught SyntaxError: missing : after property id

SweetAlert2 : Some difficults to configure my alert

I'm trying to use sweetAlert2. https://sweetalert2.github.io/
The plan is as follows:
1) Display of the main alert
2) If he clicks on "Cancel", I close the alert normally.
3) If he clicks on "OK", then the button goes to the loading position, but the alert does not close. And in the meantime I make an Ajax request. And when it's over, only then can I close the 1st alert and view the second.
4) When I click on "OK" on the second alert, the page reloads.
But for the moment I cannot manage well how to display the alerts when I click on OK and Cancel.
I have this code below:
Swal.fire({
title: 'Change to '+planName,
text: message,
icon: "info",
showCancelButton: true,
showLoaderOnConfirm: true,
preConfirm: function () {
// todo - actually change the plan!
$.ajax({
url: changeUrl,
method: 'POST'
}).done(function(){
Swal.fire({
title: 'Plan changed !',
icon: 'success',
},function() {
location.reload();
})
});
}
});
When I click on CANCEL on the 1st alert, everything is going well.
But if I click OK, then I see the confirmation button go into "loader" but the alert closes directly. Then my Ajax request is made and then displays the second alert.
Could anyone help me please ?
EDIT: current code :
Swal.fire({
title: 'Change to '+planName,
text: message,
icon: "info",
showCancelButton: true,
showLoaderOnConfirm: true,
preConfirm: function () {
// todo - actually change the plan!
return $.ajax({
url: changeUrl,
method: 'POST'
}).done(function(){
Swal.fire({
title: 'Plan changed !',
icon: 'success',
},function() {
location.reload();
})
});
}
});
How about doing this
Swal.fire({
title: 'Change to '+planName,
text: message,
icon: "info",
showCancelButton: true,
showLoaderOnConfirm: true,
preConfirm: function () {
// todo - actually change the plan!
return $.ajax({
url: changeUrl,
method: 'POST'
}).done(function(){
Swal.fire({
title: 'Plan changed !',
icon: 'success',
},function() {
location.reload();
})
});
}
});
Here is a sandbox with a similar implementation
https://codesandbox.io/s/muddy-smoke-5gwf0

Loading html inside sweet alert?

Here is my code for callling Swal:
window.swal({
title: "Checking...",
text: "Please wait",
imageUrl: "{{ asset('media/photos/loaderspin.gif') }}",
showConfirmButton: false,
allowOutsideClick: false
});
$.ajax({
type: 'POST',
url: '/' + target,
data: {
data: true
},
success: function(response) {
window.swal({
type: 'info',
width: 900,
padding: '3em',
html: response,
showCloseButton: true,
focusConfirm: false,
});
},
error: function(response) {
}
});
Basically I'm making an ajax request that does a return view('index', compact('data')); in the controller.
The html that I'm trying to load inside Swal has a <script src="my-file.js"></script> inside it, but it does not get loaded when Swal is fired, so no events get fired when I click inside.
I've tried looking in the docs but I can't find anything. How will I get swal to load that file?
I was able to solve this by adding this line inside the success block:
$.getScript('my-file.js')

When I use Ajax sweet Alert doesn't show image. I'm working with laravel

When I use Ajax sweet Alert doesn't show image. I'm working with laravel.
This is my code, if I delete the ajax function or I use a image from another website it works.
I really have no clue, I think laravel need some kind of authetication from a Ajax request. Please help me out!
$(document).ready(function() {
$('.confirmation').click(function(e) {
e.preventDefault(); // Prevent the href from redirecting directly
var linkURL = $(this).attr("href");
warnBeforeRedirect(linkURL);
});
function warnBeforeRedirect(linkURL) {
swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover this team!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal({
title: "Checking...",
text: "Please wait",
icon: icons,
button: false,
allowOutsideClick: false
});
$.ajax({
url: linkURL,
type: 'GET',
success: function(result){
swal("The team was deleted!");
}
});
} else {
swal("The team was NOT deleted!");
}
});
}
});

Categories