Bootstrap and javascript (Using sweet alert)

I am using  a script called sweet alert, which is the nice looking version of 'confirm delete' extension for Dreamweaver.
I am building my site on bootstrap and I have a link to delete a file which I am trying to add the confirmation before the file is deleted.

if I remove the link from the code (which redirects to a page with a SP that deletes the file) then the sweet alert shows up just fine, but evidently no file is deleted.
If I add the link the alert shows for a fraction of a second, then the page is redirected and the file deleted, but I don't get to actually be able to use the alert to confirm deleting the file or not.

Here is the script code that is called when I click the link:

    <script>

    $(document).ready(function () {

             $('.demo3').click(function () {
            swal({
                title: "Are you sure?",
                text: "Please confirm you wish to delete this record",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: false
            }, function () {
                swal("Deleted!", "Your record will been deleted.", "success");
            });
        });
 });

</script>

---

And this is the line of code that calls the script:

<a href="SPPreferencesDeleteGuest.asp?CalId=<%=(rs_preferences.Fields.Item("CalId").Value)%>"  class="btn btn-white btn-sm demo3"><i class="fa fa-trash-o" ></i><

the 'demo3' part in the class is what calls the sweet alert.

again, if I remove the link it works fine, otherwise it redirects and the sweet alert opens and then closes in a fraction of a second.
LVL 1
AleksAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

