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

By: Dorababu

Dorababu — Mon, 14 May 2012 11:44:33 +0000

How can I apply validation to some of the fields and show the progress if the form is valid only

By: ming

ming — Tue, 14 Feb 2012 00:47:57 +0000

Dave,
Thank you for getting back to me. I finally got it to work with Shail’s example. the only thing is that his example blocks the whol screen instead of partial of the screen. I’ll try to get this one to work for me when i have more time to work on it. But it works for what i need to do at this time. Again, than you for your post.

By: Dave Ward

Dave Ward — Sat, 11 Feb 2012 06:34:54 +0000

The problem there is going to be that <%= Save.ClientID %> and <%= EntryForm.ClientID %> can't be resolved to their values in an external JavaScript file, because it doesn't run through the ASP.NET engine like an ASPX file does. Take a look at some of the other suggestions in the comments on the robust ASP.NET control referencing post I linked earlier. Using a CSS class is one way, or if you don't mind the performance hit, you can use the "ends with" selector.

By: Ming

Ming — Tue, 07 Feb 2012 21:27:56 +0000

Dave,
I really appreciate that you take your time to help us to get the code to work after all these time.
Can you confirm that if my thought is correct? I should NOT put the default.js which contains Sys.Application.add_init() in the master page, right? I’m referencing the 2 jquery files in the master page file and the default.js in the page that is using master page uses this BlockUI plug in. Is it correct?
I updated your recommended code as followings and was able to move further but still having problem at the line in the Save_Click() function.

Sys.Application.add_init(AppInit());
 
function AppInit() {
    $.blockUI.defaults.css = {};
    $addHandler($get('<%= Save.ClientID %>'), 'click', Save_Click());
}
 
function Save_Click() {
    $($get('#<%= EntryForm.ClientID %>')).block({ message: null });
}

I’m using VS 2010 and I can step through the code in the updated default.js and jquery.blockUI.js. I got an error at this.style.zoom = 1 in the code shown bellow from jquery.blockUI.js.

// plugin method for blocking element content
$.fn.block = function(opts) {
    return this.each(function() {
        if ($.css(this,'position') == 'static')
            this.style.position = 'relative';
        if ($.browser.msie) 
            this.style.zoom = 1; // force 'hasLayout'
        install(this, opts);
    });
};

Can you please take another look please? I felt that I’m really close. I can sent you my zipped project file if you do not mind.

Thank you so much!!!

By: Dave Ward

Dave Ward — Tue, 07 Feb 2012 00:58:33 +0000

That’s probably indicating that the BlockUI plugin’s JavaScript hasn’t been included on the page (or hasn’t been yet when that code’s running).

By: Ming

Ming — Tue, 07 Feb 2012 00:57:15 +0000

My error is JScript runtime error: $.blockUI.defaults is null or not an obj at the line of $.blockUI.defaults.css = {};

By: Dave Ward

Dave Ward — Tue, 07 Feb 2012 00:56:57 +0000

The code in my previous comment would replace the entire $(document).ready() block. If you’re using add_init, then it would need to be updated like this:

Sys.Application.add_init(AppInit);
 
function AppInit() {
  $.blockUI.defaults.css = {};
 
  $addHandler($get('<%= Save.ClientID %>'), 'click', Save_Click);
}
 
function Save_Click() {
  $('#<%= EntryForm.ClientID %>').block({ message: null });
}

That assumes your controls are still named Save and EntryForm on your master page. If not, be sure to modify that accordingly.

It also assumes that this code is inline in an ASPX page, so the ASP.NET expressions can be resolved. If not, there are a variety of other ways to tame the ClientID issue (be sure to read the comments): http://encosia.com/robust-aspnet-control-referencing-in-javascript/

By: Ming

Ming — Tue, 07 Feb 2012 00:48:20 +0000

Great post! I got it to work like a charm without using the master page. does the solution you provided here for the master page issue replace the whole Sys.Application.add_init routine? some how my error went away. but the progress image does not show up neither.
Thank you so much on helping us.
Ming

By: Ming

Ming — Tue, 07 Feb 2012 00:43:44 +0000

This is not really true from my experience. the update panel requires the script manager to be using before itself.

By: Ming

Ming — Tue, 07 Feb 2012 00:41:25 +0000

I have exactly the same problem. can you show me how did you fixed the problem. the code works like a charm without master page. but failed when using the with master page. I used Dave’s solution the error went away but the progress bar is not showing. Thank you so much.

By: Dave Ward

Dave Ward — Fri, 21 Oct 2011 21:53:25 +0000

$get doesn’t support a full range of selectors. it’s basically just a document.getElementById shortcut. Use jQuery’s selector engine instead:

$('#UpdatePanel1 input').click(function() {
...
});

By: mosy

mosy — Fri, 21 Oct 2011 21:49:42 +0000

What if want for every button in updatepanel ? at this case $get(‘#UpdatePanel1 input’) selector doesn’t work .

  $addHandler($get('#UpdatePanel1 input'), 'click', function () {
  ...
  });

I appreciate any help

By: retv

retv — Mon, 29 Aug 2011 02:32:33 +0000

Friend some example based on a master page and translated it does not work any ideas

By: retv

retv — Sun, 28 Aug 2011 18:57:03 +0000

regards
I have tried to emulate this example by changing the calendar month of an object and I worked here as I am using

in webform

in code c#

this.Calendar1.VisibleDate = new DateTime(DateTime.Now.Year, VarMonth, 1, 0, 0, 1);

Greetings and thanks

By: Ajax waiting page | 当我不能够再拥有,唯一可以做的,就是

Ajax waiting page | 当我不能够再拥有,唯一可以做的,就是 — Thu, 24 Mar 2011 19:04:23 +0000

[...] http://encosia.com/2008/10/04/using-jquery-to-enhance-aspnet-ajax-progress-indication/ This entry was posted in AJAX, ASP.Net, JQuery. Bookmark the permalink. ← Write log event in DNN LikeBe the first to like this post. [...]