DataTables TableTools and jquery UI Dialog

mdiessner

Hi Alan,

I am using DT with jquery UI Dialog (http://jqueryui.com/dialog/).

Found those two links:
===============
http://datatables.net/forums/discussion/9480/tabletools-export-buttons-do-nothing-in-ie-or-chrome-in-jquery-ui-modal-updated-fixed/p1
http://datatables.net/forums/discussion/10211/altering-tabletools-copy-to-use-jquery-ui-dialog/p1

Tried both but not working - the EXCEL not doing anything at all and the COPY copies some junk characters.

Here is the code:

[code]
$('').load('http://datatables.net/release-datatables/extras/TableTools/index.html',
).dialog({
modal: true,
zIndex: 1,
height: 700,
width: '700',
title: 'test'
}); //End Modal
[/code]

Any ideas? Have there been further updates?
Thx
Martin

mdiessner

Hi Allan - did you get a minute to look into this? If its not possible to find the mistake (in either jQuery or DT) then I can just quickly write my own Excel export using phpExcel. Just don't want to waste time if you/someone else know what the problem is - as there obviously is a bug somewhere.
Thx
Martin

allan

Hi,

Sorry - I clean missed this when you posted it! Thanks for bumping it.

Are you able to link me to the page that you are working on with this? Loading from datatables.net is blocked by the browser security options, and even if I disable those security measures, a raft of 404 errors occur because include paths are wrong.

I've just tried putting your code into local file and changing the path to be local, and it appears to work as expected:

[code]
$('').load('index.html')
.dialog({
modal: true,
zIndex: 1,
height: 700,
width: '700',
title: 'test'
});
[/code]

So if you are able to link me to a test case, that would be very useful.

Thanks,
Allan

mdiessner

Hi Allan,
Thanks for your response - I will need to do a proper test case for this. It's strange - when I call the modal dialog first the save as Excel is working, if I close and then open again its not working. The message for copying records to clipboard is not coming up at all.
I am on holidays for a week so will sort out jsfiddle when back.
thx
Martin

allan

Does this happen in all browsers, or just IE perhaps? If just IE, and the modal is actually being removed from the document, I suspect it might be that the Javascript / AS3 bridge events are being lost. I had thought I had that resolved though, but possibly not...

The other thing is, when the dialogue is shown, can you right click and select "Inspect element" on the buttons? If not then that's actually good as it means the Flash element is in place, if you can, then the Flash element isn't in the correct place or not correctly sized.

Regards,
Allan

mdiessner

HI Allen,

I am on Mac & Safari. Never heard of IE before ;-)

Flash is in place first time the modal is opened. When closed (Escape) and then opened again, can't right mouse click at all, but no JS errors.

The system is so complex it will take me time to create a proper jsfiddle.

Here is the code for the modal without any modification - not sure if this helps.

It's not urgent, can do my own PHPEXcel download in the mean time.

[code]
//Make certain numbers clickable to open up modal form with GL records and Excel export function
$('.ec_rep_link_gl').click(function() {
if($(this).html().length>0) {
//determine which account and which period to open
$account_id = $(this).closest('tr').attr('id');
$period = $("#col-"+$(this).attr('col')).attr('period');

//modal form to show list of GL entries
$('').load('/wp-admin/admin.php?page=list_coa&todo=viewGlEntries',
{
'account_id': $account_id,
'period': $period,
'filter1': <?php echo $filter1; ?>,
'filter2': '<?php echo $filter2; ?>'
}).dialog({
modal: true,
zIndex: 1,
height: 700,
width: '80%',
title: 'View General Ledger Entries',
close: function(e, i) {
//At closing of modal destroy data table and the modal as well
var oTable = $('#table_gl').dataTable();
oTable.fnDestroy();
$(this).dialog('destroy').remove();
}
}); //End Modal
}//end check for zero value
}); //End click
[/code]

Thanks
Martin

TonyD

Was this resolved at all? I'm having this same issue, with the 'Export' table tool working on the first instance of opening the modal, but if I close and reopen, the button won't work.

The first time I open it, I can right click the button and I see 'Global Settings' as an option, but the second time opening I can't right click the button.

This is my modal creation:

[code]
$('.scan-data-chart-details').click(function () {
var detailsDialog2 = $('#scan-chart-details').dialog({
modal: true,
width: 625,
zIndex: 1,
height: 395

});

var scanTable = $(config.selectors.$scanChartData);
if (scanTable.length > 0) {
var tableTools2 = TableTools.fnGetInstance(scanTable[0]);
if (tableTools2 != null) {
tableTools2.fnResizeButtons();
}
}

return false;
});
[/code]

Any help?

Thanks,
Tony

allan

Hi Tony,

I can't actually remember properly, but I think the issue was resolved with an upgrade to TableTools 2.1.5. Which version are you using? Would be great if you could link to a test case.

Allan