Question

This is probably a hard question to answer, considering it’s very hard to demonstrate the problem¹.

I am using datatables + datatables jEditable, but I have completely altered (and improved) the code so that when a user double clicks a row in the table, a jQuery UI dialog box with a form opens where you can edit the row. It utilizes one form to do two tasks, namely, add & edit.

This is all fine and dandy in all browsers, except, you guessed it: IE.
And I swear, this is by far the strangest behavior by IE I have ever seen.

When you double click a row, the dialog box doesn’t show up, but then, when you open up the dev tools (F12), it suddenly works.

To clarify

1. User opens Internet Explorer (in this case IE9, but it also happens on earlier ones)
2. User navigates intranet
3. User double-click datatable row. Nothing happens.
4. User opens dev tools (F12) and closes it
5. User double-click datatable row. Dialog opens.
6. User closes tab and reopens and navigate there once more. Everything works.
7. User closes internet explorer
8. Repeat steps 1 through 8

It’s annoying that I can’t debug the problem because it goes away as soon as I open the debugger…!

I originally thought that the issue was because intranet sites on IE are by default opened in compatibility view, so I changed that setting in the hopes it would resolve the issue.
It did not.

Also, once the dev tools are opened, and I refresh the page, there are no errors or any signs of faulty code.

So…
What up wit dat?

_{¹The code is fairly complex and I don’t know if I could simplify it enough and make a demonstration. This is done on an intranet, and the data used is classified, so I’m not allowed/can’t directly show you either.}

Answer 1

This may not be the cause of your troubles. but I’ve seen similar behavior from IE before. The culprit was a stray console.log in the code. In IE window.console does not exist until the dev tools have been opened, and continues to exist on the window after dev tools have closed. If you have a stray console.log in your code, it could be blocking the dialog from opening as console is undefined, then beginning the moment you try to debug it.

If you want to test this possibility but don’t want to hunt down the stray, just add the below to the top of your document:

if (!window.console) {
  this.console = {
    log: $.noop
  };
}