The Javascript function does not work on asp: button Click event, where a test alert function works.

advertisements

I am trying to create an alert as described in this site http://needim.github.com/noty/ and here is the code

    <head runat="server">
    <title>Test</title>
    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/noty/jquery.noty.js"></script>
    <script type="text/javascript" src="js/noty/layouts/top.js"></script>
    <link rel="stylesheet" type="text/css" href="buttons.css" />
    <script type="text/javascript" src="js/noty/themes/default.js"></script>
</head>
<body>
    <div class="container">
        <div id="customContainer">
        </div>
    </div>
    <script type="text/javascript">
        function generate(type, layout) {
            var n = noty({
                theme: 'defaultTheme',
                text: 'Do you want to continue?',
                buttons: [
    {
        addClass: 'btn btn-primary',
        text: 'Ok',
        onClick: function ($noty) {
            // this = button element
            // $noty = $noty element
            $noty.close();
            noty(
            {
                text: 'Record deleted !',
                type: 'success',
                callback:
                {
                    onShow: function () { },
                    afterShow: function () { TakeValue(true); },
                    onClose: function () {  },
                    afterClose: function () { }
                }
            });
        }
    },
     {
         addClass: 'btn btn-danger',
         text: 'Cancel',
         onClick: function ($noty) {
             $noty.close();
             noty(
            {
                text: 'Record not deleted !',
                type: 'warning',
                callback:
                 {
                     onShow: function () { },
                     afterShow: function () { TakeValue(false); },
                     onClose: function () { },
                     afterClose: function () { }
                 }
            });
         }
     }
    ]

            });

        }
     function TakeValue(result) {
            if (result == true) {
                document.getElementById("Hidden1").value = "true";
                alert(document.getElementById("Hidden1").value);

            } else {

                document.getElementById("Hidden1").value = "false";
                alert(document.getElementById("Hidden1").value);
            }
        }
        function generateAll() {
            generate('information', 'top');
        }

    </script>
    <form id="form" runat="server">
    <input id="Hidden1" type="hidden" value="false"/>
    <asp:Button ID="Button2" runat="server" Text="Press"  OnClientClick="return generateAll();" />
    <input id="Button1" type="button" value="button" onclick="return generateAll();" />
    </form>
</body>

I have placed two buttons ,one is HTML button while the other is of asp:Button, The whole scenario just works fine when I use the HTML button ,but the page is not displaying the similar behavior in case of asp:Button click, I have placed a test function in JavaScript to test the OnClientClick event of the asp:Button and that worked fine,but I don't know why this alert is not getting called, I think there is some problem with the Noty JS. Kindly give feed back

thanks.


As jbabey said in the comments:

an asp:button will cause a postback when clicked by default. you need to return false from the onclientclick, right now you are returning undefined since generateAll has no return.

Since you're using jQuery, I'd go one step further and not directly set the click attribute. Instead, set it using jQuery:

<script>
$(document).ready(function() {
    $('#Button1').click(generateAll);
});
...
function generateAll(e) {
    generate('information', 'top');
    // This will prevent the default action of submitting the form.
    e.preventDefault();
}
</script>