In table form controls

Karl53 · March 2015

Editor 1.4.0

Using the example here:

2 issues/questions.

(2) For all columns, I'm using inline editing. The last column the user will click on the link to open the Bootstrap 3.x modal. When clicking on the link in the cell I get the error:

'Unable to automatically determine field from source. Please specify the field name' "Unable to automatically determine field from source. Please specify the field name"

(Above is raised in dataTable.editor.js at about line 4884.)

I assume I'm not initializing something correctly. This is column's definition object:

{"data": null, defaultContent: '<a href="" class="show_options">Options</a>'}

Normally, of course, the data attribute would not be null but rather it should be initialized to the name of the source field being edited. But per this use case and example, it is suppose to be null though the error message raised seems to contradict this.

What am I missing?

(2) As mentioned, the above link opens a Bootstrap 3.2 modal. If the user clicks the close button, no problem. If the user clicks outside the modal which can also close it (depending on the options set), I get this error:

"Unable to get property 'close' of undefined or null reference"

It is raised in editor.bootstrap.js around line 81.

        $(document).on('click', 'div.modal-backdrop', function () {
            self._dte.close('background');
        } );

It is the attribute _dte that is null.

Since I'm using the Bootstrap modal and not the Datatable Editor, I'm wondering why this editor code is being called. Should it be? Should the code be checking for _dte being null?

Or again, have I missed initializing something?

Thanks for any help.

Edit: I notice with item #1, that I do not need to click on the link within the cell. To raise the error, click within the cell while avoiding the link.

Also, inline submit onblur is being used.

allan · March 2015

1) Sounds like you might be triggered the inline() method on the last cell in the row as well - is that the case?

2) _dte should not be null. That code is required because Editor needs to know if Bootstrap has closed the background (this is one method for doing it).

Interestingly in my demo that code isn't actually triggered as the model is on top of it. Are you able to link me to your page so I can try it?

Allan

Karl53 · March 2015

Hi Allan,

Thank you for the quick reply. Did some more (accidental :-) testing. Please see example posted here:

test code

I thought I was blocking the inline method. In js\date_picker_example.js, please see the code starting at line 284.

//Unable to automatically determine field from source. Please specify the field name
//          if (this.className !== 'options') {
    if (this.className !== ' options') {
        editor.inline(this,  {submitOnBlur: true});
    }

And the column definition at line 162.

{"data": null, className: "options", defaultContent: '<a href="" class="show_options">Options</a>'}

Notice that the assigned class name ends up with a preappended space. When I added the space in the if test then problem #1 was fixed. But how does className end up with this extra space?

Click on options, to open the Bootstrap modal. Click on the background to close. This will raise the error message that I mentioned.

This is what I discovered. The error goes away if I eliminate this entry at line 289 in index.htm.

<script type="text/javascript" src="js/bootstrap.min.js"></script>

Interesting that the modal works fine without including the above, except for the opaque styling of the background not being present.

Perhaps I'm not loading the JavaScript files in the correct order?

Thanks,
Karl

allan · March 2015

1) I would suggest always using $().hasClass() to check if an element has a particular class ($(this).hasClass('options')) in this case. That allows the the fact that an element can have multiple classes, and white space such as in this case. The while space comes from an optimisation that DataTables makes when adding classes to cells - rather than checking if there is a class or not (which slows things down) it always just adds a space and then the class name as that is harmless (if $().hasClass() is used!).

2) Got it now (thanks for your e-mail!). I've just replied back, but for anyone else reading this I hadn't quite realised that it was a non-Editor model that was causing the issue. The fix will be available in Editor 1.4.1 which will be released soon - likely next week.

Regards,
Allan

In table form controls

In table form controls

Answers

Howdy, Stranger!

Categories

DataTables

In table form controls

In table form controls

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables