CODEWITHSUNDEEP
c#javascriptjqueryasp.nethtml
SoftBuilders Pk
SoftBuilders Pk

Reputation: 109

Javascript function is not working on asp:button Click event, where a test alert function works.!

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.

Upvotes: 0

Views: 2324

Answers (2)

Sooraj
Sooraj

Reputation: 41

Could you please add UseSubmitBehavior="false" attribute to the asp:button.

<asp:Button ID="Button2" runat="server" Text="Press" UseSubmitBehavior="false" OnClientClick="return generateAll();" />

I hope this will resolve your issue. Please let me know whether it helped you or not.

Upvotes: 0

rossipedia
rossipedia

Reputation: 59457

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>

Upvotes: 1

Related Questions