The Save and Cancel Buttons do not appear any more!
The Save and Cancel Buttons do not appear any more!
AlexDTables
Posts: 19Questions: 3Answers: 0
in Buttons
I'm codign just as explained in https://editor.datatables.net/reference/api/buttons()
editor
.title( 'Create new row' )
.buttons( [
'Save',
{ label: 'Cancel', fn: function () { this.close(); } }
] )
.create();
But Save and Cancel Buttons do not appear any more.! Where is the conflict???
(function($){
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
ajax: 'php/table.contactos.php',
table: '#contactos',
fields: [
{
"label": "Nombre:",
"name": "contactos.nombre"
},
{
"label": "Telefono fijo:",
"name": "contactos.telefono_fijo"
},
{
"label": "Celular:",
"name": "contactos.telefono_cel"
},
{
"label": "Email:",
"name": "contactos.email"
},
{
"label": "",
"name": "contactos.cliente_id",
"def" : "0000",
type: "select"
},
{
"label": "Direccion 1",
"name": "contactos.dir_fisica_1"
},
{
"label": "Direccion 2",
"name": "contactos.dir_fisica_2"
},
{
"label": "Direccion 3",
"name": "contactos.dir_fisica_3"
}
],
//******** Inicia Lenguaje Editar
i18n: {
create: {
button: "Nuevo",
title: "Crear nuevo registro",
submit: "Crear"
},
edit: {
button: "Editar",
title: "Editar registro",
submit: "Actualizar"
},
remove: {
button: "Eliminar",
title: "Eliminar",
submit: "Eliminar",
confirm: {
_: "Está seguro de eliminar la linea %d ?",
1: "Está seguro de eliminar 1 linea?"
}
},
error: {
system: "Se ha producido un error, contactar al administrador del sistema"
},
datetime: {
previous: 'Previo',
next: 'Siguiente',
months: [ 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre' ],
weekdays: [ 'Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab' ]
}
}
//******** Finaliza Lenguaje Editar
} );
editor
.dependent( 'contactos.cliente_id', function ( val ) {
return val === '0' ?
{ show: ['contactos.dir_fisica_1','contactos.dir_fisica_2','contactos.dir_fisica_3'] }:
{ hide: ['contactos.dir_fisica_1','contactos.dir_fisica_2','contactos.dir_fisica_3'] } ;
} );
// Obtener el Id de la linea seleccionada y guardarla en la variable solId
var rowId = "99"; // Declarando la Variable
var solId = rowId;
var clienteNombre = "Sin Nombre";
var clienteDirFis1 ="";
var clienteDirFis2 ="";
var clienteDirFis3 ="";
var ubicacionCliente ="";
// Obteniendo el id de la linea para pasarlo por id
$('#contactos').on( 'click', 'tr', function () {
rowId = table.row( this ).id();
var largo = rowId.length;
solId = rowId.slice(4,largo);
console.log(table.row(this).data());
clienteNombre = table.row(this).data().contactos.nombre;
console.log(clienteNombre);
clienteDirFis1 = table.row(this).data().contactos.dir_fisica_1;
clienteDirFis2 = table.row(this).data().contactos.dir_fisica_2;
clienteDirFis3 = table.row(this).data().contactos.dir_fisica_3;
console.log(clienteDirFis1);
console.log(clienteDirFis2);
console.log(clienteDirFis3);
ubicacionCliente = clienteDirFis1 + ' ' + clienteDirFis2 + ' '+ clienteDirFis3;
console.log(ubicacionCliente);
} );
var table = $('#contactos').DataTable( {
"lengthMenu": [[ 5, 10, -1], [ 5, 10, "Todos"]],
"order": [[ 1, 'asc' ]],
dom: 'Blfrtip',
ajax: 'php/table.contactos.php',
columns: [
{
"data": "contactos.id"
},
{
"data": "contactos.nombre"
},
{
"data": "contactos.telefono_fijo"
},
{
"data": "contactos.telefono_cel"
},
{
"data": "contactos.email"
},
{
"data": "clientes.nombre_comercial"
},
{
"data": "contactos.dir_fisica_1"
},
{
"data": "contactos.dir_fisica_2"
},
{
"data": "contactos.dir_fisica_3"
}
],
select: true,
lengthChange: true,
buttons: [
{ extend: 'create', text: "Nuevo", editor: editor },
{ extend: 'edit', text:"Editar", editor: editor },
{ extend: 'remove', text:"Eliminar", editor: editor },
{
extend: "selectedSingle",
text: "Crear Solicitud",
action: function ( e, dt, node, config ) {
var editor = new $.fn.dataTable.Editor( {
ajax: 'php/table.solicitudes.php',
table: '#solicitudes',
fields: [
{
"label": "Cliente Nr:",
"name": "solicitudes.contacto_id",
"type" : "readonly"
},
{
"label": "Estatus:",
"name": "solicitudes.estatus",
"def": "REC",
"type" : "readonly"
},
{
"label": "Tipo Servicio:",
"name": "solicitudes.tipo_servicio",
"type": "select",
"options": [
"Diseño y Construccion",
"Acabado y Remodelaciones",
"Mtto. Correctivo",
"Limpieza",
"Mtto. Preventivo",
"Facility Management"
]
},
{
"label": "Descripcion:",
"name": "solicitudes.descripcion"
},
{
"label": "¿Urgente?",
"name": "solicitudes.urgente",
"type": "radio",
"def": "No",
"options": [
"Si",
"No"
]
},
{
"label": "Comentarios:",
"name": "solicitudes.comentarios_sol"
},
{
"label": "Contacto en sitio:",
"name": "solicitudes.contacto_sitio"
},
{
"label": "Ubicacion:",
"name": "solicitudes.ubicacion",
"type":"textarea"
},
{
"label": "Referencia:",
"name": "solicitudes.referencia"
},
{
"label": "Condiciones:",
"name": "solicitudes.condiciones"
},
{
"label": "Fecha Levantamiento:",
"name": "solicitudes.lev_fecha",
"type": "datetime",
"format": "D/MM/YY"
},
{
"label": "Hora Levantamiento",
"name": "solicitudes.lev_hora"
},
{
"label": "Fecha Cotización",
"name": "solicitudes.cot_fecha",
"type": "datetime",
"format": "D/MM/YY"
},
{
"label": "Notas Cotización:",
"name": "solicitudes.notas_cot"
},
{
"label": "Comentarios:",
"name": "solicitudes.comentarios_lev"
},
{
"label": "Archivo:",
"name": "solicitudes.archivo",
type: "upload",
display: function ( file_id ) {
return '<img src="'+table.file( 'files', file_id ).web_path+'"/>';
},
clearText: "Clear",
noImageText: 'No image'
}
],
//******** Inicia Lenguaje Editar
i18n: {
create: {
button: "Nuevo",
title: "Crear nuevo registro",
submit: "Crear"
},
edit: {
button: "Editar",
title: "Editar registro",
submit: "Actualizar"
},
remove: {
button: "Eliminar",
title: "Eliminar",
submit: "Eliminar",
confirm: {
_: "Está seguro de eliminar la linea %d ?",
1: "Está seguro de eliminar 1 linea?"
}
},
error: {
system: "Se ha producido un error, contactar al administrador del sistema"
},
datetime: {
previous: 'Previo',
next: 'Siguiente',
months: [ 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre' ],
weekdays: [ 'Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab' ]
}
}
//******** Finaliza Lenguaje Editar
} );
editor
.title( 'Crear Solicitud de: ' + clienteNombre )
.buttons( [
'Guardar',
{ label: 'Cancelar', fn: function () { this.close(); } } ] )
.create()
.set('solicitudes.contacto_id',solId)
.set('solicitudes.ubicacion',ubicacionCliente);
}
}
],
//******** Inicia Lenguaje Display
language: {
"decimal": "",
"emptyTable": "No hay datos disponibles en la Tabla",
"info": "Mostrando _START_ al _END_ de _TOTAL_ registros",
"infoEmpty": "Mostrando 0 de 0 de 0 registros",
"infoFiltered": "(filtrados de un total de _MAX_ registros)",
"infoPostFix": "",
"thousands": ",",
"lengthMenu": "Mostrar _MENU_ registros",
"loadingRecords": "Cargando...",
"processing": "Procesando...",
"search": "Buscar:",
"zeroRecords": "No se encontraron coincidencias",
"paginate": {
"first": "Primero",
"last": "Último",
"next": "Siguiente",
"previous": "Anterior"
},
"aria": {
"sortAscending": ": ordenar columna en orden ascendente",
"sortDescending": ": ordenar columna en orden descendente"
}
},
//******** Termina Lenguaje Display
} );
} );
}(jQuery));
This discussion has been closed.
Replies
By the way, I also have problems with editting a row, it is necessary to do the procees twice:
This is only in Google-Chrome (Versión 53.0.2785.116 m ) and Opera ( 40.0.2308.62 )
FireFox, Edge and Safari working ok!
Can you give me a link to the page so I can debug it please? I don't immediately see the issue from the above code.
Allan
Hello Allan,
Well I have found something out!
If the editor window contain more fields that the height of the window can show, the buttons do not appear. You can scroll the down with the bar in order to see the rest of the fields but buttons do not appear:
I have one of those display you can physically rotate, so I have rotated my display to the vertical position, and setup the orientation to "portrait" and magically the buttons appears.
If I do not leave the editor window, the buttons are shown but not correctly, but, If I cancel the edition and click on again the "create" button, then everything is alright!
**You can recreate this issue direct on the Generator.
Create 14 text fields 3 of them as text area, then run the editor. You will see what I mean. **(My resolution is 1280 x 1024 Landscape)
This happens currently with Google Chrome, I hope you can solve this.
I see the issue - thanks for the instructions.
Its a Chrome rendering bug. As soon as any CSS is altered, it works as expected. It looks like it isn't taking into account the scrolling - the buttons are visible, they are just way down the page (and you can't see them since its in a position:fixed element).
I've just tinkered with CSS for an hour, but haven't found a CSS only workaround. A Javascript workaround is to use:
Which forces Chrome to to a redraw and it gets it right on the second go.
I've got a similar workaround that will be in the next version of Editor.
Thanks for letting me know about this.
Regards,
Allan
Thanks alot for the quick answer Allan!
It works perfect now!