Search code examples
javascriptasp.net-mvc-5sweetalert

SweetAlert alert shows partially on view

I am creating a personal project on ASP.NET MVC5 using SweetAlert for handling message alerts. The thing is, on an HTML5 button, on the event "onClick" I'm testing a simple alert message, but, the message only shows for a couple of milliseconds, I can't even press the "OK" button, the Console window in the chrome browser is not showing any kind of error message.

I have added the sweetalert.css on my Content folder and the sweetalert.js script on my Scripts folder making references to the BundleConfig.cs like these:

BundleConfig

On the _Layout.cshtml I have added the files like this:

.css stylesheet:

.css stylesheet

.js script:

.js script

Finally, in the view, inside a div, I have added a button with the "onClick" event calling "test()"

view

tag script

Once I press the button as I said before, I can barely see the alert but it only shows instantly.

Solution

  • Is this button inside a form?

    If so I would imagine this is because the page is refreshing. Buttons inside forms will submit the form unless explicitly stated as type="button"

    So what's happening is that the sweet alert is functioning properly, but the form is being submitted straight after causing the page to refresh and naturally, the sweet alert to disappear.

    <button type="button" onclick="test()" class="btn btn-danger">....</button>