Responsive buttons doesnt work

yanes6514

Please someone could help me in this problem? At the moment of minimizing the screen the edit button stops working, the error that comes out when pressing it is: "TypeError: data is undefined".
The button works if you can see all the moments, but minimizing stops working.

****Code:****
var listar = function(){
$("#section-guardar").slideUp();
$("#tabla-usuarios").slideDown();
var table = $("#example").DataTable({
"responsive": true,
"ajax":{
"method":"POST",
"url": base_url+"usuarios_controller/mostrarUsuario"
},
"columns": [
{"data":"id_usuario"},
{"data":"usuario"},
{"data":"contrasena"},
{"data":"rol"},
{"data":"id_cliente"},
{"data":"estado"},
{"defaultContent": "<button type='button' class='editar btn btn-primary'><i class='fa fa-pencil-square-o'></i></button> <button type='button' class='eliminar btn btn-danger' data-toggle='modal' data-target='#modalEliminar' ><i class='fa fa-trash-o'></i></button>"}
]
});

  obtener_data_editar("#example tbody", table);
}

Tester2017

I am also new to DataTables so for sure my answer is not foolish proved. But at least I can try to give you some kind of suggestion, as I had already this error message.

Normally this means that you are trying to work with a field in the controller which has not been defined in the editor or in your table form layout. But the code you are showing is not complete to find the exact cause of the error message, as you are only showing the columns being used in the table part, and not in the editor part.

You could try to use a tool like Firebug (or whatever) to see what data your client is sending to the server. And check this against the fields you are expecting in your controller.

Another option is (if you are using PHP on server-side) to do a print-r with the received JSON data. Then you also can figure out what data has been send.

Tester2017

One correction, where I wrote:
[..] a print-r with the received JSON data [..]

it should have been:
[..] a print-r with the received $_POST data [..].

yanes6514

Thank you very much for the help, I could see that the problem is that at the moment of requesting the data, when this becomes responsive, I only ask the data to the father, and not the children. How could I solve this?

CODE

var obtener_data_editar = function(tbody, table){
$(tbody).on("click", "button.editar", function(){
var data = table.row( $(this).parents("tr") ).data();
var id_usuario = $("#id_usuario").val( data.id_usuario ),
usuario = $("#usuario").val( data.usuario ),
contrasena = $("#contrasena").val( data.contrasena ),
rol = $("#rol").val( data.rol ),
id_cliente = $("#id_cliente").val( data.id_cliente ),
estado = $("#estado").val( data.estado ),
opcion = $("#opcion").val("modificar");
$("#section-guardar").slideDown("down");
$("#tabla-usuarios").slideUp("down");
});
}

Tester2017

@yanes6514,
I am sorry but I can't help you without seeing what code you have produced.

And one tip: if you are showing code use

code

which make your code more readable for others.

You can obtain this by using triple back ticks (```) on new lines before and after the code block, as is shown in the footer of the comment window.

Tester2017

One question; why are you using the var "opcion" with value "modificar"? Are you not using the default editor buttons? If you use, modifying a row will create an update request, and in that case there is no reason to set an "opcion" var with the value "modificar". But again need to see the code for understanding what is happening.