We Keep Coding

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

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!");
}
});
}
});

loading progress form submit using sweetalert

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
});
}
});
});

Call other file html with metro ui JS Dialog

Guys do you know how to call external file for insert to dialog with Metro ui framework. I have followed docs here: http://metroui.org.ua/dialog.html
But its not showing how to call external file like .html or .php. Please can you help me advice or solution.thanks

You can make an ajax call and set the result as content for the dialog on onShow event. [source]
$("#createFlatWindow").on('click', function(){
$.Dialog({
overlay: true,
shadow: true,
flat: true,
icon: '<img src="images/excel2013icon.png">',
title: 'Flat window',
content: '',
onShow: function(_dialog){
$.ajax({
url: "test.php",
dataType: "html",
success: function(result){
var html = result;
$.Dialog.content(html);
}
});
}
});
});