sweetalert
A beautiful replacement for JavaScript's "alert"
I am using sweet-alert plugin to display an alert. With a classical config (defaults), everything goes OK. But when I want to add a HTML tag into the TEXT, it display <b>...</b> without making it bold. After searching for the answer, it looks like I don't have the right search word...
How to make sweet alert display the text also with HTML code?
var hh = "<b>test</b>";
swal({
title: "" + txt + "",
text: "Testno sporocilo za objekt " + hh + "",
confirmButtonText: "V redu",
allowOutsideClick: "true"
});
Source: (StackOverflow)
I just installed sweet-alert-rails-confirm on my rails application, and it worked fine when using the data-confirm attribute with link_to, but when I added the data-confirm attribute to a form submit button it still shows the old javascript confirm prompt, like the following:
<%= f.submit "#{@projeto.new_record? ? 'Cadastrar' : 'Atualizar'} #{f.object.e_proposta? ? 'proposta' : 'projeto' }", data: { confirm: 'Tem certeza?' } if current_user.administrador_do_perfil?(perfil)%>
Source: (StackOverflow)
I am trying to display a message to the user before he closes the window. I am using SweetAlert (http://tristanedwards.me/sweetalert) which is running fine.
The problem is with the JavaScript/jQuery to let me know when the user is trying to close the window/tab and then to display something preventing him from closing the page unless he clicks again.
<script language="JavaScript">
window.onbeforeunload = confirmExit;
function confirmExit() {
swal("Here's a message!");
return "You have attempted to leave this page. Are you sure?";
}
</script>
I have tried this, but it displays the ugly usual message on top of my SweetAlert, any ideas?
Without the return part it closes the window anyway, I tried :/
If you want to see it in action, try it out on the preview of my website.
http://leofontes.me/webDieta/
Source: (StackOverflow)
I tried sweeAlert plugin, which works perfectly, but I cant figure out how to do default stuff after confirm.
$(document).ready(function () {
function handleDelete(e){
e.preventDefault();
swal({
title: "Are you sure?",
text: "You will not be able to recover the delaer again!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete!",
closeOnConfirm: false
},
function (isConfirm) {
if (isConfirm) {
return true;
}
});
};
});
and the button
<a rel='nofollow' href="{plink delete! $row->id_dealers}" class="delete" onclick"handleDelete(event);"> </a>
//{plink delete! $row->id_dealers} Nette -> calls php delete handler
I also tried unbind() and off() instead of return false, doesnt work.
Earlier I used confirm() with return true and return falsein onclick attribute, it works, but it looks awful.
Source: (StackOverflow)
I'm trying to override the default confirm() dialog with the sweetAlert2 confirm dialog.
However it continues to return and continue with the deletion process without clicking OK.
$("a.confirm").click(function(){
swal({
title: 'Are you sure?',
text: $(this).attr('data-message'),
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes',
closeOnConfirm: true },
function(isConfirm) {
if(isConfirm === true){
alert('it is true');
} else {
return false;
}
});
});
The idea for this is simple. I have a class on any link that may require a confirmation, the message for the confirmation is assigned to a data-message attribute.
More often than not, it automatically skips to the URL instead of waiting for the OK button to be clicked.
I have looked at the examples which display an additional dialog saying thank you to the user, but in this case I'm trying to simply return true only when clicking OK. not to display an additional dialog.
Any tips greatly appreciated
Source: (StackOverflow)
I'm using a custom version of sweetalert to ask my user for an input. Id managed to make the everything work but there is an strange behavior; In order to be able to input a text in the input box you have to click screen first:
swal({
title: "Aggiornamento profilo",
text: '<br /><form method="post" id="taxcode-update" name="taxcodeUpdate"><input id="admin-tax-code" minlength="3" class="form-control wedding-input-text wizard-input-pad" type="text" name="taxCode" placeholder="Codice fiscale"></form>',
type: "warning",
showCancelButton: false,
confirmButtonText: "Aggiorna il mio profilo",
closeOnConfirm: false
}, function () {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
Working example: https://jsfiddle.net/fvkppx06/
Source: (StackOverflow)
I want to you the - SweetAlert for my Website. Now I need to configuration the SweetAlert with this code, so that on klick the "OK" button, it will send via POST formaction="/link/link" post="test=1"
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: " warning ",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: " No, cancel plx!",
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 want to ask you, how can I build it in.
Source: (StackOverflow)
I am trying to override javascript confirm box with SweetAlert.
I have researched also about this but I can't found proper solution.
I am using confirm like this
if (confirm('Do you want to remove this assessment') == true) {
//something
}
else {
//something
}
And I am using this for overriding
window.confirm = function (data, title, okAction) {
swal({
title: "", text: data, type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes", cancelButtonText: "No", closeOnConfirm: true, closeOnCancel: true
}, function (isConfirm) {
if (isConfirm)
{
okAction();
}
});
// return proxied.apply(this, arguments);
};
Now confirm box is replaced with sweetalert.
When user click on Yes button then OK action of confirm box should be called. But this isn't calling
And In above code an error occurred Uncaught TypeError: okAction is not a function.
Please suggest me I should I do for override confirm box.
Source: (StackOverflow)
I have been playing a little with the SweetAlert plugin: Sweet alert
I wanted to make a delete button, where the user gets prompted before the actual delete. When the user then presses "delete" again, is then says "done" and the user has to click "ok" again for the prompt to go away for good.
SweetAlert has a timer function, so you can auto close that last "Done" prompt after a few seconds or so, which works just fine. They also have a feature, where you can implement a function to be run when the user clicks "OK" on the "Done" prompt. Problem is, that function is not run, if the prompt auto closes after the timer is done.
Any ideas how this can be done?
With Timer and function not being run:
swal({
title: "Deleted!",
text: "Your row has been deleted.",
type: "success",
timer: 3000
},
function () {
location.reload(true);
tr.hide();
});
Without timer, but with working function (on click "ok" button):
swal("Deleted!", "Your row has been deleted.", "success"), function () {
location.reload();
tr.hide();
};
Source: (StackOverflow)
I'm using the sweet alert plugin for fancy javascript alerts. But U only need one alert, when there is something in the $_GET var. No Problem. Then I had put in a facebook box into the "text" and the script was broken. I figured out that without the php if statement it works so the problem has to be the ' and " of the line:
echo 'text: "Thank you so much for your support!<br><br><small>
Now please follow us on Facebook.</small><br><br><div class="fb-follow"
data-href0="https://www.facebook.com/pages/Juuin/1618729241739708"
data-layout="box_count" data-show-faces="true"></div>",';`
The whole script is looking like this:
<?php
if($_GET['reg'] == "sucess"){
echo '<script>';
echo 'sweetAlert({';
echo 'title: "You did it!",';
echo 'text: "Thank you so much for your support!<br><br><small>Now please follow us on Facebook.</small><br><br><div class="fb-follow" data-href0="https://www.facebook.com/pages/Juuin/1618729241739708" data-layout="box_count" data-show-faces="true"></div>",';
echo 'html: true';
echo '});';
echo '</script>';
}
?>
Source: (StackOverflow)
I'm using SweetAlert and for change icon image size I go to .css file:
.sweet-alert .sa-icon {
width: 80px;
height: 80px;
border: 4px solid gray;
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
margin: 20px auto;
padding: 0;
position: relative;
box-sizing: content-box; }
I have changed these values:
width: 80px;
height: 80px;
But I can't see the changes
If I remove .sa-icon. and add this in my .tpl page:
<img src="http://placehold.it/350x150" class="sweet-alert">
The alert doesn't open.
I use this code for open Alert:
<script type="text/javascript"> sweetAlert({ title: "ADULT CONTENT", text: "ARE YOU OVER 18?", imageUrl: "dist/image.png", showCancelButton: true, cancelButtonText: "No", confirmButtonColor: "#ff0000", confirmButtonText: "Yes, I'am Over 18", closeOnConfirm: true }, function(isConfirm){ if (isConfirm) { } else { window.location.href = 'http://'; } }); </script>
The only problem is the size of my image. I can't change it. Suggestions?
Source: (StackOverflow)
I've this sweetalert triggered on submit of a form.
$(".swa-confirm").on("submit", function(e) {
e.preventDefault();
swal({
title: $(this).data("swa-title"),
text: $(this).data("swa-text"),
type: "warning",
showCancelButton: true,
confirmButtonColor: "#cc3f44",
confirmButtonText: $(this).data("swa-btn-txt"),
closeOnConfirm: false,
html: false
}, function() {
}
);
});
but on clicking confirm I want it to continue submiting the form...
Bad ideas come to mind, like:
var confirmed = false;
$(".swa-confirm").on("submit", function(e) {
var $this = $(this);
if (!confirmed) {
e.preventDefault();
swal({
title: $(this).data("swa-title"),
text: $(this).data("swa-text"),
type: "warning",
showCancelButton: true,
confirmButtonColor: "#cc3f44",
confirmButtonText: $(this).data("swa-btn-txt"),
closeOnConfirm: true,
html: false
}, function() {
confirmed = true;
$this.submit();
});
}
});
or moving swa to button click instead of on submit, and using on submit of a form.
but I don't like this solution, it looks frankesteini to me. Surely there is a better way
Source: (StackOverflow)
The code so far:
<!DOCTYPE html>
<html>
<head>
<title>Project 506</title>
<script type="text/javascript" src="sweetalert.min.js"></script>
<script src="https://ajax.googlesapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" rel='nofollow' href="sweetalert.css" type="text/css" />
<style type="text/css">
body {
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#first").click(function () {
sweetAlert("Oops...", "Something went wrong!", "error");
});
});
</script>
</head>
<body>
<h1>Message Boxes</h1>
<input type="button" id="first" value="Just a Notification" />
<input type="button" id="second" value="Successfully Completed!" />
<input type="button" id="third" value="Something Went Wrong!" />
</body>
</html>
I'm not clear on why the sweetAlert animation still doesn't pop up when I click on the first button. I've tried moving the lines of <script> into different parts of the script, but it still doesn't work. So how can I solve this problem?
Source: (StackOverflow)
My goal is to only allow form submission after user clicks "Ok" on a SweetAlert box.
So, he clicks on an image (form), box appears with some instructions, he reads and clicks on "Ok", and then the form is submitted.
Here is the form code:
<form id="formpag" action="https://example.com/request.html" method="post">
<input type="hidden" name="code" value="7055C88A445678A00461CFA120F4A2E7" />
<input type="image" src="https://example.com/buttons/subscriptions/120x53-subscribe.gif" name="submit" alt="Pay with Example.com - it is fast and reliable!" />
</form>
Now the jQuery/Sweet Alert part:
jQuery( document ).ready(function( $ ) {
$(function() {
$('#formpag').submit(function() {
swal({ title: "Be Advised",
text: "You need to check your email account after payment.",
imageUrl: "images/thumbs-up.jpg" });
});
});
});
Problem: as it is now, box is showing to user, but after a few seconds, the form is being submitted, even without him clicking the OK button on the SweetAlert box.
Form must only be submitted if he clicks "OK".
Any help would be much appreciated. (sorry, I know it is a silly question, but SweetAlert documentation did not help me).
Source: (StackOverflow)
I would like to implement a form inside of the sweet alert. I can put just one input inside, with title and body.
There is a way to customize the alert, docs says it, but is not allowed to load class css3 from my framework (customizecss.com) or from my style.css.
I'm trying to include a input inside of the alert, this way:
swal({
title: "HTML <small>Title</small>!",
text: "<input type='text'><label class='my-label'>Name</label>",
html: true
});
And it doesn't work, only show the label... why?
I wonder if there is some way to do it...
Thanks!
Sweet Alert -> https://github.com/t4t5/sweetalert
Source: (StackOverflow)