ui dialog in hidden TD

refaelb

I am using datatables with jquery ui dialog (class="opener") and it works great.
Only when i add a link inside of a hidden the popup does not work.
Anyone knows how to trigger it to work?

Thanks.

refaelb

here is the script:
===============================================================
[code]
$('.opener').each(function() {
var $dialog = $('')
.append($loading.clone());
var $link = $(this).one('click', function() {
$dialog
.load($link.attr('href'))
.dialog({
title: $link.attr('title'),
resizable: true,
width:'auto'
});

$link.click(function() {
$dialog.dialog('open');

return false;
});

return false;
});
[/code]

allan

Do you mean that you are hiding the column with bVisible? If so, what DataTables is doing is removing the TD element from the DOM (and just holing it as a reference incase you want to reinsert it later). So what you need is a reference to the TD element that has been removed - this can be obtained with fnGetNodes ( http://datatables.net/api#fnGetNodes ).

To use fnGetNodes you just need to change your selector to the following, and jQuery will take care of the rest:

[code]
$('.opener', oTable.fnGetNodes()).each(function() {
[/code]
Regards,
Allan

refaelb

Hi Allan, thank you so much.

this is the script i am using:
[code]
var $loading = $('');

$('.opener').each(function() {
var $dialog = $('')
.append($loading.clone());
var $link = $(this).one('click', function() {
$dialog
.load($link.attr('href'))
.dialog({
title: $link.attr('title'),
resizable: true,
width:'auto'
});

$link.click(function() {
$dialog.dialog('open');
return false;
});

return false;
});
});
[/code]


AND... this is the hidden TD that gets visible when you click the "+" sign:

[code]

[/code]


AND that's the datatables script i am using:
[code]
/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += '';

sOut += '';
sOut += ''+aData[9]+'';
sOut += '';

sOut += '';
sOut += ''+aData[8]+'';
sOut += '';

sOut += '';
sOut += 'Add Contact: '+aData[10]+'';
sOut += '';

sOut += '';
return sOut;
}

$(document).ready(function() {
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#payment_table thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('#payment_table tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

/*
* Initialse DataTables, with no sorting on the 'details' column
*/

var oTable = $('#payment_table').dataTable( {
"bJQueryUI": true,
"sDom": 'T<"clear">lfrtip',
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']]
});
$('').insertBefore('#payment_table_info');

$('').insertBefore('#payment_table_length');

/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('#payment_table tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "includes/DataTables/examples/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "includes/DataTables/examples/examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
[/code]


[b]everywhere i have the .opener it works fine but only in the hidden TD it does not popup. i get a blank window with the content.[/b]

allan

I see - I'm not sure that DataTables is having a direct effect on the dialog then - since it's being done outside of DataTables. There are two things which spring to mind:

1. After you call fnOpen to show the hidden row (is that how it works? What makes the TD visible) - call the dialog options again.

2. If jQUery UI dialog has a 'live' option then that would be even better.

Allan

refaelb

Hi Allan,

I am frustrated. already spend a 1.5 days trying to figure this out.
I am a pioneer with basic knowledge. I would be happy to pay you for the investigation knowing you have my code above if you can. Please let me know as else i would just stop now because this came to be a nightmare.

allan

I'm afraid I don't understand, from the code above, how the display:none TD is being made visible when the plus sign is clicked on?

Visual Event ( http://sprymedia.co.uk/article/Visual+Event ) will show you what elements have events attached to them. I'm guessing that the hidden TD doesn't when it is made visible.

Allan

refaelb

Hi Allan,

Would it help if i copy or attached the complete page code?

allan

If you could just paste in a link to your page that would be useful. Or if you could show how the TD is made visible, that would be good as well. Did Visual Event show any event attached to the element when it is made visible?

Thanks,
Allan