Estoy haciendo un módulo para poder buscar todos los clientes que hay en la bbdd y seleccionar uno, lo he hecho con AJAX y lo que es mostrar los resultados lo he podido hacer sin muchas complicaciones.
Ahora bien, mi problema es el siguiente, yo quiero hacer un botón para poder seleccionar un cliente, tengo un botón que genero con las tablas, y allí tengo una propiedad llamada value dónde le paso el id.
Mi idea con Javascript pasar ese ID al elemento input hidden que hay en el formulario, una vez se haga click al registro que queremos. Pero no consigo añadir un event listener a los elementos que estoy creando con el $.each de ajax...
Mi código de la vista
<form method="POST" enctype="multipart/form-data" action="">
<input type="hidden" name="cliente-id" id="cliente-id">
@csrf
<div class="card p-3">
<h4 class="titulo-mediano">Datos cliente</h4>
</div>
<div class="mt-3 mb-2" align="center">
<a id="crearPedido-crear-nuevo-cliente" class="btn-action-one-active font-16 decoration-none p-2-5 cursor-pointer">Nuevo cliente</a>
<a id="crearPedido-select-cliente-existente" class="btn-action-one font-16 ml-2 decoration-none p-2-5 cursor-pointer">Cliente existente</a>
</div>
{{-- ELENTO QUE CONTIENE EL BUSCADOR DE CLIENTES EXISTENTES AJAX--}}
<div id="pedido-cliente-existente" class="d-none">
<div class="form-group row mt-1 mb-3 px-5">
<div class="col-md-12">
<section>
<h5>Buscar cliente existente</h5>
<div class="row">
<div class="col-md-6">
<input type="text" name="busqueda_cliente" id="pedido_crear_busqueda_cliente" placeholder="Buscar cliente..." class="form-control">
</div>
</div>
<div class="row mt-2">
<div class="col-md-12">
<table class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Apellidos</th>
<th>Dni</th>
<th>Telefono</th>
</tr>
</thead>
<!-- Aqui hago append de los resultados -->
<tbody id="tabla_usuarios">
</tbody>
</table>
</div>
</div>
</section>
</div>
</div>
</div>
**Mi código de JavaScript: **
inputBuscarClientePedido = document.getElementById("pedido_crear_busqueda_cliente");
if(inputBuscarClientePedido){
inputBuscarClientePedido.addEventListener("keyup", function(){
let searchValue = $(this).val();
// Tiene el id hidden que guardará la id del cliente asignado
idHidden = document.getElementById('cliente-id');
$.ajax({
url: '{{ route("pedido.crear.mostrar.clientes") }}',
method: 'POST',
dataType: 'json',
data: {
'_token': '{{ csrf_token() }}',
searchValue: searchValue
},
// Recibira un dato" que en este caso lo llamaremos "response, que seran los datos q nos devuelva el server
success: function (response){
let tableRow = '';
tabla = $('#tabla_usuarios');
tabla.html('');
$.each(response, function(index, value){
tableRow += '<tr><td>'+value.id+
'</td><td>'+value.nombre+
'</td><td>'+value.apellidos+
'</td><td>'+value.dni+
'</td><td>'+value.telefono+
'</td><td><a id="cliente_seleccionar" value="'+value.id+'" class="btn btn-primary">Seleccionar</a></td></tr>';
// Aquí es dónde esta el error, por que hasta arriba el código funciona correctamente, mi problema es que no selecciono el boton al que clico...
let button = document.querySelectorAll('#cliente_seleccionar');
button[index].addEventListener("click",function (){
btnValue = button[index].getAttribute("value");
// Asigno el id de cliente ( que esta en "value" del boton ) al input hidden
idHidden.setAttribute("value", btnValue);
});
}); // Termina loop ajax
tabla.append(tableRow);
}
});
});
}
Mi controlador Laravel:
public function buscarCliente(Request $request){
// Cogemos el valor del request de ajax (el string que hemos escrito en el input) y lo recibimos aqui
// Lo guardamos en una variable, cada vez que se escribe una letra se recibe otra peticion x ajax
$oficina_id = Auth::user()->oficina_id;
$searchAjaxValue = $request->get('searchValue');
$clientes = Cliente::where('nombre', 'like', '%'.$searchAjaxValue.'%')
->orWhere('apellidos', 'like', '%'.$searchAjaxValue.'%')
->orWhere('dni', 'like', '%'.$searchAjaxValue.'%')
->orWhere('telefono', 'like', '%'.$searchAjaxValue.'%')
->where('oficina_id', $oficina_id)
->get();
// Retorna en formato JSON el valor dado (en este caso le pasamos la coleccion con los clientes)
return json_encode($clientes);
}
Con este código hay varios errores, pero es lo más cerca que estoy de conseguir que me funcione el botón para pasarle el value al input hidden, el código de JS funciona bien hasta la parte dónde intento seleccionar los botones y añadirles un eventListener, me coge como "null" los botones, en la consola me da error "Cannot set property "onclick" of null....