Bootstrap 3 onOpen not working

phpkid

Hi

I downloaded the latest DataTables and Editor today. I setup the editor examples and they work fine. I particularly wanted to use the Bootstrap 3 integration.

I then came across a bug in the Bootstrap example.

If I add the code below to the "Basic Initialisation" example the Platform field has a value of 9999 when I edit a row (as expected). If I put the same code in the Bootstrap example it doesn't. However if I exit the form by clicking cancel and then reopen the edit form the value is set.

[code]
editor.on('onOpen', function(e) {
$('#DTE_Field_platform').val('99999');
});
[/code]

It appears as if the bootstrap form field is not refreshed after the value changes. Also, if I add an alert before I update the field (as below) it works as expected.


[code]
editor.on('onOpen', function(e) {
alert('alert');
$('#DTE_Field_platform').val('99999');
});
[/code]

I assume there is some kind of conflict here between Bootstrap and DataTables Editor but sadly I can't work out what. Can anyone help please?

Thanks in Advance

Alec

phpkid

I did some more investigation and came up with a work around. It seems that by putting a 150 millisecond delay makes it work as expected.

[code]
editor.on('onOpen', function(e) {
setTimeout(function() {
$('#DTE_Field_platform').val('99999');
}, 150);
});
[/code]

I have tested this repeatedly and it always works. However if I shorten the delay by a single millisecond to 149 it still fails and always fails.

I am not sure why the magic 150 millisecond delay works - but at least it is a workaround for now!

allan

Use the Editor API for setting values: `editor.set('platform', 99999);` in this case.

The reason your are needing to use a setTimeout when accessing the field directly is because of the animation in. The element isn't attached to the document initially, so jQuery finds no elements with the ID given.

Allan

phpkid

Thanks Alan. That will work for the set OK. But I also have to do other things onOpen e.g.

[code]$('.ui-datepicker-trigger').attr('src', '..../Editor124/media/images/calender.png');[/code]

because the calender.png file is not found when I use the date picker.

I suspect this 150ms problem (which is specific to the Bootstrap version) will confuse other DataTables Editor users in future.

Thanks again for developing this great tool Allan.

allan

You can use the `dateImage` option to set the path for the calendar icon so you don't need to muck around with setting the image source like that: https://editor.datatables.net/fields/#date

Allan

phpkid

Many Thanks Allan.