Welcome, Guest

Want to take part in these discussions? If you have an account, sign in now.

If you don't have an account, apply for one now.

1. • CommentAuthorblakem
   • CommentTimeJun 15th 2009

    
   Hi
   
   I've got a page of AJAX dynamically generated ThickBox links. When new links are added by AJAX I call tb_init(".thickbox"). Clicking on a ThickBox link loads the page as expected.
   
   When a ThickBox link has been closed and you then click on another ThickBox link it loads but with an extra area stretching from the bottom of the ThickBox to the foot of the browser. Once this has happened the behaviour remains until the page is reloaded.
   
   It's almost as if calling tb_remove() to close the ThickBox window creates some kind of corruption.
   
   Does anyone have any ideas??
2. • CommentAuthorblakem
   • CommentTimeJun 16th 2009

    
   Has anyone else come across this problem?
3. • CommentAuthorblakem
   • CommentTimeJun 16th 2009

    
   Using Firebug I can see where the symptom of the bug/error is being caused. You will notice that there is a lot of repetition of the TB_title and TB_ajaxContent elements:
   
   
<div id="TB_overlay" class="TB_overlayBG"/>
<div id="TB_window" style="margin-left: -315px; width: 630px; margin-top: -195px; display: block;">
<div id="TB_title">
<div id="TB_ajaxWindowTitle">My Page Title</div>
<div id="TB_closeAjaxWindow">
<a id="TB_closeWindowButton" href="#">close</a>
or Esc Key
</div>
</div>
<div id="TB_ajaxContent" style="width: 600px; height: 345px;">
<p>My thickbox window content</p>
</div>
<div id="TB_title">
<div id="TB_ajaxWindowTitle">My Page Title</div>
<div id="TB_closeAjaxWindow">
<a id="TB_closeWindowButton" href="#">close</a>
or Esc Key
</div>
</div>
<div id="TB_ajaxContent" style="width: 600px; height: 345px;"/>
<div id="TB_title">
<div id="TB_ajaxWindowTitle">My Page Title</div>
<div id="TB_closeAjaxWindow">
<a id="TB_closeWindowButton" href="#">close</a>
or Esc Key
</div>
</div>
<div id="TB_ajaxContent" style="width: 600px; height: 345px;"/>
<div id="TB_title">
<div id="TB_ajaxWindowTitle">My Page Title</div>
<div id="TB_closeAjaxWindow">
<a id="TB_closeWindowButton" href="#">close</a>
or Esc Key
</div>
</div>
<div id="TB_ajaxContent" style="width: 600px; height: 345px;"/>
<div id="TB_title">
<div id="TB_ajaxWindowTitle">My Page Title</div>
<div id="TB_closeAjaxWindow">
<a id="TB_closeWindowButton" href="#">close</a>
or Esc Key
</div>
</div>
<div id="TB_ajaxContent" style="width: 600px; height: 345px;"/>
<div id="TB_title">
<div id="TB_ajaxWindowTitle">My Page Title</div>
<div id="TB_closeAjaxWindow">
<a id="TB_closeWindowButton" href="#">close</a>
or Esc Key
</div>
</div>
<div id="TB_ajaxContent" style="width: 600px; height: 345px;"/>
</div>

4. • CommentAuthorblakem
   • CommentTimeJun 16th 2009

    
   OK doesn't look like I'm going to get a response. So I'll post my work-around.
   
   I managed to fix the issue by adding code into thickbox.js (v3.1). I replaced this on line 204:
   
   
$("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>close</a> or Esc Key</div></div><div id='TB_ajaxContent' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px'></div>");

   
   with this
   
   
//FIX FOR DUPLICATE HTML. Check TB_title is not already within the generated HTML
if(!$("#TB_window").html().match(/TB_title/g,"")) {
$("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>close</a> or Esc Key</div></div><div id='TB_ajaxContent' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px'></div>");
}

   
   It's a bit of a mystery as to why this is happening. I'm interested in finding out why - anyone got any ideas?
5. • CommentAuthorkiklop
   • CommentTimeFeb 2nd 2010

    
   I had the same problem & your solution is perfect..
   I dont know how it works, but it WORKS :)
   
   Thanks a lot !!