ThickBox 3.1 within ASP.NET UpdatePanel
by Steve Hernandez on Jun.28, 2008, under Technology
So, out of the box, this just doesn’t work. Here’s the situation.
Thickbox works fine before any async postbacks by the updatepanel. However, once the updatepanel is reloaded (does a postback), thickbox will no longer work and will render your links regular HTML links.
The Reason
The reason for this is when the updatepanel posts back, the javascript is reloaded but is not initialized, nor is it registered with the DCOM.
Solution
Add the following code to the pageLoad method in your AJAX enabled page, so that it looks something like this:
<script type=”text/javascript” language=”javascript”>
function pageLoad()
{
var isAsyncPostback = Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack();
if (isAsyncPostback) {
tb_init(‘a.thickbox, area.thickbox, input.thickbox’);
}
}
</script>
This code will check if there is an async post back being fired, and if so, will re-initialize thickbox.
I search around for at least 4 hours until I was able to piece together some solutions. This is the best one.
Good luck.
ASP.NET UpdatePanel ATLAS AJAX ThickBox modal iframe
27 Comments for this entry
3 Trackbacks / Pingbacks for this entry
-
My view of life : 2 linkuri
October 24th, 2008 on 6:28 PM[...] MouseOverThickBox 3.1 within ASP.NET UpdatePanel Technorati tags: ASP.NET, hyperlink, ajax, thickbox, asp:updatepanel Filed under: ASP.NET, [...]
-
Websites tagged "thickbox" on Postsaver
June 24th, 2009 on 3:01 PM[...] – jQuery Thickbox on Ajax Generated Pages | djcnet.co.uk saved by rmpenguino2009-06-22 – ThickBox 3.1 within ASP.NET UpdatePanel saved by Cynfox2009-06-15 – Simple Flash Video 1.6 Beta 4 saved by wesleychapel2009-06-11 – Jquery [...]
-
Side effects of drug xanax.
August 24th, 2009 on 4:29 AMEffects of xanax….
Side effects of drug xanax. What is xanax. Xanax as a party drug. Buy xanax online. Can you buy xanax without a prescription. Xanax….
July 11th, 2008 on 12:22 AM
Thank you!!! This bit of code solved a HUGE problem for me.
August 29th, 2008 on 3:02 PM
This really helped me, thanx a lot !!!
October 24th, 2008 on 6:29 PM
Good article. Fixed a bunch of problems.
There is also a port to a server control here : http://www.dotnet6.com/blogs/erik_lenaerts/archive/2007/07/07/asp-net-thickbox-control.aspx
November 12th, 2008 on 5:55 PM
Thank you very much. A lovely snippet of code which does exactly what it says on the tin. Perfect.
December 5th, 2008 on 8:34 PM
Huge help, thank you.
January 24th, 2009 on 7:58 AM
For noobs like me, I was able to get this registered with the Page_Load function by creating a separate script as tb_helper.js with the following content:
function pageLoad() {
var isAsyncPostback = Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack();
if (isAsyncPostback) {
tb_init(?a.thickbox, area.thickbox, input.thickbox?);
}
}
Then I added it to the Page_Load by calling:
Page.ClientScript.RegisterStartupScript(Me.GetType, “Thickbox_Helper”, “/scripts/tb_helper.js”)
There may be a better way, but again I’m a newbie at this ASP.NET stuff, I’d rather be in my happy J2EE world.
February 28th, 2009 on 6:00 AM
Perfect !
March 6th, 2009 on 1:22 AM
Thank you SO MUCH!! Pure genius…
May 28th, 2009 on 3:13 AM
Thank you!!! This bit of code solved a HUGE problem for me. [2]
June 4th, 2009 on 2:42 PM
Thanks, this was very helpful.
June 19th, 2009 on 2:40 PM
Thank you. Its solved my problem.
This would help new users like me to call the function without trouble.:)
June 19th, 2009 on 2:44 PM
Thank you. Its solved my problem.But I spend some time to find out how to call pageLoad.:)
June 23rd, 2009 on 10:43 PM
Excellent! Thank you very much. I’m using master page. JQuery and thikbox JS files referenced in the master page. Your excellent script in the content page. And the call to that function inside the updatePanel. Boom! thickbox pops up. Thank you again.
July 21st, 2009 on 7:01 PM
Thank you! I had exactly the same problem and you solved it!
July 29th, 2009 on 4:03 AM
Thank u!!! Very helpful!
May you solve the same problem with SqueezeBox?
August 2nd, 2009 on 7:22 PM
Solution didn’t work for me.In the page , there are dropdownlist controls in update panel which without working with thickbox work perfectly,but after putting in on the page , I’ve seen that any selection from dropdownlist causes control to select its first item.I think it is the solution you provide for thickbox but I couldn’t make it work properly.
How can you help me about this manner ?
August 20th, 2009 on 1:14 AM
Thanks! Your solution saved a bunch of time!
August 23rd, 2009 on 11:38 AM
You are truly a life saver!! I live in San Diego, if you live anywhere near, I will take you out for a beer!! Seriously
Thanks!
Brian
August 28th, 2009 on 9:12 PM
yeah.. i had this problem once and solved it like as follows :
function pageLoad(sender, args) {
if(args.get_isPartialLoad()){
tb_init(‘a.thickbox’)
;}}
simpler and works.
greetz.
September 17th, 2009 on 12:38 AM
Excelente artigo!
Valeu!
November 3rd, 2009 on 3:33 PM
this is so nice working fine even when i add it on user control, thank you
December 3rd, 2009 on 11:43 PM
If the script is used in a page that does not use thickbox (e.g., when the script is placed in an ASP.NET master-file), an error can occur because ‘Sys.WebForms’ will be an undefined object.
Here’s a version with a fix:
<script type="text/javascript" language="javascript">
function pageLoad() {
if (typeof (Sys.WebForms) != ‘undefined’) {
var isAsyncPostback = Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack();
if (isAsyncPostback) {
tb_init(‘a.thickbox, area.thickbox, input.thickbox’);
}
}
}
</script>
Regards,
- Nalin J
December 4th, 2009 on 12:01 AM
(updated version)
If you are using the above script segment … but where you may or may not have a ThickBox used in an ASP.NET page (e.g., when the script segment is placed an an ASP.NET master-page), you will receive an error message because ‘tb_init’ is not defined.
Here’s the updated code with a fix:
<script type="text/javascript" language="javascript">
function pageLoad() {
if (typeof (tb_init) != ‘undefined’) {
var isAsyncPostback = Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack();
if (isAsyncPostback) {
tb_init(‘a.thickbox, area.thickbox, input.thickbox’);
}
}
}
</script>
Regards,
- Nalin J
January 6th, 2010 on 7:33 AM
Help ! And Imagebutton?
<asp:ImageButton runat="server" ID="IdChange" Visible='’ PostBackUrl=”WebForm1.aspx?TB_iframe=true&height=250&width=400″ class=”thickbox” ImageUrl=”~/edit.png” />
I TRY
tb_init(‘asp:ImageButton.thickbox’);
tb_init(‘asp.thickbox’);
tb_init(‘ImageButton.thickbox’);
Nothing, any ideas?
January 6th, 2010 on 9:52 PM
The solution did not work for me. However, it helped me in the right direction.
Thank you very much for your time.
Best,
Lawk Salih
February 1st, 2010 on 9:04 PM
Once I have clicked an thickbox link then the update panel that is resides in performs a full page request.
Has anyone else hit this issue?
Thanks in advance
July 7th, 2010 on 9:37 AM
Well done