I'm an Ember noob and have been having some trouble getting sweet alert to work with an ember/rails application. I believe I have a scope issue that I'm not quite sure how to handle..
Inside my controller I have a delete action with the following code inside:
swal({
title: "Are you sure?"
text: "You will not be able to recover this post!"
type: "warning"
showCancelButton: true
confirmButtonColor: "#DD6B55"
confirmButtonText: "Yes, delete it!"
closeOnConfirm: false
}, ->
#get('model').destroyRecord().then =>
#transitionToRoute 'posts'
swal("Deleted!", "Your post has been deleted.", "success")
)
I trace the error to the '#get('model').destroyRecord().then' and I am pretty sure it is because I am calling 'this.get' inside a function that is inside of a controller action. However, I don't know how to fix that... How do I reference the controller within a function? Any suggestions on how to correct this or a better way to achieve the same functionality?
I dont know about coffescript, but maybe you can try assigning the controller to a variable?
controller = this; // or # ?
swal({
title: "Are you sure?"
text: "You will not be able to recover this post!"
type: "warning"
showCancelButton: true
confirmButtonColor: "#DD6B55"
confirmButtonText: "Yes, delete it!"
closeOnConfirm: false
}, ->
controller.get('model').destroyRecord().then =>
controller.transitionToRoute 'posts'
swal("Deleted!", "Your post has been deleted.", "success")
)
use behavior: in data as :
<%= link_to "Delete", s, :method => :delete, data: { behavior: 'delete' } %>
$("[data-behavior='delete']").on("click", function(e){
e.preventDefault();
swal({
title: "Are you sure you want to delete " ,
text: "You will not be able to recover this data!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function(isConfirm) {
if (isConfirm)
{
// here you can use ajax to delete
swal("Deleted!", "Ok , rooms will be delete after submit.", "success");
}
else
{
return false;
}
});
});
Related
Details: How do I use sweetalert2 with PHP form in CodeIgniter?
Actually, I want to show sweetalert2 on submitting PHP form and then show sweetalert2 to confirm data, if the user confirms data should be submitted and then redirect to next page.
Problem: But in my case, it directly redirects to next page without my pressing confirm button on sweetalert.
PHP:
echo form_open( '/redirect to',['onsubmit'=>'return submitForm(this);']);
JavaScript:
function submitForm(){
swal({
title: "Are you Sure!",
text: "Data is Correct?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#cc3f44",
confirmButtonText: "Yes!",
closeOnConfirm: false
}).then(okay => {
if(okay)
{
alert("check");
}
else
{
alert("not sure");
}
});
}
PHP
echo form_submit(['name'=>'submit','id'=>'submit','value'=>'Submit', 'class'=>'btn btn-primary btn_size' ]);
Please help me regarding this problem. thanks in advance.
I am posting my working code here.I deleted event by sweet alert It was mapped on button by giving a class name 'demo' to button hope it will help
$('.demo').click(function () {
//e.preventDefault();
var id= document.getElementById('id').value;
swal({
title: "Are you sure?",
text: "Your will not be able to recover this Event!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plz!",
closeOnConfirm: false,
closeOnCancel: false },
function (isConfirm) {
if (isConfirm) {
location.href='<?php echo site_url('calendarController/delete_Event/'); ?>'+'/'+id;
} else {
swal("Cancelled", "Your event is safe :)", "error");
}
});
});
Hi I am new in using sweet alert js to make my alert box more fancy. I am using the normal javascript alert confirmation to delete a specific data in my table. However when I try to run a sweet alert confirmation before deleting it deletes the file without the confirmation popping up.
Here is the code in my JS below.
$(".delete-alert").click(function(event) {
event.preventDefault();
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(function () {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
});
});
this is my ruby on rails with HTML which calls the above js when clicking on trash icon
<%= link_to raw('<i class="fa fa-trash delete-alert"></i>'), candidate_path(f.id),method: :delete %>
Here is the perfect example how you should use Sweet alert.
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: 'btn-danger',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
// Call your delete item function here.
swal("Deleted!", "Your imaginary file has been ted!", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
I'm trying to make a confirmation pop up before submitting the form. But it's not working. I'm using Sweet Alert 2.
document.querySelector('#order').addEventListener('submit', function(e) {
var form = $(this).parents('form');
e.preventDefault();
swal({
title: "Are you sure?",
text: "Once a invoice is created, you will not be able to delete without the help of support",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes, I am sure!',
cancelButtonText: "No, cancel it!",
}).then(function() {
swal({
title: 'Success!',
text: 'Invoice created! Go to the invoice tab to pay it.',
type: 'success'
}, function() {
form.submit();
});
},function(dismiss) {
if(dismiss == 'cancel') {
swal("Cancelled", "Invoice not created!", "error");
}
});
});
That's my Javascript code and my PHP code looks something like this
<?php
if(isset($_POST['k'])
{
header('Location: https://google.com');
}
?>
My HTML code is
<form method="POST">
<button type="submit" name="k"></button
</form>
It's not working why?
Update
$("#order").on('submit', function(e) {
var form = $(this);
e.preventDefault();
swal({
title: "Are you sure?",
text: "Once a invoice is created, you will not be able to delete without the help of support",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes, I am sure!',
cancelButtonText: "No, cancel it!",
}).then(function() {
swal({
title: 'Success!',
text: 'Invoice created! Go to the invoice tab to pay it.',
type: 'success'
}, function() {
$(this).trigger('submit');
});
},function(dismiss) {
if(dismiss == 'cancel') {
swal("Cancelled", "Invoice not created!", "error");
}
});
});
Also I forgot to add that I parsed that code and on my actual code there is the ID on the form
By not working I mean the data isn't being posted. If it was working properly, it should be redirecting to google.com per the PHP code
I am no coder but I found that placing the submit under .then(function() { was a working solution for me. The code I used is lp.jQuery("div.main-form form").submit(); but your form name will be different. I hope it helps in some way.
$("#order").on('submit', function(e) {
var form = $(this);
e.preventDefault();
swal({
title: "Are you sure?",
text: "Once a invoice is created, you will not be able to delete without the help of support",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes, I am sure!',
cancelButtonText: "No, cancel it!",
}).then(function() {
$(this).trigger('submit');
swal({
title: 'Success!',
text: 'Invoice created! Go to the invoice tab to pay it.',
type: 'success'
}, function() {
$(this).trigger('submit');
});
},function(dismiss) {
if(dismiss == 'cancel') {
swal("Cancelled", "Invoice not created!", "error");
}
});
});
First, you don't have the selector #order in this HTML.
Second, you'll want to prevent the default behavior of the form element, so do this:
$("form").on('submit', function(e) {
var form = $(this);
e.preventDefault();
//[...]
Then, where you want to finally submit, you can put this:
$(this).trigger('submit');
I'm trying to pass a value from a html page to a JS file.
HTML part:
<i class=" icon-bin" ></i> Delete
JS file:
$('#pagejs_general_delete_wizardresultid').on('click', function() {
swal({
title: "Are you sure?",
text: "Are you sure you want to delete item with reference <wizardresultid here>? This can not be undone!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#EF5350",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm, wizardresultid){
if (isConfirm) {
swal({
title: "Deleted!",
text: "The record has been deleted.",
confirmButtonColor: "#66BB6A",
type: "success"
});
}
else {
swal({
title: "Cancelled",
text: "Nothing has been changed.",
confirmButtonColor: "#2196F3",
type: "error"
});
}
});
});
I'm unsure how I can pass the variable wizardresultid from HTML to the javascript. I can find examples how to pass it a function from a button, but not how to do it from a link.
Furthermore, I'm trying to display the wizardresultid in the text. Is that the correct way to do that:
text: "Are you sure you want to delete item with reference" + wizardresultid + "? This can not be undone!"
Thanks for your help!!!
Recommended 'data' attribute. like
<i class=" icon-bin" ></i> Delete
and access using:
var val = $('#pagejs_general_delete_wizardresultid').attr('data');
You shold use data-attribute in html, and get this in js with .attr().
$('#pagejs_general_delete_wizardresultid').on('click', function() {
var myAttribute = $(this).attr('wizardresultid');
swal({
title: "Are you sure?",
text: "Are you sure you want to delete item with reference "+myAttribute+"? This can not be undone!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#EF5350",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm, wizardresultid){
if (isConfirm) {
swal({
title: "Deleted!",
text: "The record has been deleted.",
confirmButtonColor: "#66BB6A",
type: "success"
});
}
else {
swal({
title: "Cancelled",
text: "Nothing has been changed.",
confirmButtonColor: "#2196F3",
type: "error"
});
}
});
});
<i class=" icon-bin" ></i> Delete
a simple way would be to add it to your id and use a class for the on click event, then you could split the id.
something like:
//html
<i class=" icon-bin" ></i> Delete
//js
$('.pagejs_general_delete_wizardresultid').on('click', function() {
var splitId = $(this).attr('id');
splitId = splitId.split('-');
var realId = splitId[1]
//.....rest of your logic goes here
});
wizardresultid is the second parameter in the SweetAlert callback function. You cannot reference that parameter outside that particular callback function.
Instead you should be using $(this).attr('id') which gets the ID of the target element in the click callback function, as in:
text: "Are you sure you want to delete item with reference" + $(this).attr('id') + "? This can not be undone!"
I am trying to upgrade my JavaScript confirm() action to use SweetAlert. Currently my code is something like this:
<a href="/delete.php?id=100" onClick="return confirm('Are you sure ?');" >Delete</a>
This waits for the user to confirm before navigating to the delete page. I would like to use this example from SweetAlert to ask the user to confirm before deleting:
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");
}
});
Everything I have tried has failed. When the first alert is displayed, the page has gone ahead and deleted the item and refreshed before the user has even clicked on the alert buttons. How do I make the page wait for the users input?
Any help would be greatly appreciated.
You cannot use this as a drop-in replacement for confirm. confirm blocks the single thread of execution until the dialog has been acknowledged, you cannot produce the same behavior with a JavaScript/DOM-based dialog.
You need to issue a request to /delete.php?id=100 in the success callback for your alert box.
Instead of...
swal("Deleted!", "Your imaginary file has been deleted.", "success");
You need
<a href="#">Delete<a>
...
$.post('/delete.php?id=100').then(function () {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
You also must fix your delete.php to only accept POST requests. It's a huge problem to allow GET requests to delete resources. The first time Google or any other crawler finds your page, it will look at the href of every link in your document and follow each link, deleting all of your content. They will not be stopped by the confirm box, as they probably (with the exception of Google) won't be evaluating any JavaScript.
You can do it this way.
HTML:
<a href="/delete.php?id=100" class="confirmation" >Delete</a>
JS:
$('.confirmation').click(function (e) {
var href = $(this).attr('href');
swal({
title: "Are you sure?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: true,
closeOnCancel: true
},
function (isConfirm) {
if (isConfirm) {
window.location.href = href;
}
});
return false;
});
Seems a hack but it's working for me.
$('.delete').click(function () {
var id = this.id;
swal({
title: "Are you sure?",
text: "Your will not be able to recover this post!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(){
alert(id);
});
});
<a id="<?php echo $row->id_portfolio ?>" class=" delete">
Here's an example in an Angular directive (since SweetAlert is offered through an angular directive wrapper). This is one 'elegant' method for doing this in JavaScript. On a click event, there is an e.stopImmediatePropagation(), then if the user confirms, it evaluates the "ng-click" function. (Note scope.$eval is not a JavaScript eval()).
Markup:
<i class="fa fa-times" ng-click="removeSubstep(step, substep)" confirm-click="Are you sure you want to delete a widget?"></i>
Simple "confirm click" directive:
/**
* Confirm click, e.g. <a ng-click="someAction()" confirm-click="Are you sure you want to do some action?">
*/
angular.module('myApp.directives').directive('confirmClick', [
'SweetAlert',
function (SweetAlert) {
return {
priority: -1,
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('click', function (e) {
e.stopImmediatePropagation();
e.preventDefault();
var message = attrs.confirmClick || 'Are you sure you want to continue?';
SweetAlert.swal({
title: message,
type: 'warning',
showCancelButton: true,
closeOnConfirm: true,
closeOnCancel: true
}, function (isConfirm) {
if (isConfirm) {
if(attrs.ngClick) {
scope.$eval(attrs.ngClick);
}
} else {
// Cancelled
}
});
});
}
}
}
]);