A similar situation may arise (atleast for me it did) when you try to invoke jQuery’s “thickbox” in conjunction with a custom onclick firing. I would explain it with the help of an example:
I have a div element (with id “myBlockTOShow”, i would say it “#myBlockTOShow” in this post further) which i display/present as a “thickbox” when a href tag/link is clicked. Here is how the div element looks like:
And here is link/href tag to invoke the thickbox:
Invoke Thickbox
When i click “Invoke Thickbox” link the “thickbox” opens up. Everything working fine till now. Nice.
Now assume you wanted to perform some action on the contents of the “thickbox” div element i.e. #myBlockTOShow when someone clicks “Invoke Thickbox” link/href tag. In my case, i created an event capture to do the same:
$(document).ready (function() {
$('a.linkclass').click(function() {
alert($('#myBlockTOShow').html()); //would alert nothing
alert($('#myBlockTOShow input').val()); //would alert nothing
$('#myBlockTOShow input').val("Arvind clicked it!"); //would not work
})
})
What i had been try to do here was to access the “thickbox” div element’s DOM nodes or its childern nodes and their values. But, actually, as soon as i clicked the “Invoke Thickbox” link/href tag, the “Thickbox” script cuts/pastes #myBlockTOShow’s innerHTML contents to #TB_ajaxContent div element wrapper of #TB_window div element wrapper (both belong to “thickbox” DOM html) turning #myBlockTOShow (my original thickbox id) blank from within. When you close the “thickbox” using tb_remove() it puts innerHTML of #myBlockTOShow back to its original position.
So, to make your custom onclick work in conjuction with your “thickbox” (assuming your invoke link is same as mentioned above i.e. <a href=”#TB_inline?height=300&width=540&inlineId=myBlockTOShow&modal=true” class=”thickbox linkclass”>Invoke Thickbox</a>), either do:
$(document).ready (function() {
$('a.linkclass').click(function() {
alert($('#TB_window #TB_ajaxContent').html()); // this alerts innerHTML contents basically of #myBlockTOShow div element
alert($('#TB_window #TB_ajaxContent input').val()); //would alert "No one opens me!"
alert($('#TB_window #TB_ajaxContent input').val("Arvind clicked it!")); //value fo input tag replaced with "Arvind clicked it!"
})
})
Or change your Invoke link/href tag a bit to:
Invoke Thickbox
and put the “thickbox” invoking within your event capture function, like:
$(document).ready (function() {
$('a.linkclass').click(function() {
alert($('#myBlockTOShow').html()); //this alerts innerHTML contentsof #myBlockTOShow div element
alert($('#myBlockTOShow input').val()); //would alert "No one opens me!"
$('#myBlockTOShow input').val("Arvind clicked it!"); //value fo input tag replaced with "Arvind clicked it!"
/// actions...
tb_show("My Thickbox name", "#TB_inline?height=300&width=540&inlineId=deleteContact&modal=true"); //trigger thickbox now
})
})
Hope that helps someone.
