Sweet alert for bootstrap

I am trying to implement sweet alert when a user clicks a button.

<button class="btn btn-primary btn-sm1" type="submit">Save changes</button>

That is my submit button when I save a page. The idea is to call sweel alert by using the class 'btn-sm1'

Here is the code for sweet alert:

 $('a.btn-white.btn-sm1').click(function(e) {
    e.preventDefault(); // Prevent the href from redirecting directly
    var linkURL = $(this).attr("href");
    warnBeforeRedirect(linkURL);
  });


 
  document.querySelector('a.btn-white.btn-sm1').onclick = function(){
      swal({
            title: "Auto close alert!",
            text: "I will close in 2 seconds.",
            timer: 2000,
            showConfirmButton: false
      });
};

I have my include file correctly. But when I click the button it won't show the alert  :$

It does show however when I use a link like this:
<a href="" class="btn btn-white btn-sm1"> <i class="fa fa-trash-o" ></i></a>

How can I then call it when clicking on a submit button ?


Any ideas ?
LVL 1
AleksAsked:
Who is Participating?
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.

Jessica WhitleySoftware DeveloperCommented:
I found adding an I'd to my objects and calling that is helpful. So id="btnCall".
In the call section I notice

You need $('.a
Instead of $('a
Either way.
The I'd is helpful if you decide to add more than 1 redirects.
0
AleksAuthor Commented:
You meant like this ?

 $('.a.btn-white.btn-sm1').click(function(e) {
    e.preventDefault(); // Prevent the href from redirecting directly
    var linkURL = $(this).attr("href");
    warnBeforeRedirect(linkURL);
  });

document.querySelector('.a.btn-white.btn-sm1').onclick = function(){
      swal({
            title: "Success!",
            text: "Information saved.",
            timer: 2000,
            showConfirmButton: false
      });
};

and my button is now:

<button type="submit" class="btn btn-primary btn-sm1" id="btnCall">Save changes</button>

That didn't work  :$
0
Jessica WhitleySoftware DeveloperCommented:
No, if you leave your button how it was, the only change to be made should be $('.a
Leave everything else how it was
0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

AleksAuthor Commented:
That didn't work either.

Button code:

<button type="submit" class="btn btn-primary btn-sm1" >Save changes</button>

Script:

-----

 $('.a.btn-white.btn-sm1').click(function(e) {
    e.preventDefault(); // Prevent the href from redirecting directly
    var linkURL = $(this).attr("href");
    warnBeforeRedirect(linkURL);
  });

document.querySelector('.a.btn-white.btn-sm1').onclick = function(){
      swal({
            title: "Success!",
            text: "Information saved.",
            timer: 2000,
            showConfirmButton: false
      });
};

-----

I click on the button, the form is submitted but no alert is displayed  :$
0
Jessica WhitleySoftware DeveloperCommented:
The . Will only go in front of the a after this $ sign. Remove the . From the document. Query area
0
AleksAuthor Commented:
Still trying to figure it out, This is the page they have with examples:

http://t4t5.github.io/sweetalert/

They actually do use a submit button but they call it like this:

--  button --
      <li class="timer">
            <div class="ui">
                  <p>A message with auto close timer</p>
                  <button>Try me!</button>
            </div>
      </li>


--- script---

document.querySelector('ul.examples li.timer button').onclick = function(){
      swal({
            title: "Auto close alert!",
            text: "I will close in 2 seconds.",
            timer: 2000,
            showConfirmButton: false
      });
};

---  I am trying to 'translate' this into my button but no luck so far.
0
AleksAuthor Commented:
This didn't work either  :(

 $('.a.btn-white.btn-sm1 timer').click(function(e) {
    e.preventDefault(); // Prevent the href from redirecting directly
    var linkURL = $(this).attr("href");
    warnBeforeRedirect(linkURL);
  });

document.querySelector('a.btn-white.btn-sm1 timer').onclick = function(){
      swal({
            title: "Success!",
            text: "Information saved.",
            timer: 2000,
            showConfirmButton: false
      });
};

---
<button type="submit" class="btn btn-primary btn-sm1 timer" >Save changes</button>
0
Jessica WhitleySoftware DeveloperCommented:
Can you attach your page?
0
Marco GasiFreelancerCommented:
Sorry, but I don't understand why you're using a complex selector. Even forgiving your submit button has classes 'btn btn-primary btn-sm1' and your selector is btn-white.btn-sm1 (and obviously it fails), you can just use btn-sm1: using jQuery syntax, the following code works like a charm:

<a href="#" class="btn btn-white btn-sm1"> <i class="fa fa-trash-o" ></i></a>
<br>
<button class="btn btn-primary btn-sm1" type="submit">Save changes</button>

<script>
	$(document).ready(function () {
		$('.btn-sm1').click(function () {
			swal({
				title: "Auto close alert!",
				text: "I will close in 2 seconds.",
				timer: 2000,
				showConfirmButton: false
			});
		});
	});

Open in new window


This way every element with class btn-sm1 will activate sweetalert. You might also want to create a class or a series of classes just for sweetalert to use different alerts depending on the page, the button and so on: btn-can-delete, btn-are-you-sure, btn-redirect...
and initilize different alerts using these classes.
0

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:
Yes, but that is the wrong link. that one works fine, the one that does not work with the code above and the one I want to apply the behavior is to the button that submits the form.

This one:  

<button type="submit" class="btn btn-primary btn-sm1" >Save changes</button>
0
AleksAuthor Commented:
Never mind, sees to have worked  :)  thanks Marco. I will share the points if you don't mind
0
AleksAuthor Commented:
Great !  thanks
0
AleksAuthor Commented:
I did find out one problem tho. The alert shows, the page does an 'update' and refreshes. So even if the pop up has a confirmation button it closes in less than a second.  :(  
I am guessing this is because the page reloads.
Can you think of any way of keeping the alert showing even tho the page has reloaded already ?
I want it to stay open for 2 seconds.
0
Marco GasiFreelancerCommented:
Are you still executing the code in warnBeforeRedirect() function?
0
AleksAuthor Commented:
No. I only have this:

$(document).ready(function () {
            $('.btn-sm1').click(function () {                  
                  swal({
                        title: "Sucess",
                        text: "Information saved.",
                        timer: 200,
                        showConfirmButton: false,
                        imageUrl: 'success'
                  });
            });
      });
1
AleksAuthor Commented:
With this code it still closes right away.


 $('.btn-sml').click(function(e) {
    e.preventDefault(); // Prevent the href from redirecting directly
    var linkURL = $(this).attr("href");
    warnBeforeRedirect(linkURL);
  });

$(document).ready(function () {
            $('.btn-sm1').click(function () {                  
                  swal({
                        title: "Sucess",
                        text: "Information saved.",
                        timer: 8000,
                        showConfirmButton: false,
                        
                  });
            });
      });
0
Marco GasiFreelancerCommented:
Sorry, what a stupid I am!!! We need to preventDefault in swal also:
$(document).ready(function () {
            $('.btn-sm1').click(function (e) {                  
                  e.preventDefault(); 
                  swal({
                        title: "Sucess",
                        text: "Information saved.",
                        timer: 80000,
                        showConfirmButton: false,
                        imageUrl: 'success'
                  });
            });
      });

Open in new window

0
AleksAuthor Commented:
I tried the above code of yours and it showed the alert, all fine. But then the form was never submitted. So I am giving an alert saying 'Information saved', but in reality because the form was not submitted it wasn't.
0
Marco GasiFreelancerCommented:
You are right. Since we prevent default action (the form submission we have to do it manually. Now I can't study sweetalert to understand hot to raise an event when the window is closed but you have to add

$('formID').submit();

Open in new window


after the user has clcked ok. I'm sure it is possible becaue in the example there is something like this but now I have to go. Tomorrow I can come back to you and try to help if you still need, ok?
0
AleksAuthor Commented:
Ok. I just posted the same question in the sweet alert forum. If they reply Ill post the answer here.
Thanks for the help so far tho.

The code didn't work, form was not submitted.
0
Marco GasiFreelancerCommented:
No need of teh sweet alert forum at all: their page will give you any example you need.

In the code below replace the form selector with your form id the sweet alert is shown and a function is linked to the confirm button; in that functio you call the jquery method submit(); if the form you want to submit is the only one form in your page, the code works like a charm as it is (I've tested it), otherwise give your form an id and use that in the selector.
<script>
	$(document).ready(function () {
		$('.btn-sm1').click(function () {
			swal({
				title: "Are you sure?",
				text: "Your data will be sent to the server,",
				type: "warning",
				showCancelButton: true,
				confirmButtonColor: "#DD6B55",
				confirmButtonText: "Yes, send my data!",
				closeOnConfirm: false
			},
			function(){
				$('form').submit();
			});
		});
	});
</script>

Open in new window

0
AleksAuthor Commented:
It didn't work. the alert does not show what I wanted and most importantly it opens and stays open for a fraction of a second then closes and page refreshes.
0
Marco GasiFreelancerCommented:
Plaese, post a link to the live page. The code I posted is tested and it works, so there must be some other problem in your page. I can't guess what is the problem but with the live page I can try to find the problem.
0
AleksAuthor Commented:
I would have to create a page outside of the system. This is an intranet so I can't link you to it. Ill try to have it done by tomorrow. Sorry.
0
Marco GasiFreelancerCommented:
Ok, I can wait...:-)
0
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
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.