Issue with datatable when within a JQ UI Dialog box.

Keith_H

I am using Datatables 1.10.15 with jQuery UI.

I have a strange problem which is only occurring on a page which has nested dialog boxes. (I'm not sure if it's the nesting or the fact it's a datatable within the dialog box).

The first dialog box opens and there is an option for the user to open a second dialog box. The second box has a datatable on it.

In the main Javascript for the page, the sequence of creating the objects is:
Tabs.
Dialog boxes.
Datatables.
(I've had issues before due to these being different).

// Open Dialog2 from Dialog1

$('#idDialog2').dialog('open');

fncFillTable();

-------------------------------

function fncTaskMaintReadOrderFill() {
    var locTable            = 'Table';
    var dTable          = $('#'+locTable).DataTable();
    var locId;

    dTable.clear().columns.adjust().search('').draw();
    
    // Code to read the json data
    
    for (var i = 0; i < pData.length; i++) {
        dTable.row.add([
             pData[i].Col1
            ,pData[i].Col2
        ]);
    }
    dTable.columns.adjust().draw(); 
}

The issue I get is that the 'search' field is trains the last value even though I've blanked it BUT it shows all of the rows. I.e the filter is not applied.

To make it even more confusing, I get different 'functionality' depending upon my next action.

If I do an ALT-TAB and change to another application and then back again, then the filter is applied.

BUT, if I click on a column header to sort the data, the filter is then cleared!!!!

If I issue a $.fn.DataTable.isDataTable('#Table'), it returns true.

I've tried various things, but this functionality works on all of my other datatables. The only difference I can think of is the datatable is within a dialog box.

Keith_H

In the code snippet above, the function should be called fncFillTable.

I simplified my code from other parts which aren't relevant and forgot to change that too.

Also, there is a typo: should say "the 'search' field retains "

colin

Hi @Keith_H ,

Yep, there's nothing obvious there, that certainly looks like it should be working. Would you be able to link to the page, or create a test case, and we can take a look?

Cheers,

Colin

Keith_H

Hi @colin

I've created http://live.datatables.net/viyixepo/1/edit

If you swap the order that the table search is populated and the dialog box opened, you will see the issue I get.

allan

Ah - that's a beauty that one!

The issue is that jQuery UI's dialogue box is giving focus to the first input element it finds in the box. The jQuery UI documentation says:

Upon opening a dialog, focus is automatically moved to the first item that matches the following:

There doesn't appear to be a way to disable that.

Due to the element being focused the browser won't write the value to the input.

The only way to workaround it that I can see is to blur the focus first:

    $('#idDiaTaskOrderLinesMaint').dialog('open');
    document.activeElement.blur();

    // ... Then DataTables stuff

http://live.datatables.net/viyixepo/3/edit

Allan

Keith_H

Thanks Alan. I thought I was being really dumb and missing something stupid

That worked fine.