Jan
27
Written by:
Ron Miles
1/27/2011 8:49 AM
UPDATE 2/13/11: This solution has a fatal flaw. Please see my updated solution for a better approach.
When partial postback is enabled for a DotNetNuke module, DNN very helpfully wraps the entire module in an update panel and then places an animated progress bar at the bottom of the panel that becomes visible during partial postbacks. In most cases this is just fine, but on my current project the business owner requested that the progress indicator be moved to a different location because it was frequently not visible below the fold. I looked to see if DNN had any built in functionality to specify the location of the progress bar, and quickly discovered that none existed. No worries, though, a little dollop of jQuery and everything was working exactly as the business owner wanted.
If you take a look at the page source on a DNN page containing a module with partial postback enabled, you will see two relevant things. First, DNN wraps the entire module in a div tag that looks like:
Most of the id is of course dependent upon the module control name, but it will always end in “_UP” (for Update Panel). If this is the only module that will be on your page that supports partial postbacks, you can use jQuery to find that element with the selector:
$("div[id$='_UP']")
If you are not familiar with it, the id$= selector matches any id that ends in the specified string. In my case this is fine, since I know I will always only have the one update panel on the page I am working with. In many cases this is not good enough, so you should be a little more specific with something like:
$("div[id$='_Dashboard_UP']")
In that example, it would match on the update panel wrapping a module view coming from a control named Dashboard.ascx.
The other relevant element is the div wrapped around the actual progress bar that you want to move. That element looks like:
Using the same selection technique you can find that that element as follows:
$("div[id$='_UP_Prog']")
In my case, I had an area of white space towards the top of my module that was perfect for placing the progress bar where it would always be visible. I simply added a new div with an id of “RelocatedProgressBar” placed where I wanted the progress bar to go, and then added the following bit of jQuery to the page:
$(document).ready(function () {
$("div[id$='_UP_Prog']").appendTo("div[id='RelocatedProgressBar']");
});
A quick inspection of the page after loading shows that, sure enough, the partial postback progress bar has been removed from the bottom of the update panel and been appended to my RelocatedProgressBar div. Whenever a partial postback occurs, the progress bar displays in its desired location instead of at the bottom.
You can also use this same methodology to replace the image with a different one to suit your needs. Sure, you could just replace progressbar.gif with a different image in the file system, but I never like to modify core DNN files since those changes run the risk of being overwritten during upgrades. Plus you would be limited to replacing it with another .gif file, where you might want to take advantage of the alpha blending in a .png file instead. By using jQuery to select the image element and completely replace the image, you have the flexibility to use whatever image you want without the worry of it being broken again in a future DNN upgrade.
So there you have it, the DotNetNuke Partial Postback Progress Bar relocated to a new spot with the addition of one line of html and one line of jQuery. Enjoy!
5 comment(s) so far...
Re: Relocating the DotNetNuke Partial Postback Progress Bar
That's a great solution! It seems like it would be easy to implement globally in a skin/container...
Rather than selecting "div[id='RelocatedProgressBar']", I think it will probably be more optimized (and more inline with jQuery's CSS style) to select "div#RelocatedProgressBar"
In terms of DNN not having the option to restyle, I was just about to see if I could get some community support for DNN adding that option: support.dotnetnuke.com/Default.aspx?p=2&i=14559.
By Brian Dukes on
2/9/2011 9:08 AM
|
Re: Relocating the DotNetNuke Partial Postback Progress Bar
Hi,
thanks for sharing this nice solution. just try to implement it but it does not work. the progress bar stays at the bottom.
I'm new to jquery, is it possible i need a specific version? i copied the one from DNN 560 to my project DNN 494.
Must this relocation statement be in the header? or on top? or at the bottom? I dont have any script errors, the bar just stays down.
Any ideas would be greay
Best Regards
Olivier
By Olivier Jooris on
2/9/2011 9:08 AM
|
Re: Relocating the DotNetNuke Partial Postback Progress Bar
Brian,
Thank you for that suggestion. I will definitely clean up the code with that change. I am right there with you on adding the restyling option.
By Ron Miles on
2/9/2011 9:09 AM
|
Re: Relocating the DotNetNuke Partial Postback Progress Bar
Olivier,
I haven't tried this with DNN v4.9.4, and it is possible it renders differently. This weekend I will spin up a 4.9.4 instance and see what I can find.
By Ron Miles on
2/9/2011 9:10 AM
|
Re: Relocating the DotNetNuke Partial Postback Progress Bar
Olivier,
Please see my newer blog post for an updated solution that may work better for you.
By Ron Miles on
2/13/2011 11:06 AM
|