Comments on: Using jQuery to enhance ASP.NET AJAX progress indication

By: Dave Ward

Dave Ward — Fri, 19 Feb 2010 22:31:15 +0000

It’s hard for me to help you debug that, not knowing the specifics (e.g. is validation on the page during every request, which elements trigger UpdatePanel refreshes, etc). I’d suggest stepping through that in Firebug, inspecting the DOM, and trying to get a sense for what’s going on in your particular situation.

By: Markis

Markis — Fri, 19 Feb 2010 21:42:08 +0000

I spoke to soon. if (Page_IsValid) works for the button that has validatoin setup, but it has stopped BlockUI from firing on [some] other buttons. I actually have more than one control (buttons, links and linkbuttons) setup to initiate blockUI, some with validation but most without. Some are now just not firing at all.

e.g.

$(document).ready(function() {
    // Allows the div.blockMsg style in CSS to override BlockUI's defaults.
    $.blockUI.defaults.css = {};
 
 $('#button1, #button2, #button3, #button4, #button5, \
#button6, #button7, #button8, #button9, #button10, \
#button11, #button12, #button13, #button14, #button15, \
#lnkbutton16, #lnkbutton17, #lnkbutton18, #lnkbutton19, #lnkbutton20').live("click", function() {
if (Page_IsValid) {
            $.blockUI({ message: ' ',
                css: {
                    top: '40%', //($(window).height()- 100 ) / 2 + 'px',
                    left: ($(window).width() - 392) / 2 + 'px'
                }
            });
            var IE = /*@cc_on!@*/false;
            if (IE) {
                eval(this.href);
            }
            setTimeout($.unblockUI, 5000);
}
 
        });

Help please?

By: Markis

Markis — Fri, 19 Feb 2010 20:33:40 +0000

That easy! Many thanks!

By: Dave Ward

Dave Ward — Fri, 19 Feb 2010 18:23:06 +0000

Just add in a conditional based on that variable, like this:

$('#lbSubmit, #lbCancel').live("click", function() {
  if (Page_IsValid) {
    // Your BlockUI code here
  }
});

By: Markis

Markis — Fri, 19 Feb 2010 11:32:20 +0000

Hi Dave,

You lost me. Can you explain it in a bit more detail please? I haven’t managed to get this to work. I am still using a timeout and the BlockUI is still firing when the page isn’t valid.

How do I test the Page_IsValid global variable from within my blockUI.js file? My blockUI.js currently looks like this:

$(document).ready(function() {
    // Allows the div.blockMsg style in CSS to override BlockUI's defaults.
    $.blockUI.defaults.css = {};
 
    $('#lbSubmit, #lbCancel').live("click", function() {
            $.blockUI({ message: ' ',
                css: {
                    top: '40%', //($(window).height()- 100 ) / 2 + 'px',
                    left: ($(window).width() - 392) / 2 + 'px'
                }
            });
            var IE = /*@cc_on!@*/false;
            if (IE) {
                eval(this.href);
            }
            setTimeout($.unblockUI, 5000);
        });
 
    // Get a reference to the PageRequestManager.
    var prm = Sys.WebForms.PageRequestManager.getInstance();
 
 prm.add_endRequest(function() {        
        // Unblock the form when a partial postback ends.
        $.unblockUI();
    });
 
});

By: Ramit

Ramit — Thu, 26 Nov 2009 10:40:59 +0000

Thnx :)

By: Dave Ward

Dave Ward — Wed, 25 Nov 2009 15:36:53 +0000

If you want the BlockUI modal to appear when you click a checkbox, you can use something like this to attach handlers to all their click events:

$(document).ready(function() {
  $("#GridView1 :checkbox").click(function() {
    // This assumes you set up the progress
    //  bar CSS in the example above.
    $('#GridView1').block({ message: null });
  });
});

By: Dave Ward

Dave Ward — Wed, 25 Nov 2009 15:28:39 +0000

Sorry, I missed this before somehow.

Probably the easiest fix would be testing the Page_IsValid global variable before blocking. ASP.NET’s client-side validation code maintains that based on the status on the client-side validation.

Depending on your page, the better solution may be to move the BlockUI code from the button’s click event to the PageRequestManager’s BeginRequest event. That should only fire after validation has succeeded. However, since that fires before every partial postback, you may need to test that the triggering panel is one that you do in fact want to cause a BlockUI modal.

By: Markis

Markis — Wed, 25 Nov 2009 14:42:01 +0000

Any idea how to do this?

By: Ramit

Ramit — Wed, 25 Nov 2009 11:52:07 +0000

Thanks for the excellent demonstration. I was trying to implement your code in one of my projects where I need to refresh the gridview based on the checkbox selection. I tried to hook up the event to selectindexchenged event of checkbox, but the jquery effect didnt work. Can you please suggest me something.

By: Markis

Markis — Tue, 17 Nov 2009 07:14:05 +0000

I have validation setup on a webform using a combindation of asp:RequiredFieldValidators and asp:RegularExpressionValidators. I have a BlockUI handler configured for the Submit button, which is working nicely. However, if validation fails the message box pops up informing the user that validation has failed – when the OK button is clicked BlockUI kicks in and since it won’t cause a postback the UI is never unblocked. I currently have a timer set, which unlocks the UI, but this is a nasty work around. Is there a way to bypass BlockUI if validation fails?

By: Markis

Markis — Sat, 14 Nov 2009 14:41:16 +0000

Thanks Dave! Upgrading my jQuery library to 1.3 and using .live(“click”, function() works perfectly.

By: Dave Ward

Dave Ward — Sat, 14 Nov 2009 08:30:05 +0000

If that refresh is a partial postback and the refresh replaces the markup for the BlockUI trigger, you’ll need to re-attach the handler after the partial postback (in EndRequest or pageLoad). Alternatively, you could use jQuery’s live() to wire up the handler instead of click().

By: Markis

Markis — Fri, 13 Nov 2009 17:25:36 +0000

Thanks Dave. That is much neater. This also seems to have resolved my issue of the BlockUI not detecting the partial postback for the LinkButton. This is working now too. However, it only works the first time.

E.g. I have a dropdownlist with a list of Provinces (States), and the click of the link button refreshes the data based on which Province is selected. The BlockUI kicks on the first click, but subsequent clicks don’t initiate BlockUI. Any idea why? (If I force a full postback using Response.Redirect(URL) it works – but that refreshes the page with the default items which is no good.)

By: Dave Ward

Dave Ward — Fri, 13 Nov 2009 16:11:59 +0000

By using a single jQuery selector, I mean something like:

$('#Element1, #Element2, #Element3').click(function() {
  $.blockUI();
});

Or, if you tag all of those server controls with a CSS flag, you could use a single CSS-based jQuery selector.