Prevent Page navigation - SweetAlert
Prevent Page navigation - SweetAlert
I'm trying to replace the JS box dialog with sweet alert dialog box.
At normal cases, it works perfectly.
But, at the time of navigating the page on confirmation. It didn't work.
JS box :
var confirm = window.confirm("Warning! You may have unsaved data,it will be lost..!" + "n" + "Are you sure want to leave this page ?");
if (confirm) {
$scope.$eval(event); //It prevents the page to nav ,until i confirm it.
} else {
event.preventDefault();
}
It works.
In case of sweetalert, I'm using the same scenario
sweetalert
$scope.validation = function(event) {
//....
sweetAlert({
title: "Are you sure?", //Bold text
text: "Your will not be able to recover this imaginary file!", //light text
type: "warning", //type -- adds appropiriate icon
showCancelButton: true, // displays cancel btton
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
//Function that triggers on user action.
if (isConfirm) {
$scope.$eval(event); //????
/* sweetAlert(
'Deleted!',
'Your file has been deleted.',
'success'
)*/
} else {
event.preventDefault();
}
}
For state change ,
.state('ModuleName',{
url : '/ModuleName',
templateUrl : 'ModuleMenu/ModuleName.html',
controller : 'modulectrl',
resolve : {
loadPlugin : function($ocLazyLoad) {
return $ocLazyLoad
.load([
{
name : 'css',
insertBefore : '#app-level',
files : [
'../static/vendors/bower_components/nouislider/jquery.nouislider.css',
]
},
{
name : 'vendors',
files : [
'../static/vendors/bower_components/angular-farbtastic/angular-farbtastic.js' ]
},
{
name : 'ComliveApp',
files : [ '../static/scripts/controller/modulectrl.js' ]
} ])
}
}
})
On href,the respective view is loaded. My point is that page should not be loaded until sweetAlert confirms it.
Suggestions/answers are appreciated.
Thanks.
@mplungjan, on cancel/close, it should stay in the same page.
– Kishor Velayutham
Jul 2 at 5:24
That is what I said. It seems to me unlikely that you can replace onbeforeunload with sweetalert: stackoverflow.com/questions/276660/…
– mplungjan
Jul 2 at 5:30
@mplungjan,it works on page refresh. Im firing an event , when the modification has been made on page. If modification was done,user tries to navigate to other page ,it has to show the dialog popup. NOTE:I am using state provider , for navigating the pages.
– Kishor Velayutham
Jul 2 at 5:49
sweetAlert is async. So when the callback is called event has already bubbled up the DOM tree and default action was called. You need to call preventDefault before showing sweetAlert $scope.validation = function(event) { ... event.preventDefault(); sweetAlert() . And manually perform navigation inside the callback using state provider or $location– Yury Tarabanko
Jul 2 at 8:15
sweetAlert
sweetAlert
$scope.validation = function(event) { ... event.preventDefault(); sweetAlert()
$location
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Navigate on confirm, do nothing on cancel/close
– mplungjan
Jul 2 at 5:22