Block UI not working for blocking the div

StackOverflow https://stackoverflow.com/questions/17438814

Question

I am trying to block a particular div (div with id "blockit") on clicking a button (button with id "Button1"), for that I am using block UI plugin. But I am unable to block the div on button click. Here is my code

<script src="jQuery 1.10.1.min.js"></script>
<script src="blockui.js"></script>

<script type="text/javascript">
        $(document).ready(function () {
            $('#Button1').click(function () {
                $('div.blockit').block({

                    message: '<h1>Processing</h1>',
                    css: { border: '3px solid #a00' }


                });
                setTimeout($.unblockUI, 2000);
            });
        });

    </script>

<body>
    <form id="form1" runat="server">
        <div>
            <asp:Button ID="Button1" runat="server" Text="Button" />

        </div>
        <div id="blockit" style="width: 200px; height=200px;"></div>
    </form>
</body>

Please tell me where I am making mistake. Thanx in advance

Was it helpful?

Solution

instead of specifying blockit as an id you have given it as class in jquery. Try this

       $('div#blockit').block({.....})

OTHER TIPS

For even easier and faster selector, because jQuery's Sizzle engine is optimized to use ID selectors, do the following:

$('#blockit').block({
    message: '<h1>Processing</h1>',
    css: { border: '3px solid #a00' }
});

The selector you had previously was $('div.blockit'), which will traverse the entire DOM and find all DIV elements before looking for one with the ID of blockit.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top