A note on DOM elements’ changed scope when using thickbox with jQuery
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.
Possibly Related posts:
- Fix to jQuery ui calendar not appearing from or hiding behind thickbox
If you are facing an issue of jQuery ui calendar not appearing while clicked from a jQuery thickbox or if some part of the calendar... - 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... - Fix to jQuery plugin does not work on ajax loaded content
I had been loading table records through ajax pagination using jquery. Some of the urls/links (View Details, Edit and Delete) in loaded content had been... - Checking / Unchecking radio buttons and retrieving their value in jQuery
Let us assume we have radio buttons <input name="rd_name" id="RD1" value="Value One" /> Label 1 <input name="rd_name" id="RD2" value="Value Two" /> Label 2 To retrieve... - How to prevent parent’s onclick event from firing when a child tag is clicked with jquery?
Generally, Javascript events bubble (listen) to the highest point in the DOM to which a click event had been attached. So even if you don’t...
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
