I have a problem, I do not know if it has happened to you before, I have this function called "AddProduct" that uses append to add certain fields from a database , among them SELECT that are filled through AJAX, and allow me to choose the data, my problem is that when I add a product (item or additional line), the previous SELECTs also receive an append , which it makes them bigger and bigger as I add them and their processes that are executed in the change event in the new ones, also affect me to the previous ones. In what way can I create them in such a way that they are independent of each other and that behavior does not happen to me?
/*=============================================
AGREGANDO PRODUCTOS DESDE LA TABLA
=============================================*/
$('.tablaInvFacturas tbody').on( 'click', 'button.btnAgregarProducto', function () {
var idProducto=$(this).attr("idProducto");
//console.log("idProducto",idProducto);
$(this).removeClass("btn-primary btnAgregarProducto");
$(this).addClass("btn-default");
var datos=new FormData();
datos.append("idProducto",idProducto);
$.ajax({
url:"ajax/inventarios.ajax.php",
method:"POST",
data: datos,
cache: false,
contentType: false,
processData: false,
dataType: 'json',
success: function(respuesta){
//console.log("respuesta",respuesta);
var desc_prod =(respuesta["DESC_PROD"]);
var exist =(respuesta["EXIST"]);
var servicio =(respuesta["SERVICIO"]);
//var precio =(respuesta["PRECIO"]);
if(respuesta["SERVICIO"]==1){
$(".nuevoProducto").append(
'<!--Descripción del Producto-->'+
'<div class="row" style="padding: 5px 5px">'+
'<div class="col-xs-5" >'+
'<div class="input-group">'+
'<span class="input-group-addon">'+
'<button type="button" class="btn btn-danger btn-xs btnQuitarProducto" idProducto="'+idProducto+'"><i class="fa fa-times"></i></button>'+
'</span>'+
'<input type="text" class="form-control" id="agregarProducto" name="agregarProducto" value="'+desc_prod+'" readonly required>'+
'</div>'+
'</div>'+
'<!--Cantidad del Producto-->'+
'<div class="col-xs-3">'+
'<input type="number" step="1" class="form-control nuevaCantidadProducto" name="nuevaCantidadProducto" exist="'+exist+'" servicio="'+servicio+'" min="1" required >'+
'</div>'+
'<!--Precio del Producto-->'+
'<div class="col-xs-4 ingresoPrecio">'+
'<div class="input-group">'+
'<span class="input-group-addon"><i class="ion ion-social-usd"></i></span>'+
'<input type="number" step="0.01" class="form-control nuevoPrecioProducto" precioReal="" name="nuevoPrecioProducto" min="1" value="" required>'+
'</div>'+
'</div>'+
'<div class="row" style="padding: 5px 15px">'+
'<!--Nombre del médico practicante-->'+
'<div class="col-xs-3" >'+
'<div class="input-group">'+
'<select class="form-control nuevoMdPracticante" idProducto name="nuevoMdPracticante" id="nuevoMdPracticante" required>'+
'<option>Md. practicante</option>'+
'</select>'+
'</div>'+
'</div>'+
'<!--Nombre del médico referente-->'+
'<div class="col-xs-3">'+
'<div class="input-group">'+
'<select class="form-control nuevoMdReferente" idProducto name="nuevoMdReferente" id="nuevoMdReferente" required>'+
'<option>Md. referente</option>'+
'</select>'+
'</div>'+
'</div>'+
'<!--Nombre del paciente-->'+
'<div class="col-xs-4">'+
'<div class="input-group">'+
'<select class="form-control baseExpediente" idMd name="baseExpediente" required>'+
'<option>Base Expediente</option>'+
'<option value="pacientes">Base Dr. 1</option>'+
'<option value="pacientesf">Base Dr. 2</option>'+
'<option value="pacientess">Base Dr. 3</option>'+
'</select>' +
'</div>'+
'<div class="input-group">'+
'<select class="form-control nuevoPacienteProcedimiento" idProducto name="nuevoPacienteProcedimiento" required>'+
'<option>Paciente</option>'+
'</select>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'
);
medicosFact();
/*SUMAR TOTAL DE PRECIOS*/
sumarTotalPrecios();
}else{
$(".nuevoProducto").append(
'<!--Descripción del Producto-->'+
'<div class="row" style="padding: 5px 15px">'+
'<div class="col-xs-5" style="padding-right: 0px">'+
'<div class="input-group">'+
'<span class="input-group-addon">'+
'<button type="button" class="btn btn-danger btn-xs btnQuitarProducto" idProducto="'+idProducto+'"><i class="fa fa-times"></i></button>'+
'</span>'+
'<input type="text" class="form-control" id="agregarProducto" name="agregarProducto" value="'+desc_prod+'" readonly required>'+
'</div>'+
'</div>'+
'<!--Cantidad del Producto-->'+
'<div class="col-xs-3">'+
'<input type="number" step="1" class="form-control nuevaCantidadProducto" name="nuevaCantidadProducto" exist="'+exist+'" servicio="'+servicio+'" min="1" required >'+
'</div>'+
'<!--Precio del Producto-->'+
'<div class="col-xs-4 ingresoPrecio">'+
'<div class="input-group">'+
'<span class="input-group-addon"><i class="ion ion-social-usd"></i></span>'+
'<input type="number" step="0.01" class="form-control nuevoPrecioProducto" precioReal="" name="nuevoPrecioProducto" min="1" value="" required>'+
'</div>'+
'</div>'+
'</div>'
);
/*SUMAR TOTAL DE PRECIOS*/
sumarTotalPrecios();
}
}
});
limpiarSelect("#nuevoMdPracticante");
limpiarSelect("#nuevoMdReferente");
});
My cleanSelect function is as follows:
function limpiarSelect(id)
{
document.getElementById(id).options.length = 0;
}
And the HTML used is this:
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Crear Factura
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-home"></i> Inicio</a></li>
<li class="active"><a href="crearfactura">Crear Factura</a></li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<!--FORMULARIO FACTURA-->
<div class="container-fluid">
<div class="box box-success">
<div class="box-header with-border"></div>
<form role="form" method="post" class="formularioFactura">
<div class="box-body">
<div class="box">
<!--ENTRADA DEL USUARIO QUE GENERA LA VENTA-->
<div class="form-group col-lg-4" style="padding: 2px">
<p class="help-block"><b>Usuario</b></p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" class="form-control" id="nom_usuario" name="nom_usuario" value="<?php echo $_SESSION["NOM_USUARIO"]?>" readonly>
<input type="hidden" name="id_usuario" value="<?php echo $_SESSION["ID_USUARIO"]?>">
</div>
</div>
<!--FECHA DE EMISIÓN DEL DOCUMENTO-->
<div class="form-group col-lg-2" style="padding: 2px">
<p class="help-block"><b>Fecha de emisión</b></p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="date" class="form-control" id="fecha_factura" name="fecha_factura" required>
</div>
</div>
<!--CONDICIÓN DE PAGO-->
<div class="form-group col-lg-4" style="padding: 2px">
<p class="help-block"><b>Condición</b></p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
<select class="form-control" name="idCondicion" id="idCondicion" required>
<option value="">--Condición de Pago--</option>
<?php
$item=NULL;
$valor=NULL;
$condpago= ControladorCondPago::mostrarCondPago($item,$valor);
foreach ($condpago as $key => $value) {
echo '<option diasPago="'.$value["DIAS_PAGO"].'" value="'.$value["ID_COND"].'">'.$value["DESC_COND"].'</option>';
}
?>
</select>
</div>
<!--FECHA DE VENCIMIENTO DE LA FACTURA-->
</div>
<div class="form-group col-lg-2" style="padding: 2px">
<p class="help-block"><b>Fecha de vencimiento</b></p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="date" class="form-control" id="fecha_venc" name="fecha_venc" readonly required>
</div>
</div>
<!--ENTRADA PARA EL TIPO DE FACTURA-->
<div class="form-group col-lg-3">
<p class="help-block"><b>Tipo de Factura</b></p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-list"></i></span>
<select class="form-control" name="tipoFactura" id="tipoFactura">
<option value="">--Seleccione Tipo de Factura--</option>
<?php
$item=NULL;
$valor=NULL;
$tipofact= ControladorTipoFact::mostrarTipoFact($item, $valor);
foreach ($tipofact as $key => $value) {
echo '<option value="'.$value["ID_TIPO"].'">'.$value["DESC_TIPO"].'</option>';
}
?>
</select>
</div>
</div>
<!--ELEGIR LA SERIE FISCAL-->
<div class="form-group col-lg-2">
<p class="help-block"><b>Serie Fiscal</b></p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-list"></i></span>
<select class="form-control serieFactura" name="serieFactura" id="serieFactura">
<option value="">--Seleccione Serie Fiscal--</option>
</select>
</div>
</div>
<!--MOSTRAR EL NÚMERO DE FACTURA A IMPRIMIR-->
<div class="form-group col-lg-2">
<p class="help-block"><b>Número de Factura</b></p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key"></i></span>
<input type="number" class="form-control" id="nuevaFact" name="nuevaFact" readonly required>
</div>
</div>
<!--ENTRADA PARA EL EL CLIENTE-->
<div class="form-group col-lg-5">
<p class="help-block"><b>Nombre del cliente</b></p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-users"></i></span>
<select class="form-control" id="seleccionarCliente" name="seleccionarCliente" required>
<option value="">--Seleccionar Cliente--</option>
<?php
$itemcli=NULL;
$valorclie=NULL;
$clientes= ControladorClientes::mostrarClientes($itemcli, $valorcli);
foreach ($clientes as $key => $value) {
echo '<option value="'.$value["ID_CLIENTE"].'">'.$value["ID_CLIENTE"].' - '.$value["NOM_CLIENTE"].'</option>';
}
?>
</select>
<span class="input-group-addon">
<button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#modalAgregarCliente" data-dismiss="modal">Agregar Cliente</button>
</span>
</div>
</div>
<!--BOTÓN PARA AGREGAR PRODUCTO-->
<button type="button" class="btn btn-primary btnAgregarItem col-lg-3">Agregar Item</button>
<hr>
<!--ENCABEZADO DE TABLA PARA AGREGAR ITEMS-->
<div>
<table class="table table-striped">
<thead>
<tr>
<th>Cantidad</th>
<th>Código</th>
<th>Descripción</th>
<th>Impuesto</th>
<th>Lista de Precio</th>
<th>Precio Unitario</th>
<th>Sub-total</th>
<th>Acción</th>
</tr>
</thead>
<tbody class="nuevoProducto">
<!--ENTRADA PARA AGREGAR PRODUCTO-->
<!-- <div class="form-group row nuevoProducto">
</div>-->
</tbody>
</table>
</div>
<div class="row">
<!--ENTRADA DE IMPUESTOS Y TOTAL-->
<div class="col-xs-8 pull-right">
<table class="table">
<thead>
<tr>
<th>Impuesto</th>
<th>Recargo</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 50%">
<div class="input-group">
<input type="number" class="form-control input-lg" id="nuevoImpuestoVenta" name="nuevoImpuestoVenta" readonly required>
<span class="input-group-addon"><i class="fa fa-percent"></i></span>
</div>
</td>
<td style="width: 50%">
<div class="input-group">
<span class="input-group-addon"><i class="ion ion-social-usd"></i></span>
<input type="number" value="0.00" class="form-control input-lg" id="nuevoRecargoTc" name="nuevoRecargoTc" readonly required>
</div>
<p class="help-block"><b>TOTAL</b></p>
<div class="input-group">
<span class="input-group-addon"><i class="ion ion-social-usd"></i></span>
<input type="number" value="0.00" class="form-control input-lg" id="nuevoTotalVenta" name="nuevoTotalVenta" readonly required>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr>
<!--ENTRADA MÉTODO DE PAGO-->
<div class="form-group row">
<div class="col-xs-6" style="padding-right: 0px">
<div class="input-group">
<select class="form-control" id="nuevoMetodoPago" name="nuevoMetodoPago" required>
<option value="">Seleccione Forma de Pago</option>
<?php
$item=NULL;
$valor=NULL;
$formaspago= ControladorFormPago::mostrarFormPago($item, $valor);
foreach ($formaspago as $key => $value) {
echo '<option numAutorización="'.$value["AUTORIZACION"].'" recargoFormPago="'.$value["RECARGO_FORMPAGO"].'" value="'.$value["ID_FORMPAGO"].'">'.$value["DESC_FORMPAGO"].'</option>';
}
?>
</select>
</div>
</div>
<div class="cajasMetodoPago"></div>
<br>
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary pull-right">Guardar Factura</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->