Get value from field in Editor with button

dts1

Hi,
I have create in editor 1 button with this :
$.fn.DataTable.Editor.fieldTypes.bt_ing = $.extend( true, {}, $.fn.DataTable.Editor.models.fieldType, {
"create": function ( conf ) {

// Create the elements to use for the input
conf._input = $(
''+
''+
'')[0];

$('#btnAdd', conf._input).click( function () {
var idfam = $('select', editor.node('iding')).val();
alert(idfam);
} );
return conf._input;
}
} );
It function and show well the button when I create or edit. But I want to get a value when I click but nothing !
In console.log, it says that 'editor' is not defined...
Is it possible to get a value from a field with specific field type ? How ?

Thanks.
dts1

allan

The variable `editor` typically would refer to a single instance, so that method wouldn't work with more than one form, even if you made the variable global.

What you want to do is use your own plug-in value method to get the value for the current configuration. For example:

[code]
var val = $.fn.DataTable.Editor.fieldTypes.bt_ing.get( conf );
[/code]

Allan

dts1

Thanks Allan,
in fact, with this button I want to take the value from a field of the form, this field name is iding and is like this :
$(document).ready(function() {
var editor2 = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/table.intra_produit_composition.php",
"domTable": "#intra_produit_composition",
"fields": [
{
"label": "Ingrédient",
"name": "iding", // value are from php/mysql database
"type": "select"
},
{
"label": "",
"name": "bt_ing",
"type": "bt_ing", // Using the custom field type
"default": 0
}
]
} );

dts1

allan

What does the code for your full field plug-in type look like?

Allan

dts1

