Sweet alert for bootstrap

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

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

No, if you leave your button how it was, the only change to be made should be $('.a
Leave everything else how it was

ASKER

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

The . Will only go in front of the a after this $ sign. Remove the . From the document. Query area

ASKER

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.

ASKER

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>

Can you attach your page?

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

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>

ASKER

Never mind, sees to have worked :) thanks Marco. I will share the points if you don't mind

ASKER

Great ! thanks

ASKER

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.

Are you still executing the code in warnBeforeRedirect() function?

ASKER

No. I only have this:

$(document).ready(function () {
            $('.btn-sm1').click(function () {
                  swal({
                        title: "Sucess",
                        text: "Information saved.",
                        timer: 200,
                        showConfirmButton: false,
                        imageUrl: 'success'
                  });
            });
      });

ASKER

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,

                  });
            });
      });

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

ASKER

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.

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?

ASKER

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.

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

ASKER

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.

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.

ASKER

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.