Browser Issue for On-click

pamulapati

Hi,

On our Enterprise application we are facing a issue on IE.11, we are using data-table inline-editor for tables in that we are using on click event, after submit of edited fields we are facing this issue.

Usage:
when user clicks on outside of the table after editing the exiting fields in table.

Current Behavior: In our table we are using date picker(type : 'datetime') for our requirement, In IE browser after updating the exciting date to new date then click out side and trying to update another field its not working, its completely freezes the section until we click out side one more time.

Expected Behavior: we are expecting on first-click it should work as normal, its should not freeze

"keys" : {
"columns" : ".inlineEditable",
"keys" : [ 9 ], // 9 = tab
"editor" : _taskEditor,
"editOnFocus" : true
},

inline : {
onBlur : 'submit'
}

Please give us suggestion on this, Thanks

Greetings,

Pranesh Pamulapati

allan

Hi Pranesh,

Could you give me a link to a page showing the issue so I can debug it please? I've not heard of that specific issue before.

It sounds like there might be a Javascript error occurring on the page. If you have a look at the console in IE11 does it show any errors?

Allan

pamulapati

Hi Allan,

Thanks for responding, I'm unable share my link to outside of my company, what I can do is I can share my Java script file. Please let me know is that works for you to check.

Thanks
Pranesh Pamulapati

tangerine

It sounds like there might be a Javascript error occurring on the page. If you have a look at the console in IE11 does it show any errors?

pamulapati

Hi Tangerine,

Thanks for responding, I don't see any error on console. Its happening only on IE like this. we are using preSubmit, postEdit, preOpen its not going into any where.

colin

Hi @pamulapati ,

If you're unable to share the page, would you be able to create a simplified test case that also demonstrate the problem? Without it, it'ls hard to diagnose, since as Allan said, this isn't a known issue and is likely to be caused by something in your environment.

Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

pamulapati

@colin @allan

I'm sharing my java script file. Please take a look on that.

Thanks
Pranesh

allan

There isn't anything obvious that I can see that would cause the error there. Could you use JSFiddle, CodePen or http://live.datatables.net to create a test case showing the issue so we can debug it, if you aren't able to share a link to a page showing the issue.

Allan

pamulapati

Hi Allan,

We created a test case for that scenario, while running the Js file, we are getting console errors. we are unable to replicate those errors. Please give us some suggestions on that. I'm sharing the link please go through it.

http://live.datatables.net/diyariwa/1/edit?html,css,js,console,output.

Thanks
Pranesh

allan

Hi Pranesh,

You just need to reorder the Javascript includes: http://live.datatables.net/diyariwa/3/edit .

It looks like it needs MomentJS as well, and I'm not sure if that would then show the issue you are seeing or not.

Allan

pamulapati

Hi Allan,

we added momentJS and fixed the exiting errors. we are using both editor and key-table because of that. Now, while selecting a editable field we are getting a script error. Please take a look on that.
http://live.datatables.net/diyariwa/5/edit?html,css,js,console,output

Thanks
Pranesh

allan

Hi Pranesh,

In the browser's console it is throwing an error:

Uncaught Unable to find row identifier For more information, please refer to https://datatables.net/tn/14

There is no id for the row's or you need to use idSrc to tell it where to fine the id.

Allan

pamulapati

Hi Allan,

In my application we are using key table for inline editing when we are going to use same in data table live, but its not working, so we are using the below code for inline editing,it is working,

//This has been added as key table is not working
  $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        exampleEditor.inline( this );
    } );

but in my application we are using key table for inline editing code below:

"keys" : {
                "columns" : ".inlineEditable",
                "keys" : [ 9 ], // 9 = tab
                "editor" : exampleEditor,
                "editOnFocus" : true
            },

I want suggestion for key table should work in my example version

I'm sharing the latest code to check you once. Please take a look and give us some suggestions for key table.
http://live.datatables.net/diyariwa/11/edit

Thanks
Pranesh

allan

I'm a little confused I'm afraid. I'm not 100% clear on what you are trying to do. You say you want to use KeyTable, but do you not want to use arrow keys, just the tab key?

If you use KeyTable 2.5.0 (the current release), it appears to work as expected: http://live.datatables.net/diyariwa/13/edit .

Allan

pamulapati

Hi Allan,

Thanks for updating key table version, Now I'm able to replicate the issue in IE browser. Please follow this steps to replicate it.

• Run this code in IE 11 or greater version.
• Select Date2 field try to update it to any date after selecting that click out side of the table for one time.
• Then try to edit any field in that table. Don't try to edit same field.
• One more interesting thing here, if we click multiples times outside of the table it will work.
• This issue will happens only if we click one time.
  Please go through this updated link @allan
  http://live.datatables.net/diyariwa/14/edit

Thanks
Pranesh Pamulapati

pamulapati

Hi Allan,

Is there any update on this issue.

Thanks

allan

Sorry for the delay. I've been trying to figure out what is going on, and not having much success! It doesn't need to be a date field that you start editing on, any of them will do - then click outside and then click to edit a different field and it doesn't work in IE11.

The problem is that it isn't even entering into KeyTables' click event handler. The click simply isn't getting anywhere. Given that it works in all other browsers, this feels very much like an IE bug.

It appears to be this line that is causing the issue. As far as I can figure out, IE is seeing that as preventing further click events from happening on that cell (i.e. like a return false;).

If you add blurable: false to your keys object, that will workaround the problem.

Allan

pamulapati

Thanks Allan, The issue got resolved, we appreciate your efforts.