2

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....

1 respuesta 1

2

Aunque document.querySelectorAll() puede funcionar para obtener dos o más elementos con mismo ID, el ID debe ser único para evitar comportamientos inesperados.

Por otra parte, solo los campos de formulario y botones pueden tener el atributo value, no los enlaces. Las opciones son:

  1. Cambiar la etiqueta de enlace a botón
  2. Usar atributo de datos para agregar el valor como data-value="id"

Ahora, el problema es que estás creando la variable tableRow para armar el HTML de la tabla y estás ejecutando .querySelectorAll() dentro del ciclo, donde el enlace (o botón) es solo una cadena y todavía no existe en el DOM:

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>';

        // El enlace todavía no existe
        let button = document.querySelectorAll('#cliente_seleccionar');
        // Aquí estás obteniendo el error
        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
    // Hasta después de esta línea es cuando los enlaces estarán disponibles
    tabla.append(tableRow);
}

Solución:

Te recomiendo armar el HTML usando plantillas de texto para evitar concatenaciones y hacer tu código más legible.

Dejando la etiqueta de enlace, con atributo de datos, te recomiendo delegar el evento (escuchar clics en la tabla) y obtener el enlace que lo disparó (por clase y no por ID):

// En la función success de AJAX solo armas la tabla
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 data-value="${value.id}" class="btn btn-primary">Seleccionar</a></td>
        </tr>`;
    }); // Termina loop ajax
    tabla.append(tableRow);
}


// Finalmente, fuera de otras funciones, asignas el evento a la tabla
// por medio de la clase de los enlaces
$('#tabla_usuarios').on('click', '.btn-primary', function() {
    // jQuery usa $(this) para acceder al elemento que disparó el evento
    // Con .data() se obtiene el atributo de datos
    // Tomas el valor desde atributo de datos
    btnValue = $(this).data('value');
    // En jQuery, .val() es para obtener o asignar valor a un campo
    // Asigno el id de cliente al input hidden
    $('cliente-id').val(btnValue);
});

De preferencia, no mezcles Javascript puro con jQuery, dificulta la lectura

4
  • Gracias @Triby, todavía no la he probado ya que me han surgido unos improvistos, pero cuando pruebe a arreglarlo de esta forma, te respondo , gracias por tu explicación :) el 6 jul. 2021 a las 8:20
  • Funciona perfectamente, muchas gracias, ahora me ha quedado bastante más claro! el 6 jul. 2021 a las 10:26
  • una cosa, he estado implementado la funcionalidad, y estaba haciendo un apartado para seleccionar y des-seleccionar, para cúando se vuelva a clicar el mismo boton que se hagan x acciones, lo que he hecho es añadir otro $('#tabla_usuarios').on('click', '.btn-primary', function() , y me sirve, pero no coge el elemento actual, sino todos.. el 6 jul. 2021 a las 16:48
  • 1
    @Juliian68, no es necesaria otra función, tal vez solo analizar si el valor del elemento es igual al del botón y, con base en eso, asignar el nuevo valor del input, ya sea vacío o ID.
    – Triby
    el 6 jul. 2021 a las 17:09

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.