How to use sweet alert in ASP

Question

0.00/5 (No votes)

See more:

I'm using

SweetAlert2

in my project, after clicked the button the alert has been displayed and closed suddenly.

What I have tried:

$(document).ready(function () {
    $("#Button1").click(function () {
       swal({
          title: 'Are you sure?',
          text: "You won't be able to revert this!",
          type: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Yes, delete it!',
          cancelButtonText: 'No, cancel!',
          confirmButtonClass: 'btn btn-success',
          cancelButtonClass: 'btn btn-danger',
          buttonsStyling: false
        }).then(function () {
          swal(
            'Deleted!',
            'Your file has been deleted.',
            'success'
          )
        }, function (dismiss) {
          // dismiss can be 'cancel', 'overlay',
          // 'close', and 'timer'
          if (dismiss === 'cancel') {
            swal(
              'Cancelled',
              'Your imaginary file is safe :)',
              'error'
            )
          }
        });
    });
});

<asp:Button ID="Button1" runat="server" Text="Button" />

Posted 22-Mar-17 0:27am

ManiLancer

Updated 22-Mar-17 1:46am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

F-ES Sitecore · Accepted Answer · 2017-03-22T01:46:00

Solution 1

You need to stop the button's click event from continuing otherwise it will go on to submit your form which will cause the page refresh you are seeing.

    $("#Button1").click(function (e) { // amend this
e.preventDefault(); // add this
swal({
    title: 'Are you sure?',

Posted 22-Mar-17 1:46am

F-ES Sitecore

Comments

ManiLancer 22-Mar-17 7:59am

this solution working fine, but how can i use asp button in sweet alert. i want the asp button inside sweet alert??

i go through other solution for button problem,but i can't understand,can u help me..

F-ES Sitecore 22-Mar-17 8:04am

You mean you want an asp:Button in the alert message? I don't think you'll be able to do that. You could probably add a normal <input> button as the message supports html but you're creating the html for the message on the fly and for a server-side button to work .net needs to know about it before the page renders as it needs to set things in the viewstate and so on. You can probably do what you need to do by using the existing button handling events though, even if you make those events submit forms and so on.

ManiLancer 22-Mar-17 8:11am

okay but e.preventDefault(); this solution not working with master page, normal html button working fine, but asp button not.. what to do.

F-ES Sitecore 22-Mar-17 10:50am

This code

$("#Button1")

finds an element with an ID of "Button1". On your site with a master page view the page source (remember jQuery runs from the page source, NOT from your aspx file) and see if you can find an element with an id of Button1. When you use master pages the ids of your elements are altered so you need to do something like this instead

$("#<%=Button1.ClientID%>")

that will ensure the js references Button1's actual ID as it appears in the page source. Note this will only work if your js is on the same file as your Button1 is.

ManiLancer 23-Mar-17 1:15am

Thank you so much,its working fine..