Can multiple Editor instances on the same page coexist?

iain_mc

Apologies if I'm missing something obvious (quite possible).

Two dataTables have no problem co-existing but I can't get the Editor portions to do likewise. I have TableTools working fine on both, too.

They have no trouble initializing, but with code akin to the below I get the following issue. Table 1's New and Edit buttons work as advertised. If I click Table 2's Edit button I get "typeError: b is undefined", and its "New" button brings up the dialog for adding an entry to Table 1.

Any help appreciated!

Oh, and I have the latest versions of everything as of September 30th, I believe.

Thanks, Iain

[code]

var editor_1;
var editor_2;
var datatable_1;
var datatable_2;

$(document).ready(function()
{
editor_1 = new $.fn.dataTable.Editor( {
"domTable": "#table_1",
.... blah ....
});
editor_2 = new $.fn.dataTable.Editor( {
"domTable": "#table_2",
.... blah ....
});
datatable_1=$('#table_1').dataTable( {
.... blah ....
});
datatable_2=$('#table_2').dataTable( {
.... blah ....
});
}
[/code]

iain_mc

Answered my own query, as is often the case when I jump the gun. Sorry!

The answer, should anyone else find themselves in the same situation, is that there is a third element that needs the unique identifier, and this was at the foot of one of my "blah"s, above.

Resolved thus:

[code]
"aButtons": [
{ "sExtends": "editor_create", "editor": editor_2 },
{ "sExtends": "editor_edit", "editor": editor_2 },
"copy", "csv", "print"
]
[/code]

Cheers!

Iain

allan

HI Iain,

Thanks for posting back with your answer. This is absolutely right - as many Editor instances as you want can exists on a single page, but each much be addressed individually.

Allan

mschroeder55409

I've implemented 2 editor instances successfully as explained here, but I'm having trouble getting the i18n internationalization option to work on either of them. I've noticed that I have to include the exact same i18n code on both instances so that it works on just one of them (the "create" instance). I don't see any further documentation on this.

Any assistance would be greatly appreciated. Thanks! Mike

allan

Hi,

Are you able to give me a link to the page that you are working on, so I can see exactly what is happening?

Thanks,
Allan

mschroeder55409

I'm only local at this point. Does the code below help? The only way the custom text shows up on my create form is if I include the 'create' section on both Editor instances. The 'edit' section doesn't seem to do anything for my update form. I hope to post to a dev URL tomorrow and will forward the link when it's available. - Mike

[code]$(document).ready(function() {

var editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "DataTables/php/POST_itf_firesale_pricing_rules.php",
"domTable": "#firesale_pricing_edit",

"i18n": {
"create": {
"button": "Add Pricing Rule",
"title": "Add Pricing Rule",
"submit": "Add"
},
"edit": {
"button": "Edit Pricing Rule",
"title": "Edit Pricing Rule",
"submit": "Update"
}
},

"fields": [......

]
} );

var editor_update = new $.fn.dataTable.Editor( {
"ajaxUrl": "DataTables/php/POST_itf_firesale_pricing_rules.php",
"domTable": "#firesale_pricing_edit",

"i18n": {
"create": {
"button": "Add Pricing Rule",
"title": "Add Pricing Rule",
"submit": "Add"
},
"edit": {
"button": "Edit Pricing Rule",
"title": "Edit Pricing Rule",
"submit": "Update"
}
},

"fields": [......

]

} );

// Method action on Edit record link in DataTable

$('#firesale_pricing_edit').on('click', 'a.editor_edit', function (e) {
e.preventDefault();

editor_update.edit(
$(this).parents('tr')[0],
'Edit record',
{ "label": "Update", "fn": function () { editor_update.submit() } }
);
} );

// Method action on Delete record link in DataTable

$('#firesale_pricing_edit').on('click', 'a.editor_remove', function (e) {
e.preventDefault();

editor.message( "Are you sure you want to delete this pricing rule?" );
editor.remove(
$(this).parents('tr')[0],
'Delete row',
{
"label": "Delete",
"fn": function () {
editor.submit()
}
}
);
} );

var oTable = $('#firesale_pricing_edit').dataTable({

"sDom": "Trt",

"aoColumnDefs": [
{"aTargets": [0],"bVisible": false },
{"aTargets": [1],"bVisible": false },
{"aTargets": [2],"sClass": "center" },
{"aTargets": [4],"sClass": "center" },
{"aTargets": [5],"sClass": "center","mRender": function ( data, type, full ) {return "$" + data} },
{"aTargets": [6],"sClass": "center","sDefaultContent": null },
{"aTargets": [7],"sClass": "center","sDefaultContent": null,"mRender": function ( data, type, full ) {return "$" + data} },
{"aTargets": [8],"sClass": "center","sDefaultContent": null,"mRender": function ( data, type, full ) {return "$" + data} },
{"aTargets": [9],"bSortable": false,"mData": null,"sClass": "center","sDefaultContent": 'Edit'},
{"aTargets": [10],"bSortable": false,"mData": null,"sClass": "center","sDefaultContent": 'Delete'}

],

"oTableTools": {
"sRowSelect": "none",
"aButtons": [
{"sExtends": "editor_create","editor": editor, "sButtonText":"Add Pricing Rule"}
//{"sExtends": "editor_remove","editor": editor, "sButtonText":"Remove Pricing Rule"}
]
}
});

[/code]

allan

Yes, that's perfect thanks. I'm afraid you've hit upon a bug here. What you are looking to do, absolutely should be possible, but because Editor is sharing the TableTools buttons between the different instances the language is being written by whatever instance is initialised last.

I'm looking into a fix and will update here when I've got a suitable one (that does't break everything else!).

Allan

allan

I've come up with a way to address this, but it isn't a 100% complete fix just yet - a complete fix would require a small change to TableTools, but it is easy to workaround that to make this a complete solution until I update TableTools (will be done shortly).

Basically you need to find the block of code in Editor that starts with:

[code]
if ( window.TableTools ) {
var ttButtons = window.TableTools.BUTTONS;
...
}
[/code]

And replace it with the following:

[code]
if ( window.TableTools ) {
var ttButtons = window.TableTools.BUTTONS;

ttButtons.editor_create = $.extend( true, ttButtons.text, {
"sButtonText": null,
"editor": null,
"formTitle": null,
"formButtons": [
{ "label": null, "fn": function (e) { this.submit(); } }
],
"fnClick": function( button, config ) {
var editor = config.editor;
var i18nCreate = editor.i18n.create;

config.formButtons[0].label = i18nCreate.submit;
editor.create( i18nCreate.title, config.formButtons );
}
} );


ttButtons.editor_edit = $.extend( true, ttButtons.select_single, {
"sButtonText": null,
"editor": null,
"formTitle": null,
"formButtons": [
{ "label": null, "fn": function (e) { this.submit(); } }
],
"fnClick": function( button, config ) {
var selected = this.fnGetSelected();
if ( selected.length !== 1 ) {
return;
}

var editor = config.editor;
var i18nEdit = editor.i18n.edit;

config.formButtons[0].label = i18nEdit.submit;
editor.edit( selected[0], i18nEdit.title, config.formButtons );
}
} );


ttButtons.editor_remove = $.extend( true, ttButtons.select, {
"sButtonText": null,
"editor": null,
"formTitle": null,
"formButtons": [
{
"label": null,
"fn": function (e) {
// Executed in the Form instance's scope
var that = this;
this.submit( function ( json ) {
var tt = window.TableTools.fnGetInstance( $(that.s.domTable)[0] );
tt.fnSelectNone();
} );
}
}
],
"question": null,
"fnClick": function( button, config ) {
var rows = this.fnGetSelected();
if ( rows.length === 0 ) {
return;
}

var editor = config.editor;
var i18nRemove = editor.i18n.remove;
var question = i18nRemove.confirm === 'string' ?
i18nRemove.confirm :
i18nRemove.confirm[rows.length] ?
i18nRemove.confirm[rows.length] : i18nRemove.confirm._;

config.formButtons[0].label = i18nRemove.submit;

editor.message( question.replace( /%d/g, rows.length ) );
editor.remove( rows, i18nRemove.title, config.formButtons );
}
} );
}
[/code]

That will address the problem with the content of the form.

The reason it isn't a 100% fix however, is that this won't address the TableTools button text. If you want different text for the buttons use the `sButtonText` option in the object where you define your TableTools buttons, which actually you are already doing - so keep that there just now :-).

Let me know how you get on with it.

Regards,
Allan