I have a sweet alert that has multiple buttons. When a user clicks on a button it is supposed to open a different alert. I am able to get 1 button to work but that is it. Is this possible with Sweet Alert 2?
Code:
$("#swa").on("click", function(e) {
swal({
title: '<u><b>Test 1</b></u><p> </p>',
html:
'<button id="panel2">Panel 2</button>'+
'<p> </p>'+
'<button id="panel3">Panel 3</button>',
showCloseButton: true,
showCancelButton: true,
cancelButtonText: 'Go Back',
width: '75%'
})
$("#panel2").on("click", function(e) {
swal({
title: '<u><b>Test 2</b></u><p> </p>',
html:
'Test 2',
showCloseButton: true,
showCancelButton: true,
cancelButtonText: 'Go Back',
width: '75%'
})
$("#panel3").on("click", function(e) {
swal({
title: '<u><b>Test 3</b></u><p> </p>',
html:
'Test 3',
showCloseButton: true,
showCancelButton: true,
cancelButtonText: 'Go Back',
width: '75%'
})
});
});
});
JS Fiddle
what is happening is that you have your panel3 sweet alert inside your panel2 sweet alert. To fix this just move the });
Your javaScript will now be;
$("#panel2").on("click", function(e) {
swal({
title: '<u><b>Test 2</b></u><p> </p>',
html:
'Test 2',
showCloseButton: true,
showCancelButton: true,
cancelButtonText: 'Go Back',
width: '75%'
})
});// <--moved this here
$("#panel3").on("click", function(e) {
swal({
title: '<u><b>Test 3</b></u><p> </p>',
html:
'Test 3',
showCloseButton: true,
showCancelButton: true,
cancelButtonText: 'Go Back',
width: '75%'
})
});
//<--from here
});// I don't think this line is needed
By the way the last }); is not needed unless it relates to code that you haven't posted.
Good luck.
Related
how do i change the color of the text in cancel button in sweetalert2?
i have tried using custom class but it still doesn't work
return Swal.fire({
text: label,
customClass: {
cancelButtonText: 'custom-cancelButtonText-class',
},
showCancelButton: true,
confirmButtonText: 'Yes',
cancelButtonText: 'No',
confirmButtonColor: '#FFF000',
reverseButtons: true,
})
my css
.custom-cancelButtonText-class{
color: #F04249
}
Try this
cancelButtonText: '<p style='color:#F04249'> No </p>',
return Swal.fire({
text: label,
customClass: {
cancelButtonText: 'custom-cancelButtonText-class',
},
showCancelButton: true,
confirmButtonText: 'Yes',
cancelButtonText: '<p style='color:#F04249'> No </p>',
confirmButtonColor: '#FFF000',
reverseButtons: true,
})
I have this sweetalert triggered on the submit of a form.
<script src="{{ asset('themes/js/sweetalert.min.js') }}"></script>
<script>
$('.btn-danger').click(function(event) {
event.preventDefault();
var form = $(this).parents('#form-delete');
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!",
closeOnConfirm: false
}, function(isConfirm){
if (isConfirm) form.submit();
});
});
</script>
But on clicking confirm I want it to continue submitting the form...
<form action="{{ route('admin.blogs.destroy', $blog->id) }}" method="post" id="form-delete">
#csrf
#method('DELETE')
<div class="btn-group btn-group-sm">
edit
<button type="submit" class="btn btn-danger">delete</button>
</div>
</form>
error
The function swal() doesnt accept a second parameter as the callback anymore, user .then()
<script>
$('.btn-danger').click(function(event) {
event.preventDefault();
var form = $(this).parents('#form-delete');
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!",
closeOnConfirm: false
})
.then(function (isConfirm) {
if (isConfirm) {
form.submit();
}
});
});
</script>
So, I'm having some problem with sweetalert2 (I'm new here).
I have this script and i don't know how to make to be with progress step (see the .gif below)
Set Premium Points</li>
<script>
function givepptoplayer() {
swal({
title: 'Change User Premium Points <?php echo $data->name ?>',
input: 'number',
showCancelButton: false,
confirmButtonText: 'edit',
showLoaderOnConfirm: true,
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger m-l-10',
allowOutsideClick: false,
inputValue: '',
}).then(function (result) {
$.post('<?php echo config::$_PAGE_URL ?>api/finishthis', { 'userid' : '<?php echo $data->id ?>', 'changePP': result.value}, function(result)
{
swal({
type: 'success',
title: 'Succes!',
html: result
});
});
});
}
</script>
I want when to make a progressStep something like here: https://gyazo.com/41f65065108e3937e3afc2a3064ee028
Can you guys give me an example please?
There is an example of chaining modals with related code on https://sweetalert2.github.io/#chaining-modals. Basically the code is:
swal.mixin({
input: 'text',
confirmButtonText: 'Next →',
showCancelButton: true,
progressSteps: ['1', '2', '3']
}).queue([
{
title: 'Question 1',
text: 'Chaining swal2 modals is easy'
},
'Question 2',
'Question 3'
]).then((result) => {
if (result.value) {
swal({
title: 'All done!',
html:
'Your answers: <pre><code>' +
JSON.stringify(result.value) +
'</code></pre>',
confirmButtonText: 'Lovely!'
})
}
})
I am writing a project in laravel, at my current point in the workflow I want the user to be able to click a button to publish or remove an event from the current list.
I am using SA2 to stop the submission to the route before it happens, if the user hits OK, then everything goes as planned, when the user hits cancel, I want to redirect back to the page.
The issue I am running in to is that when the user hits cancel, the redirect to the page happens anyway...
function warnRemove(linkURL) {
swal({
title: 'Are you sure?',
type: 'warning',
showCancelButton: true,
confirmButtonColor: 'D6B55',
confirmButtonText: 'Yes, remove it!'
}).then(function () {
window.location = linkURL;
});
}
function warnPublish(linkURL) {
swal({
title: 'Are you sure?',
type: 'warning',
text: 'This event will go live on the screen after next refresh.',
showCancelButton: true,
confirmButtonColor: 'D6B55',
confirmButtonText: 'Yes, publish it!'
}).then(function () {
window.location = linkURL;
});
}
$('.remove').click(function(e) {
e.preventDefault(); // Prevent the href from redirecting directly
let linkURL = $(this).attr("href");
warnRemove(linkURL);
});
$('.publish').click(function(e) {
e.preventDefault(); // Prevent the href from redirecting directly
let linkURL = $(this).attr("href");
warnPublish(linkURL);
});
You will need to use the callback with an isConfirm boolean:
function(isConfirm) {
if (isConfirm) {
// do confirmed things
}
}
From the docs:
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((result) => {
// redirect only if true
if (result.value) {
// redirect here
}
})
I'm trying to show a modal confirm dialog on delete link in a list action of a mvc 3 application.
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#dialog-confirm").dialog({
autoOpen: false,
modal: true,
resizable: false,
height: 180
});
});
$(document).delegate(".deleteLink", "click", function (e) {
e.preventDefault();
alert('test');
var $link = $(this);
var $dialog = $('#dialog-confirm')
.dialog({
autoOpen: false,
modal: true,
resizable: false,
height: 180,
buttons: {
'button text': function () {
alert("button"); //this is the button, do something with it :)
}
}
});
$dialog.dialog('open');
});
<div id="dialog-confirm" title="Delete the item?" >
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This item will be deleted. Are you sure?</p>
and this is the link
#Html.ActionLink("حذف", "Delete", "Need", new { id = item.NeedID }, new { #class = "deleteLink", title = "حذف" })
when i remove the buttons option it works but when i add it , it doesn't show up anymore
where i'm doing wrong?
At a very quick glance - it would seem that buttons is an array. Try pasting in the sample from the documentation:
... {
autoOpen: false,
modal: true,
resizable: false,
height: 180,
buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ]
}