Block UI not working for blocking the div

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

score 2 · Accepted Answer · answered Jul 03 '13 at 02:41

2

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

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

answered Jul 03 '13 at 02:41

Pbk1303

3,702
2
32
47

Its working now.. but now the problem is that the block element is just blinking and disappearing within a second. I want it to be stable for 2000ms – Saurabh Palatkar Jul 03 '13 at 05:20
oh i got it my asp button causing page post back thats why it was not persisting... now its working all correct. but now the problem is that the time is not working and the div is blocking permanently – Saurabh Palatkar Jul 03 '13 at 05:32

Karl Anderson · Answer 2 · 2013-07-03T03:28:51.210

1

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.

edited Jul 03 '13 at 03:28

answered Jul 03 '13 at 03:16

Karl Anderson

34,606
12
65
80

Its working now.. but now the problem is that the block element is just blinking and disappearing within a second. I want it to be stable for 2000ms – Saurabh Palatkar Jul 03 '13 at 05:21
oh i got it my asp button causing page post back thats why it was not persisting... now its working all correct. but now the problem is that the time is not working and the div is blocking permanently – Saurabh Palatkar Jul 03 '13 at 05:32

Block UI not working for blocking the div

2 Answers2