Jquery block UI not working when used twice?

Question

I am using jquery block UI plugin, my requirement is to check if user is authorized user or not, here is my code

<script language="javascript" type="text/javascript">

        $(document).ready(function () {
            $('#btnsubmit').click(function () {
                $.blockUI({ css: {
                    border: 'none',
                    padding: '15px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: .5,
                    color: '#fff'
                }
                });
            });
        }); 

     function ajaxAuth() {
       //UserLogin.IServiceLogin.HelloWorldCC(OnSuccess, OnFailure);
         var usrname = document.getElementById('txtusrname').value;
         var pasd = document.getElementById('txtpassword').value;
         UserLogin.IServiceLogin.GetUseCred(usrname, pasd, onSuccess, onFailed);
     }

     function onSuccess(result) {
         setTimeout($.unblockUI, 0);
         var obj = jQuery.parseJSON(result);

         if (obj.name != "error" ) {
             document.getElementById('labusr').value = obj.name;
             document.getElementById('labpass').value = obj.passd;
             document.getElementById('labkey').value = obj.key;
             location.href = "DesignAPage.aspx";
         } else {
             $.blockUI({ message: $('#question'), css: { width: '350px'} });

//             $('#ok').click(function () {
//                 $.unblockUI();
//                 return false;
//             }); 
         }
     }

     function onFailed(result) {
         alert("failure");
     }

    </script>

so the problem is while i am using $.blockUI({ message: $('#question'), css: { width: '350px'} }); it just blocks the screen for a second and unblocks the screen.

Any help is greatly appreciated

Try with unblockUI befor blockUI, it may help.

Bhushan Kawadkar
– Bhushan Kawadkar

2012-05-22 16:06:41 +00:00
Commented May 22, 2012 at 16:06 — Bhushan Kawadkar
– Bhushan Kawadkar, Commented May 22, 2012 at 16:06

TJ VanToll · Accepted Answer · 2012-05-22 16:20:52Z

1

The problem is being caused by setTimeout($.unblockUI, 0);. Even though you might think that calling this would cause the code to attached function to run immediately, it does not. You can verify this by running the following:

setTimeout(function() {
    console.log('one');
}, 0);
console.log('two');

two is logged before one. The reasoning for this is in the way JavaScript handles timers internally. Since it is single threaded, nothing ever runs concurrently. Passing 0 milliseconds to setTimeout will just force the function to run at the first available moment. In this case that's right after $.blockUI is called.

John Resig has a nice write up on this at http://ejohn.org/blog/how-javascript-timers-work/.

answered May 22, 2012 at 16:20

TJ VanToll

12.7k5 gold badges46 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jagadeesh Venkata · Accepted Answer · 2012-05-22 17:58:45Z

try doing this in else block

else {
             $.unblockUI({
                 onUnblock: function () {
                     $.blockUI({ message: $('#question'), css: {
                         border: 'none',
                         padding: '15px',
                         backgroundColor: '#000',
                         '-webkit-border-radius': '10px',
                         '-moz-border-radius': '10px',
                         opacity: .5,
                         color: '#fff'
                     }
                     });
                     $('#ok').click(function () {
                         $.unblockUI();
                         return false;
                     }); 
                   }
             }); 
         }

BenSchro10 · Accepted Answer · 2012-05-22 16:26:09Z

0

I chopped your code up a bit but this is working.

$(document).ready(function() {
$.blockUI({ css: { 
    border: 'none', 
    padding: '15px', 
    backgroundColor: '#000', 
    '-webkit-border-radius': '10px', 
    '-moz-border-radius': '10px', 
    opacity: .5, 
    color: '#fff' 
    } 
    }); 

    onSuccess();

});

function onSuccess() { 
$.unblockUI();

$.blockUI({ message: "Some message", css: { width: '350px'} }); 

}

edited May 22, 2012 at 16:26

answered May 22, 2012 at 16:12

BenSchro10

3261 silver badge7 bronze badges

Collectives™ on Stack Overflow

Jquery block UI not working when used twice?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related