CODEWITHSUNDEEP
javascriptjqueryjquery-uidatatables
user1020203
user1020203

Reputation: 1

Problems with DataTables and jQuery Dialog Box

I'm having trouble getting a datatable (http://datatables.net/) to work in a simple jquery dialog box. When I click a button to open the box, you can see the datatable for about a second and then it immediately closes. Any thoughts would be extremely appreciative.

My function to launch the dialog box is shown below. Within it, the datatable is initialized.

function launchLocDialog(mydiv) {
    alert(mydiv);
    var oTable;
    var giRedraw = false;

    $(document).ready(function() {
        $("#table_id tbody").click(function(event) {
            $(oTable.fnSettings().aoData).each(function (){
                $(this.nTr).removeClass('row_selected');
            });

            $(event.target.parentNode).addClass('row_selected');
        });

        oTable = $('#table_id').dataTable( {
            "aaData": [ /* Reduced data set */
                [ "1", "02/22/12"],
                [ "2", "02/22/12"],
                [ "3", "02/22/12"],
                [ "4", "02/22/12"],
                [ "5", "02/22/12"],
                [ "6", "02/22/12"], 
                [ "7", "02/22/12"],
                [ "8", "02/22/12"],
                [ "9", "02/22/12"],
                [ "10", "02/22/12"],
                [ "11", "02/22/12"],
                [ "12", "02/22/12"],
            ],
            "aoColumns": [
                { "sTitle": "Number" },
                { "sTitle": "Date Start" }
            ]
        });  

        oTable.$('td').click( function () {
            //var anSelected = fnGetSelected(oTable);
            var sData = oTable.fnGetData(0,0);
            //alert( 'The cell clicked on had the value of '+sData );
            alert(sData);

            //$.post('intsum.php', {intsumID: sData});

            // window.location = "intsum.php";
        });

    });

    $( "#dialog:ui-dialog" ).dialog( "destroy" );

    $( "#dialog" ).dialog({
        modal: true,
        buttons: {
            Ok: function() {
                $( this ).dialog( "close" );
            }
        }
    });
}

Upvotes: 0

Views: 2303

Answers (1)

Greg Pettit
Greg Pettit

Reputation: 10830

Just looking into setting up some tests for this, but off the top of my head... you have a document ready function inside your named function. I haven't been able to test the full implications of that, but it's not generally the done thing.

Using document ready to fire functions that need to wait for the DOM to be scriptable is exactly what's needed to set up your oTable; however, I think nesting it inside a named function that gets invoked (at some point... that part of the code isn't visible in the sample) seems like it would have unexpected consequences.

Update:

There were a few quirks to the code that I tried to straighten out a little (some extra braces here and there, misplaced commas, but most of that is likely due to trying to provide a brief example) but mostly it comes down to timing.

With the code timing more or less as above, the table would not appear. Of course, you would have to invoke "launchLocDialog()" to even have a hope, but I don't think that was it, either (that was probably just missing from the sample). In any event, strip out that wrapping function and put everything into a window.onLoad or a document ready function and the table itself seems to work:

http://live.datatables.net/exinum/4/edit#preview

You don't see the document ready function in the code because JSBin runs its code at window onLoad, so it was redundant. In your code, you'd use one or the other of those.

So, the question becomes:

What is the expected behaviour? Is the table meant to appear inside the dialog? Where is the event bound to pop the dialog? In the original launchLocDialog function, you seem able to pass "myDiv" but I'm not sure what role that was meant to play since it's not referenced later.

Upvotes: 1

Related Questions