Freeze all in page with jquery when user fire click

Question

I have an gridview with with one autopostback checkbox inside one template field column, i need the autopostback to count, to validate and to sync the model in server side then cant turn off autopostback.
I cant use ajax because its a project restriction and cant do nothing about.
I need freeze all page in each event fire to avoid user click on another checkbox until the previous postback complete and to avoid user fire others events between postbacks.
Im sory for dont post a link to jsfiddler but cant simulate asp.net postback there.
Im using the folowind jquery inside an script element, this script element is inside the header element aat top:

<head id="Head2" runat="server">
    <title></title>
    <script type="text/javascript" src="../../scripts/jquery-1.6.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(':checkbox').parent().click(function (event) {                
                    alert(event.target.id);      // <<<<<< dont work if removed !!!
                    $(document).find('*')
                            .attr('disabled', 'disabled')
                            .removeAttr('href')
                            .css('color', 'grey');
                    return true;

                });
            });
        </script>
</head>
<body>

to reach make it work in right way i need put the alert commented above, this alert is useless to me and annoying to user but if removed the postback dont fire well, it look like page is reloaded and load with grid and all form clean, like if first post. Why cant remove this alert ?

score 1 · Answer 1 · answered Aug 05 '11 at 20:37

1

Why dont you show a transparent div on the whole page untill the operatin completes and then hide it after its compelete?

$(document).ready(function () {
                $(':checkbox').parent().click(function (event) {                
                    //Show a transparent div
                    $("<div style='position:absolute' />")
                    .height($(document.body).height())
                    .width($(document.body).width())
                    .css("opacity", "0.5");
                    .appendTo(document.body);


                });
            });

answered Aug 05 '11 at 20:37

ShankarSangoli

69,612
13
93
124

I recommend giving the user a chance to "close" the transparent div in case your process fails. You can use setTimeout to display a close button if a given number of seconds passes. – Darren Griffith Aug 05 '11 at 21:34
Yes, we should close the this div if the process fails. – ShankarSangoli Aug 05 '11 at 21:44

score 0 · Answer 2 · answered Aug 05 '11 at 20:35

0

Don't disable the elements, put something in front of everything, much like a "loading..." div. Hide the element when the request is finished.

answered Aug 05 '11 at 20:35

Diodeus - James MacFarlane

112,730
33
157
176

Freeze all in page with jquery when user fire click

2 Answers2