DataTables not calling editor.on API functions for editor.create, editor.edit, editor.remove

carlg

Hi,

I can't figure out why the Editor API functions aren't being used for my form. I'm using editor.add to populate the form with all the fields, and that works fine. Please see this jsfiddle to check my code.

http://jsfiddle.net/m5ySp/1/

Thanks for any help!

-Carl

carlg

I've gotten the JSfiddle to work properly now and display my issue. I am sure I am just going about this wrong but I can't figure out what I should be doing differently. If it were creating the form as I am expecting the header and submit buttons would have different text, and that's basically all I'm looking for right now before I move on.

I'm also wondering how I could go about styling the envelope control to fit the Bootstrap look and feel.

http://jsfiddle.net/m5ySp/2/

Thanks!

-Carl

allan

Hi Carl,

It looks like you are attempting to attach the event handlers to the TableTools buttons before the buttons have been created - and although your use of `on` in the way you have does basically allow for that, the way it is used here won't work since the selector item hasn't yet been created (which is needed) - additionally the selector element and the filter in the `on` second parameter are the same element.

I'd suggest making it easy on your self and using the options in TableTools :-). You don't need to use the `editor_create` button - that's just there for ease of use so you don't need to define your own TableTools buttons in the majority of cases. However, if you do want to, then it can easily be done like this:

[code]
{
"sExtends": "text",
"sButtonText": "New",
"fnClick": function ( button, config ) {
editor.create(
'Create New User',
{
"label": "Add New User",
"className": "btn btn-primary",
"fn": function () {
editor.submit()
}
}
);
}
},
[/code]

I've updated your 'New' button here (but not the edit and delete buttons):
http://jsfiddle.net/m5ySp/3/

Regards,
Allan

carlg

Thanks Allan, that all makes sense. When I implement the change to the edit and delete buttons also, it removes their logic regarding the row selection, ie adding/removing disabled class on row selects.

Also when I try to 'edit' it gives an error regarding the fields in the form being undefined.

http://jsfiddle.net/m5ySp/5/

Should I be using the parameters you defined on the click function to somehow configure each of these clicks to do something more? http://datatables.net/extras/tabletools/button_options

carlg

I fixed the first issue by changing sExtends: properties from "text" to editor_create, editor_edit, editor_remove

[quote]allan said: I'd suggest making it easy on your self and using the options in TableTools :-). You don't need to use the editor_create button - that's just there for ease of use so you don't need to define your own TableTools buttons in the majority of cases. However, if you do want to, then it can easily be done like this:
[/quote]

I think I'm confused about TableTools and Editor, and which does what. I like all the functionality that the default Editor buttons provide and they work as expected now that I added that line back in. I just don't know what is going on with the form that is being generated now.

Now when I try to edit a row it says editor.js is looking for an "id" property that is undefined.

allan

Let's step back a moment - what buttons do you want TableTools to show? Just the Editor buttons? In which case, don't override the buttons with your own API calls, there is no benefit to that (unless you want to do something very specific?).

Allan

carlg

Yes, the only buttons I want are New, Edit, Delete. No downloads or anything else. I'm really only using TableTools for the row selecting feature. And I wasn't sure if I also needed it in order to use the Editor buttons at all.

carlg

And I don't think I'm doing anything specific, per se. I'm just adding new users into a database via a JavaScript array, or editing them, or deleting the database record (and table row(s)). This insert/update process is working via this chunk of code

[code]
// Client-side validation using onPreSubmit
editor.on( 'onPreSubmit', function (e, data) {
valFormUser(data);

if (valFormUser(data)) {
dataproxy.insertUser('', ''
,data.data.user_name
,data.data.password
,data.data.hint
,data.data.user_type
,data.data.parent_id
,data.data.group_id
,data.data.name
,data.data.company
,data.data.email
,data.data.phone
,data.data.fax
,data.data.addr1
,data.data.addr2
,data.data.city
,data.data.state
,data.data.zip
,data.data.country
);
}
} );
[/code]

allan

Okay - so why not just use the standard TableTools buttons for Editor:

[code]
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
[/code]

What did you want to achieve beyond the default form?

Allan

carlg

I just want to edit the form header and submit buttons, as well as the envelope display controller itself. The reason I don't use the standard TT buttons is because they didn't give me any control over this stuff.

I originally was experimenting with using callback functions in "events" as well as their API equivalents for error handling when a form is submitting. I figured I would need a different one for each submit (create, edit, remove). I have read all the examples and lots of forum discussions but I have difficulty understanding how I need to architect this.

I'm interested in an hour of paid support depending on how soon you could be available. I'm using this on several applications and need to make up for some lost time. If you could let me know what an approximate timeframe could be for that I'd appreciate it.

Thanks!

-Carl

allan

> I just want to edit the form header and submit buttons, as well as the envelope display controller itself.

Ah okay - just use the internationalisation options then :-). You'll find that much easier: http://editor.datatables.net/options/#button . Example: http://editor.datatables.net/release/DataTables/extras/Editor/examples/i18n.html (French, but just changing the strings is the same principle).

Allan

carlg

Thanks for the tip, that provided most of the functionality I was looking for. I'd glanced over that before but didn't think of just using it for that.