A possible reason for jQuery thickbox appearing twice on a click

I had an issue while using thickbox with jQuery today. The thickbox which i had been using to show ajax content opened twice. It appeared like one single window/thickbox but it stretched down the page making bottom border go out of sight. I debugged it with firebug and in html source i found that it had been creating the <div id="TB_ajaxContent"></div> window twice. Filled with ajax content once and only an empty <div id="TB_ajaxContent"></div> second time.

After spending sometime on debugging through the pages i found the culprit finally. The thickbox.js file had been called twice on the page. Ugh!

Calling thickbox.js file binds click event to all elements that are given thickbox css class. Calling thickbox file twice binds click event twice which in result makes thickbox to appear twice on a click. The possible reason for not filling up the ajax model with ajax html data second time seems that when it is called first time and TB_ajaxContent is filled with html data it calls  $("#TB_load").remove(); (in thickbox.js file) that seems to have been terminating the ajax load process once it had been processed.

So if you are facing the problem of jquery thickbox appearing twice go and check whether the thickbox.js file was not being called twice on your page.

Leave a Reply