0

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 

$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.

Kishor Velayutham
  • 818
  • 6
  • 18
  • Navigate on confirm, do nothing on cancel/close – mplungjan Jul 02 '18 at 05:22
  • @mplungjan, on cancel/close, it should stay in the same page. – Kishor Velayutham Jul 02 '18 at 05:24
  • That is what I said. It seems to me unlikely that you can replace onbeforeunload with sweetalert: https://stackoverflow.com/questions/276660/how-can-i-override-the-onbeforeunload-dialog-and-replace-it-with-my-own – mplungjan Jul 02 '18 at 05: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 02 '18 at 05: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 02 '18 at 08:15
  • @YuryTarabanko, exactly i am doing the same as you suggested. But, on post confirmation , the page is not redirected. (Like i just need to unbind the event that prevent). Tried using unbind() method ,it didn't help out – Kishor Velayutham Jul 02 '18 at 09:51
  • " the page is not redirected." could you plz show your actual code where you are manually performing navigation? IMHO `$scope.$eval(event)` does nothing. You need to call `$location.path(path to redirect)` or `$state.go(state to go to)` – Yury Tarabanko Jul 02 '18 at 09:58
  • @YuryTarabanko,i totally understand. I was using the same way. View is getting loaded. I need to prevent the page load until i confirm it. (Post confirmation page should be loaded) – Kishor Velayutham Jul 02 '18 at 10:37

0 Answers0