Help - Datatables and jQuery UI Modal example

Thebecoming

Does any one have a working example of Datatables and opening a jQuery UI Dialog Modal from within the table? Like adding an edit button/link on each row (not with jquery or datatables but in JSON). Or View more info button/link that will open up a modal?

For some reason I can't get it to work.

I'm using jQuery 1.4, UI 1.8, DataTables 1.6.2. I'm calling my info with Server side processing and I know I need to use fnInitComplete. But no matter what my code is, any thing inside the datatables won't work. I can't even style buttons.

But every thing outside the datatables works. So if I have a button that is outside datatables that opens a modal, it works. But that same button inside the datatables won't open the modal.

Here is my code.

[code]

$(function(){
$('#example').dataTable({
"sAjaxSource": 'includes/updater_company_manage.cfm',
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"aoColumns": ["ID",{ "sSortDataType": "dom-text" },"Address","City","State","Zip Code","Phone Number","users","Registration","Approved"],
"sPaginationType": "full_numbers",

"fnInitComplete": function() {
var $loading = $('loading...');
$('#dialog_box button').each(function() {
var $dialog = $('')
.append($loading.clone());
var $link = $(this).one('click', function() {
$dialog
.load($link.attr('name'))
.dialog({
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});

return false;
});
});
}


} );
});

[/code]


Here's my button code to open the modal in my JSON

[code]
#companyname#
[/code]

My code for opening a modal isn't the basic code, it grabs the value of the name attribute (or what I tell it to) and opens that. I've tried the basic code in many forms that just opens what's in a DIV tag on the page and even that doesn't work.

It just seems like I'm missing some thing. Any help and I would be very grateful.

allan

Try changing fnInitComplete for fnDrawCallback. What happens when you have server-side processing enabled is that DataTables destroys the old rows and creates new ones on each draw - hence your old events are lost. Visual Event is a useful tool for confirming what elements have what events on them: http://www.sprymedia.co.uk/article/Visual+Event

Regards,
Allan

Thebecoming

I tried fnDrawCallback. The modal works, but only for the first modal link clicked. If I click on any other modal links nothing works.

I'll check out Visual+Event.

thbenda

Hello,

Interesting thing.
In fact doing a table re-draw is able to resolve any problem you could encounter here.

The solution provided by allan was worked for me with jquery v1.4.2, jquery-ui v1.8.2, and other stuffs like Malsup blockUI plugin.

Maybe you are destroying your jquery-ui Dialog inside your prototype definition - so it doesn't appear anymore because you have called the dialog.destroy() method on it.

Cheers.

Hernondo

For what it's worth, I have a jquery modal working within a Jquery UI themed DataTable.

It's not so much the datatables config as much as it's loading the scripts in the proper order in the head. My jquery-ui.js is loading after my datatables.js file.