¡Buenas noches!; tengo un sistema de compra y venta de artículos en el archivo "cliente.js" que dentro de mi proyecto esta en la carpeta (/vistas/js) ya que el proyecto esta dividido en varias partes; este el mi código "clientes.js"
var tabla;
var tabla_en_ventas;
//Función que se ejecuta al inicio
function init(){
listar();
//llama la lista de clientes en ventana modal en ventas.php
listar_en_ventas();
//cuando se da click al boton submit entonces se ejecuta la funcion guardaryeditar(e);
$("#cliente_form").on("submit",function(e)
{
guardaryeditar(e);
})
//cambia el titulo de la ventana modal cuando se da click al boton
$("#add_button").click(function(){
$(".modal-title").text("Agregar Cliente");
});
}
//Función limpiar
/*IMPORTANTE: no limpiar el campo oculto del id_usuario, sino no se registra
el cliente*/
function limpiar()
{
$('#cedula').val("");
$('#nombre').val("");
$('#apellido').val("");
$('#telefono').val("");
$('#email').val("");
$('#direccion').val("");
$('#estado').val("");
$('#cedula_cliente').val("");
}
//Función Listar
function listar()
{
tabla=$('#cliente_data').dataTable(
{
"aProcessing": true,//Activamos el procesamiento del datatables
"aServerSide": true,//Paginación y filtrado realizados por el servidor
dom: 'Bfrtip',//Definimos los elementos del control de tabla
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdf'
],
"ajax":
{
url: '../ajax/cliente.php?op=listar',
type : "get",
dataType : "json",
error: function(e){
console.log(e.responseText);
}
},
"bDestroy": true,
"responsive": true,
"bInfo":true,
"iDisplayLength": 10,//Por cada 10 registros hace una paginación
"order": [[ 0, "desc" ]],//Ordenar (columna,orden)
"language": {
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando un total de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
}
}//cerrando language
}).DataTable();
}
//Mostrar datos del cliente en la ventana modal
function mostrar(cedula_cliente)
{
$.post("../ajax/cliente.php?op=mostrar",{cedula_cliente : cedula_cliente}, function(data, status)
{
data = JSON.parse(data);
//alert(data.cedula);
console.log(data);
$('#clienteModal').modal('show');
$('#cedula').val(cedula_cliente);
$('#nombre').val(data.nombre);
$('#apellido').val(data.apellido);
$('#telefono').val(data.telefono);
$('#email').val(data.correo);
$('#direccion').val(data.direccion);
$('#estado').val(data.estado);
$('.modal-title').text("Editar Cliente");
$('#cedula_cliente').val(cedula_cliente);
});
}
//la funcion guardaryeditar(e); se llama cuando se da click al boton submit
function guardaryeditar(e)
{
e.preventDefault(); //No se activará la acción predeterminada del evento
var formData = new FormData($("#cliente_form")[0]);
$.ajax({
url: "../ajax/cliente.php?op=guardaryeditar",
type: "POST",
data: formData,
contentType: false,
processData: false,
success: function(datos)
{
/*bootbox.alert(datos);
mostrarform(false);
tabla.ajax.reload();*/
//alert(datos);
/*imprimir consulta en la consola debes hacer un print_r($_POST) al final del metodo
y si se muestran los valores es que esta bien, y se puede imprimir la consulta desde el metodo
y se puede ver en la consola o desde el mensaje de alerta luego pegar la consulta en phpmyadmin*/
console.log(datos);
$('#cliente_form')[0].reset();
$('#clienteModal').modal('hide');
$('#resultados_ajax').html(datos);
$('#cliente_data').DataTable().ajax.reload();
limpiar();
}
});
}
//EDITAR ESTADO DEL CLIENTE
//importante:id_cliente, est se envia por post via ajax
function cambiarEstado(id_cliente, est){
bootbox.confirm("¿Está Seguro de cambiar de estado?", function(result){
if(result)
{
$.ajax({
url:"../ajax/cliente.php?op=activarydesactivar",
method:"POST",
//data:dataString,
//toma el valor del id y del estado
data:{id_cliente:id_cliente, est:est},
//cache: false,
//dataType:"html",
success: function(data){
$('#cliente_data').DataTable().ajax.reload();
}
});
}
});//bootbox
}
//Función Listar
function listar_en_ventas(){
tabla_en_ventas=$('#lista_clientes_data').dataTable(
{
"aProcessing": true,//Activamos el procesamiento del datatables
"aServerSide": true,//Paginación y filtrado realizados por el servidor
dom: 'Bfrtip',//Definimos los elementos del control de tabla
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdf'
],
"ajax":
{
url: '../ajax/cliente.php?op=listar_en_ventas',
type : "get",
dataType : "json",
error: function(e){
console.log(e.responseText);
}
},
"bDestroy": true,
"responsive": true,
"bInfo":true,
"iDisplayLength": 10,//Por cada 10 registros hace una paginación
"order": [[ 0, "desc" ]],//Ordenar (columna,orden)
"language": {
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando un total de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
}
}//cerrando language
}).DataTable();
}
//AUTOCOMPLETAR DATOS DEL CLIENTE EN VENTAS
function agregar_registro(id_cliente,est){
$.ajax({
url:"../ajax/cliente.php?op=buscar_cliente",
method:"POST",
data:{id_cliente:id_cliente,est:est},
dataType:"json",
success:function(data)
{
/*si el cliente esta activo entonces se ejecuta, de lo contrario
el formulario no se envia y aparecerá un mensaje */
if(data.estado){
$('#modalCliente').modal('hide');
$('#cedula').val(data.cedula_cliente);
$('#nombre').val(data.nombre);
$('#apellido').val(data.apellido);
$('#direccion').val(data.direccion);
$('#id_cliente').val(id_cliente);
} else{
bootbox.alert(data.error);
} //cierre condicional error
}
})
}
//ELIMINAR CLIENTE
function eliminar(id_cliente){
bootbox.confirm("¿Está Seguro de eliminar el cliente?", function(result){
if(result)
{
$.ajax({
url:"../ajax/cliente.php?op=eliminar_cliente",
method:"POST",
data:{id_cliente:id_cliente},
success:function(data)
{
//alert(data);
$("#resultados_ajax").html(data);
$("#cliente_data").DataTable().ajax.reload();
}
});
}
});//bootbox
}
init();
Pero al ejecutar la Vista HTML Bootstrap Clientes.php; sale un error al editar
introducir la descripción de la imagen aquí
<?php
require_once("../config/conexion.php");
if(isset($_SESSION["id_usuario"])){
?>
<?php
require_once("header.php");
?>
<!--Contenido-->
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content">
<div id="resultados_ajax"></div>
<h2>Listado de Clientes</h2>
<div class="row">
<div class="col-md-12">
<div class="box">
<div class="box-header with-border">
<h1 class="box-title">
<button class="btn btn-primary btn-lg" id="add_button" onclick="limpiar()" data-toggle="modal" data-target="#clienteModal"><i class="fa fa-plus" aria-hidden="true"></i> Nuevo Cliente</button></h1>
<div class="box-tools pull-right">
</div>
</div>
<!-- /.box-header -->
<!-- centro -->
<div class="panel-body table-responsive">
<table id="cliente_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>Cédula</th>
<th>Nombres</th>
<th>Apellidos</th>
<th>Teléfono</th>
<th>Correo</th>
<th>Dirección</th>
<th>Fecha</th>
<th>Estado</th>
<th width="10%">Editar</th>
<th width="10%">Eliminar</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!--Fin centro -->
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.row -->
</section><!-- /.content -->
</div><!-- /.content-wrapper -->
<!--Fin-Contenido-->
<!--FORMULARIO VENTANA MODAL-->
<div id="clienteModal" class="modal fade">
<div class="modal-dialog">
<form class="form-horizontal" method="post" id="cliente_form">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Agregar Cliente</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="inputText3" class="col-lg-1 control-label">Cédula</label>
<div class="col-lg-9 col-lg-offset-1">
<input type="text" class="form-control" id="cedula" name="cedula" placeholder="Cédula" required pattern="[0-9]{0,15}">
</div>
</div>
<div class="form-group">
<label for="inputText1" class="col-lg-1 control-label">Nombres</label>
<div class="col-lg-9 col-lg-offset-1">
<input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombres" required pattern="^[a-zA-Z_áéíóúñ\s]{0,30}$">
</div>
</div>
<div class="form-group">
<label for="inputText1" class="col-lg-1 control-label">Apellidos</label>
<div class="col-lg-9 col-lg-offset-1">
<input type="text" class="form-control" id="apellido" name="apellido" placeholder="Apellidos" required pattern="^[a-zA-Z_áéíóúñ\s]{0,30}$">
</div>
</div>
<div class="form-group">
<label for="inputText4" class="col-lg-1 control-label">Teléfono</label>
<div class="col-lg-9 col-lg-offset-1">
<input type="text" class="form-control" id="telefono" name="telefono" placeholder="Teléfono" required pattern="[0-9]{0,15}">
</div>
</div>
<div class="form-group">
<label for="inputText4" class="col-lg-1 control-label">Correo</label>
<div class="col-lg-9 col-lg-offset-1">
<input type="email" class="form-control" id="email" name="email" placeholder="Correo" required="required">
</div>
</div>
<div class="form-group">
<label for="inputText5" class="col-lg-1 control-label">Dirección</label>
<div class="col-lg-9 col-lg-offset-1">
<textarea class="form-control col-lg-5" rows="3" id="direccion" name="direccion" placeholder="Direccion ..." required pattern="^[a-zA-Z0-9_áéíóúñ°\s]{0,200}$"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputText4" class="col-lg-1 control-label">Estado</label>
<div class="col-lg-9 col-lg-offset-1">
<select class="form-control" id="estado" name="estado" required>
<option value="">-- Selecciona estado --</option>
<option value="1" selected>Activo</option>
<option value="0">Inactivo</option>
</select>
</div>
</div>
</div>
<!--modal-body-->
<div class="modal-footer">
<input type="hidden" name="id_usuario" id="id_usuario" value="<?php echo $_SESSION["id_usuario"];?>"/>
<input type="hidden" name="id_cliente" id="id_cliente"/>
<input type="hidden" name="cedula_cliente" id="cedula_cliente"/>
<button type="submit" name="action" id="#" class="btn btn-success pull-left" value="Add"><i class="fa fa-floppy-o" aria-hidden="true"></i> Guardar </button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i> Cerrar</button>
</div>
</div>
</form>
</div>
</div>
<!--FIN FORMULARIO VENTANA MODAL-->
<?php
require_once("footer.php");
?>
<script type="text/javascript" src="js/clientes.js"></script>
<?php
} else {
header("Location:".Conectar::ruta()."vistas/index.php");
}
?>