Simple implementation of jQuery toaster prompt

Note: in school, the usual small project page skipping is to use Response.Write script to pop up and page skipping. Every time you click login success, registration success... Then click OK, it's too troublesome. The project teacher said to use this plug-in, so it's easy to do it!

Implementation effect: when you click login, you can query through asynchronous and database connection. If it succeeds, a success prompt will pop up for a few seconds, and then you can automatically skip the page. If the login fails, you will be prompted directly for login failure. Because it is very simple, you can write code directly, and review it simply! Ha-ha


First, introduce three links: as follows (download directly on the Internet)


<link href="toastr.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="toastr.js"></script>


HTML page: because of the example, put some server space buttons directly. The reason for not putting < input type = "button" > is that there are some problems in the implementation of server controls, and then solve them

 

<asp:Button ID="success" runat="server" Text="Button" />
<asp:Button ID="info" runat="server" Text="Button" />
<asp:Button ID="warning" runat="server" Text="Button" />
<asp:Button ID="error" runat="server" Text="Button" />
<asp:Button ID="Button1" runat="server" Text="Sign in"/>   Just use this button!
<input type="button" name="clear" id="clear" value="Eliminate" />

 


JavaScript code:

<script>
        $(function () {
            toastr.options = {
                "closeButton": false,
                "debug": false,
                "positionClass": "toast-top-right",
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };
            $("#success").click(function () {

                toastr.success("Congratulations on your success");
                return false;

            })
            //Message binding

            $("#info").click(function () {
                toastr.info("This is a tip");
                return false;
            })

            $("#warning").click(function () {

                toastr.warning("Warn you not to bother me");
                return false;
            })

            $("#error").click(function () {

                toastr.error("An error occurred, please change");
                return false;
            })

            $("#clear").click(function () {

                toastr.clear();

            })
            $("#Button1").click(function () {
                $.get("Handler.ashx", {}, function (data) {
                    
                    if (data == "true") {
                        toastr.success("Congratulations on your success");

                        setTimeout(function () {
                            window.location.href = "Default.aspx";
                        }, 1000)
                        return false;
                    }
                    else {
                        toastr.error("An error occurred, please change");
                    }
                })
                return false;
            }) 
        })
    </script>

It's over here! I hope the gods can give me some advice, modification and modification. Thank you very much!

Keywords: Javascript Database JQuery

Added by creatives on Tue, 03 Dec 2019 18:32:10 +0200