(function($){

$.fn.DataTable.Editor.fieldTypes.bt_ing = $.extend( true, {}, $.fn.DataTable.Editor.models.fieldType, {
"create": function ( conf ) {
var that = this;

// Create the elements to use for the input
conf._input = $(
''+
''+
'')[0];

$('#btnEdit', conf._input).click( function () {
var idfam = $('select', editor2.node('iding')).val();
editor2.show( 'ing_fr' );
console.log(idfam);
} );
return conf._input;
}
} );


$(document).ready(function() {
var editor2 = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/table.intra_produit_composition.php",
"domTable": "#intra_produit_composition",
"fields": [
{
"label": "idprod",
"name": "idprod",
"type": "hidden",
"default": "<?php echo $idprod; ?>"
},
{
"label": "Ingrédient",
"name": "iding",
"type": "select"
},
{
"label": "",
"name": "bt_ing",
"type": "bt_ing", // Using the custom field type
"default": 0
},
{
"label": "Nouvel Ingrédient",
"name": "ing_fr",
"type": "text"
},
{
"label": "Texte sup.",
"name": "divers",
"type": "text"
},
{
"label": "Valeur",
"name": "valeur",
"type": "text",
"default": "0"
},
{
"label": "Unité",
"name": "idunite",
"type": "select"
},
{
"label": "Adjuvant",
"name": "idadj",
"type": "select"
},
{
"label": "AJR France",
"name": "ajr_fr",
"type": "text",
"default": "0"
},
{
"label": "AJR Belge",
"name": "ajr_be",
"type": "text",
"default": "0"
}

],
"i18n": {
"create": {
"button": "Nouveau",
"title": "Créer nouvelle entrée",
"submit": "Créer"
},
"edit": {
"button": "Modifier",
"title": "Modifier entrée",
"submit": "Actualiser"
},
"remove": {
"button": "Supprimer",
"title": "Supprimer",
"submit": "Supprimer",
"confirm": {
"_": "Etes-vous sûr de vouloir supprimer %d lignes?",
"1": "Etes-vous sûr de vouloir supprimer 1 ligne?"
}
},
"error": {
"system": "Une erreur s’est produite, contactez l’administrateur système"
}
}
} );

Is this what you want Allan ?

dts1

allan

Your field type plug-in doesn't have `get` and `set` methods - so it can't get and set a value for the field at all: https://editor.datatables.net/tutorials/field_types .

Allan

dts1

ok, but if I simply want that the button btnEdit show the field ing_fr ? In fact, I want that when I edit a line, I can chose an object from a select or if I want a new object (not present in the select), I click on btnEdit and it shows the field ing_fr (hide with the editor2.on( 'onInitEdit', function () {
editor2.hide( 'ing_fr' );
} );

dts1

allan

Do you mean editing individual fields, like shown here: https://editor.datatables.net/tutorials/keytable ?

What I'm saying is that your field type plug-in is currently incomplete.

Allan

dts1

No, when I add or edit a table, I want that if I click on a button in the form (not before), it shows a hidden field and put in that field the value of a select field in case of edit.

dts1

dts1

Ok, I have found how to add a field on click on custom button, but now how to take the value of a select that is in the editor with a custom button in editor too ?

Exemple : in editor, when I click on btnEdit, I want to alert what I have selected in field select iding.
Possible ??

$.fn.DataTable.Editor.fieldTypes.bt_ing = $.extend( true, {}, $.fn.DataTable.Editor.models.fieldType, {
"create": function ( conf ) {
var that = this;

// Create the elements to use for the input
conf._input = $(
''+
''+
'');

$('#btnEdit', conf._input).click( function () {
value_selected = $('select[name=iding]').val();
alert(value_selected);
});

return conf._input;
}
} );

$(document).ready(function() {
var editor2 = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/table.intra_produit_composition.php",
"domTable": "#intra_produit_composition",
"fields": [
{
"label": "Ingrédient",
"name": "iding",
"type": "select",
"ipOpts": [
{ "label": "1 (highest)", "value": "1" },
{ "label": "2", "value": "2" },
{ "label": "3", "value": "3" },
{ "label": "4", "value": "4" },
{ "label": "5 (lowest)", "value": "5" }
]
}
]
} );

Thanks,
dts1

allan

> I want to alert what I have selected in field select iding. Possible ??

Certainly - use: `editor.get( '{field-name}' );` .

However, are you saying you want to do it inside the field type plug-in? The field type plug-in doesn't know anything about the other fields - they have to be independent. If you want some kind of combinational logic between them, you need to do that where you initialise Editor, using the API.

Allan

dts1

Yes Allan, I want to do this inside the field plug-in. How to make combinational logic between them ? How to call button click of this special field in editor ? I have tried :
in the $(document).ready(function() {
$('bt_ing', editor2.node('bting')).click( function () {
console.log('test retour click bt_ing');
} );
};
but nothing in the console.

Thanks,
dts1

allan

Your code there looks almost correct to me, but the jQuery selector is looking for a tag witht he name `bt_ing` which won't exist. Do you want a class selector there?

> $('.bt_ing', editor2.node('bting'))

(note the `.` )

Also, since it is a static event, it must be run after your Editor initialisation.

Allan

dts1

Ok, but it return nothing...
here is the full code :

[code]
var editor2 = $.fn.DataTable.Editor;
editor2.fieldTypes.bt_ing = $.extend( true, {}, editor2.models.fieldType, {
"create": function ( conf ) {

// Create the elements to use for the input
conf._input = $(
''+
''+
''+
'');


$('#btnSave', conf._input).click( function () {
$('#ing_fr', conf._input).hide();
$('#btnSave', conf._input).hide();
value_ing = $('#ing_fr',conf._input ).val(); // Value I want to return in select iding

/*Enregistrement du fichier*/
var link = "php/_ing_save.php";
$.ajax({
url: link,
type: "POST",
async: false,
data : 'ing='+value_ing,
dataType: 'html',
success: console.log(value_ing)
});
/*Fin enregistrement*/
});
return conf._input;
}
} );
[/code]

With this, when I click on btnSave, I save my new ingredient in the database.

[code]
$(document).ready(function() {
var editor2 = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/table.intra_produit_composition.php",
"domTable": "#intra_produit_composition",
"fields": [
{
"label": "Ingrédient",
"name": "iding",
"type": "select"
},
{
"label": "",
"name": "bting",
"type": "bt_ing", // Using the custom field type
"default": 0
}...
}

$('.bt_ing', editor2.node('bting')).click( function () {
console.log(value_ing); // show the value type use field id ing_fr on custom field type
} );
[/code]

It gives me nothing...

dts1

allan

OKay - thank you for posting your code.

There isn't a `.bt_ing` class which is why it isn't working. I'm not exactly sure what you are trying to do with the code, but to get a click to occur on the first input element you would use:

[code]
$('input:eq(0)', editor2.node('bting')).click( function
[/code]

The key thing to remember is that the `node()` method will return the Javascript node which contains the HTML that your plug-in creates. So you can use it in exactly the say way as you would do any other jQuery selector.

Allan

dts1

Perfect, it works !! Thanks a lot Allan !