jQuery, ThickBox with Ajax content for beginner

Question

Here is the scenario:

ThickBox is opened from parent window (when button is pressed) with Ajax content (div based form) that contains the set of inputs with autocomplete support. Once ThickBox(form) is closed the input values should be passed to parent window.

Question: the content of ThickBox is loaded dynamically, so what's the correct way to have an initial callback to manipulate ThickBox content with jQuery (kind of $(ThickBox).ready.. )?

Answer 1

My prefered option is to investigate other modal plugin options such as jqModal. This does expose onShow and onHide event hooks that you can utilise.

Thickbox is showing its age, it does not expose any 'show' events that you can observe. If you are hell bent on using thickbox then you have a few options.

One option would be to use the global ajax events that jQuery exposes e.g $.ajaxSuccess event. This will fire when thickbox has successfully requested the data to show. However at this point thickbox may not have added the data to the modal, you will have to try this out.

E.g

$.ajaxSuccess( function(evt, request, settings){
   //ajax method has completed
});

Be aware that this event will fire on completion of every ajax event that happens within your page therefore you may want some extra checks

Another option is to change the thickbox script and add your own callback code that allows you to pass in a function which will be raised when the modal is shown.

Answer 2

Edit: The blog post has vanished (no need to downvote)
2009 news! Check out this blog post about using LiveQuery plugin to do that- http://www.codynolden.com/blog/2009/01/thickbox-and-ajax-using-livequery/

You can use the LiveQuery plugin. This plugin will intercept changes in the DOM and automagically re-bind others plugins reading the DOM