Can't edit when DataTable in jQuery UI dialog

adambelshaw

I've noticed a pretty strange behaviour and was wondering if anyone else has had it, or knows any workarounds.

I have a datatable that is working perfectly when I navigate to it directly. If I try to open it in a jquery dialog it displays fine, I can inline edit fine, and the edit window shows up, but I can't enter text into any of the inputs, as if they were read-only.

I was wondering if it was something to do with z-indexing, as I had to mess around with that a bit to get it to show in front of the dialog.

I don't think it's particularly a DataTables problem, but I figured it seemed common enough that other people may have ran into it.

If it helps, here's where I open the dialog

$("#view-activities-dialog").load("/asset/activitiesgrid/activitiesinyeargrid/?year=" + year +
            "&id=" + selectedDSId, function () {
            $("#chartdiv").unblock();
            $("#view-activities-dialog").dialog({
                title: "@(Strings.ActivitiesInYear)",
                modal: true,
                draggable: false,
                resizable: false,
                height: 775,
                width: 1000,
                buttons: {
                    "OK": {
                        text: "OK",
                        click: function () {
                            $(this).html("").dialog("close");
                        }
                    }
                }
            });
        });

allan

Are you able to link to the page so we can take a look please?

Thanks,
Allan

adambelshaw

Unfortunately not, I couldn't get a demo on live.datatables.net because of the editor/jqueryui requirements.

I have a video of it here: http://youtu.be/BDxBQQecZFY?hd=1, and the debug page: http://debug.datatables.net/eroqiv

There are no javascript errors appearing in the console. Have you seen anything like this before?

allan

I'm sorry to say not. It could be z-indexing - the way to test that would be to right click on one of the input elements and select "Inspect element" - if the inspector shows the input element, then that isn't the issue. If it shows something over over the input, then there might be an element blocking the input - having seen the video I suspect this is unlikely.

I think more likely there is some event handler that is doing a preventDefault or is immediately grabbing focus. The way to test that is to fire up the developer tools in your browser and capture the CPU Profile (that's what Chrome calls it, others probably have something similar) and see what events (if any) are being triggered.

Sorry I don't really have a better answer without a test case.

Allan