Get value from field in Editor with button
Get value from field in Editor with button
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
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
This discussion has been closed.
Replies
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
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
$.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
editor2.hide( 'ing_fr' );
} );
dts1
What I'm saying is that your field type plug-in is currently incomplete.
Allan
dts1
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
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
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
> $('.bt_ing', editor2.node('bting'))
(note the `.` )
Also, since it is a static event, it must be run after your Editor initialisation.
Allan
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
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