AleksAuthor Commented:
I am trying this:

             closeOnConfirm: false
            }, function () {
                swal("Deleted!", "Your record will been deleted.", "success"),
                        window.location.href="SPPreferencesDeleteGuest.asp?CalId=<%=(rs_preferences.Fields.Item("CalId").Value)%>";

but I get an error ... am I on the right track ?
hieloCommented:
The default behavior of links is that once you click on them, they navigate away.  Binding a javascript event handler does not automatically change this behavior.  You are seeing it for a "fraction" of a second because it is the "delay" it takes for the browser to initiate a request to navigate to another url.  While it is preparing to send the request, the click handler also kicks in and you momentarily see the "popup".  What you need to do is augment the default behavior so that the browser doesn't automatically navigate to the  specified url.

So try:
<script>

    $(document).ready(function () {

             $('.demo3').click(function (event) {
            // http://api.jquery.com/event.preventdefault/
            event.preventDefault();

            swal({
                title: "Are you sure?",
                text: "Please confirm you wish to delete this record",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: false
            }, function () {
                swal("Deleted!", "Your record will been deleted.", "success");
            });
        });
 });

</script>

Open in new window

AleksAuthor Commented:
It didn't work. Now the alert doesn't even show up.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

AleksAuthor Commented:
Never mind. It shows but even when I click on Confirm delete, it doesn't redirect. It stays on the same page.

Here is the full code:

<a href="SPPreferencesDeleteGuest.asp?CalId=<%=(rs_preferences.Fields.Item("CalId").Value)%>" class="btn btn-white btn-sm demo3"> <i class="fa fa-trash-o" ></i></a>

And your code:

    $(document).ready(function () {

             $('.demo3').click(function (event) {
            // http://api.jquery.com/event.preventdefault/
            event.preventDefault();

            swal({
                title: "Are you sure?",
                text: "Please confirm you wish to delete this record",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: false
            }, function () {
                swal("Deleted!", "Your record will been deleted.", "success");
            });
        });
 });
hieloCommented:
Try:
$(document).ready(function () {

             $('.demo3').click(function (event) {
            // http://api.jquery.com/event.preventdefault/
            event.preventDefault();

             //save the url of the <a> tag that  was clicked.
             var url = $(this).attr("href");

            swal({
                title: "Are you sure?",
                text: "Please confirm you wish to delete this record",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: false
            }, function () {
                if (isConfirm)
                {
                   //append a hidden frame and point it to the url of the <a> tag that was clicked.
                   $('<iframe src="'+url+'" style="position:absolute;left=-1000em;"></iframe>').appendTo('body');
                   swal("Deleted!", "Your imaginary file has been deleted.", "success");
                }
               else 
               {
                    swal("Cancelled", "Your imaginary file is safe :)", "error"); 
               }
            });
        });
 });

Open in new window

AleksAuthor Commented:
When I click on "Yes delete it" the alert stays on and won't close, nothing else happens. I had to close the browser.
hieloCommented:
my apologies. Line 18 should have been:
}, function (isConfirm) {
AleksAuthor Commented:
Now I got this:

  $(document).ready(function () {

             $('.demo3').click(function (event) {
            // http://api.jquery.com/event.preventdefault/
            event.preventDefault();

             //save the url of the <a> tag that  was clicked.
             var url = $(this).attr("href");

            swal({
                title: "Are you sure?",
                text: "Please confirm you wish to delete this record",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: false
            }, function (isConfirm) {
                {
                   //append a hidden frame and point it to the url of the <a> tag that was clicked.
                   $('<iframe src="'+url+'" style="position:absolute;left=-1000em;"></iframe>').appendTo('body');
                   swal("Deleted!", "Your imaginary file has been deleted.", "success");
                }
               else
               {
                    swal("Cancelled", "Your imaginary file is safe :)", "error");
               }
            });
        });
 });


and it simply links to the page and won't display any confirmation message  :#
hieloCommented:
Why did you get rid of the "if" clause?  I just asked you to add the named parameter to the function.  There was only one change, and it was for line 18 of post ID 40878204.
AleksAuthor Commented:
Doing so won't display the confirmation.

 $(document).ready(function () {

             $('.demo3').click(function (event) {
            // http://api.jquery.com/event.preventdefault/
            event.preventDefault();

             //save the url of the <a> tag that  was clicked.
             var url = $(this).attr("href");

            swal({
                title: "Are you sure?",
                text: "Please confirm you wish to delete this record",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: false
            }, function (isConfirm) {
                if (isConfirm)
                {
                   //append a hidden frame and point it to the url of the <a> tag that was clicked.
                   $('<iframe src="'+url+'" style="position:absolute;left=-1000em;"></iframe>').appendTo('body');
                   swal("Deleted!", "Your imaginary file has been deleted.", "success");
                }
               else
               {
                    swal("Cancelled", "Your imaginary file is safe :)", "error");
               }
            });
        });
 });
hieloCommented:
>>closeOnConfirm: false
change that to true.
AleksAuthor Commented:
It goes to the page and deletes it, no confirm comes up
hieloCommented:
>> no confirm comes up
Do you mean after the deletion?  If so try:
...
if (isConfirm)
                {
                   //append a hidden frame and point it to the url 
                    //of the <a> tag that was clicked.
                    $('<iframe src="'+url+'" style="position:absolute;left=-1000em;"></iframe>').appendTo('body');

                    setTimeout(function(){
                         swal("Deleted!", "Your imaginary file has been deleted.", "success");
                     }, 1000);
                }
...

Open in new window

AleksAuthor Commented:
No go. It simply deletes the file. it doesn't ask to confirm BEFORE it deletes it and no chance to cancel.
hieloCommented:
It works for me.  Here's what I used:
HTML
<a href="http://www.google.com" class="demo3">Google</a>

<script>
// import jquery and the plugin first
$(document).ready(function () {

             $('.demo3').click(function (event) {
            // http://api.jquery.com/event.preventdefault/
            event.preventDefault();

             //save the url of the <a> tag that  was clicked.
             var url = $(this).attr("href");

            swal({
                title: "Are you sure?",
                text: "Please confirm you wish to delete this record",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: true
            }, function (isConfirm) {
                if (isConfirm)
                {
                   //append a hidden frame and point it to the url of the <a> tag that was clicked.
                    $('<iframe src="'+url+'" style="position:absolute;left=-1000em;"></iframe>').appendTo('body');
                   swal("Deleted!", "Your imaginary file has been deleted.", "success");
                }
               else 
               {
                    swal("Cancelled", "Your imaginary file is safe :)", "error"); 
               }
            });
        });
 });
</script>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
AleksAuthor Commented:
With that code it shows the confirmation, when I click to delete it closes but it doesn't redirect anywhere.
AleksAuthor Commented:
The solution was actually this:

<a href="my link" class="btn btn-white btn-sm"> <i class="fa fa-trash-o demo3" ></i></a>

Script:

<script>
  $('a').click(function(e) {
    e.preventDefault(); // Prevent the href from redirecting directly
    var linkURL = $(this).attr("href");
    warnBeforeRedirect(linkURL);
  });

  function warnBeforeRedirect(linkURL) {
    swal({
      title: "Leave this site?",
      text: "If you click 'OK', you will be redirected to " + linkURL,
      type: "warning",
      showCancelButton: true
    }, function() {
      // Redirect the user
      window.location.href = linkURL;
    });
  }
  </script>
hieloCommented:
>> With that code it shows the confirmation, when I click to delete it closes but it doesn't redirect anywhere.
That's because the actual deletion request was being redirected through the hidden iframe.  I thought you were also trying to do a confirmation after the deletion of the file.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.