3

Estoy haciendo un CRUD en el cual hay interesados y curso. Cada interesado puede estar interesado a muchos cursos. Se puede buscar quien esta interesado por cada curso pero al hacerlo me trae siempre el id del primer curso que aparece. Cual puede ser la posible solucion?

Esta es la funcion que trae todos los interesados por curso:

this.buscar_interesados_curso = (event) => {
    event.preventDefault();
    let form = event.currentTarget;
    let formData = new FormData();
    formData.append('id_curso', form.querySelector('#id_curso_buscar_interesado').value);
    formData.append("nombre", form.querySelector('#nombre_interesado_curso_search').value);
    formData.append("apellido", form.querySelector('#apellido_interesado_curso_search').value);
    let localidad_elegida = form.querySelector("#localidad_filtro_interesados").selectedOptions;
    let values = Array.from(localidad_elegida).map(({ value }) => value);
    if (values != 'Seleccionar localidad') {
        formData.append("localidad", values);
    } else {
        formData.append("localidad", "");
    }
    if (formData.get('nombre') != '' || formData.get('apellido') != '' || formData.get('localidad') != '') {
        fetch("../controllers/buscar_interesados_curso.php", {
            method: "POST",
            body: formData,
        })
            .then((res) => res.json())
            .then((data) => {
                console.log(data)
            })
            .catch((error) => console.log(error));
    }
};

Pero siempre me trae el id del curso que esta listado primero. Como lo podria solucionar?

EDITÉ EL CODIGO DE LA FUNCION COMO LO TENGO ACTUALMENTE Y AGREGO LOS CODIGOS DEL CONTROLLER Y DEL MODEL. EL PROBLEMA ES QUE ME DEVUELVE EL SIGUIENTE ERROR:

SyntaxError: Unexpected token '<', "<br />
<b>"... is not valid JSON

buscar_interesados_curso.php

<?php
require_once "../models/interesado_curso.model.php";
$arrayName = [
    'id_curso' => $_POST['id_curso'],
    'nombre' => strval($_POST['nombre'] ?? ''),
    'apellido' => strval($_POST['apellido'] ?? ''),
    'localidad' => strval($_POST['localidad'] ?? ''),
];
echo json_encode(InteresadoCurso::buscarInteresadoCurso($arrayName));

interesado_curso.model.php

public static function buscarInteresadoCurso($data)
{   
    $sql = "SELECT interesado.id_interesado, interesado.nombre, interesado.apellido, interesado.telefono, interesado.email, interesado.direccion, interesado.numero, interesado.localidad, interesado.dni FROM interesados_curso INNER JOIN interesado ON interesado.id_interesado = interesados_curso.id_interesado WHERE id_curso = :id_curso";
    $stmt->bindParam(':id_curso', $data['id_curso']);
    $params = [];
    
    foreach(['nombre','apellido','localidad'] as $campo) {
        if(!empty($data[$campo])) {
            $interesado_mas_campo = 'interesado.'.$campo;
            $sql .= sprintf(' AND %s ~* :%s ', $interesado_mas_campo, $campo);
            $params[$campo] = $data[$campo];
        }
    }
    try {
        $stmt = Connection::getConnection()->prepare($sql);
        $stmt->execute($params);
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        return $result;
    } catch (PDOException $th) {
        return ['error'=> $th->getMessage()];  
    }
}
8
  • No entendí tu pregunta. ¿El problema ocurre en el primer bloque de código o en el segundo? ¿El problema es en el cliente o es con los datos que vienen del servidor?
    – A. Cedano
    el 16 oct. 2022 a las 21:55
  • Tu problema es de backend. Podemos ver la query que estas haciendo? el 18 oct. 2022 a las 4:28
  • si el problema surge por ids no únicos lo ideal sería ver cómo renderizas los forms ( el view ) así generamos id unicos y luego adaptar el javascript sería trivial el 18 oct. 2022 a las 18:52
  • vi que tenia mal la consulta, ahi la cambie, cuando la ejecuto en el pgAdmin con un id_curso = 1 y le agrego ` AND interesado.nombre = 'Lucas'` si funciona, pero en la app me tira el error: SyntaxError: Unexpected token '<', "<br /> <b>"... is not valid JSON el 18 oct. 2022 a las 19:16
  • Esto error:"SQLSTATE[42883]: Undefined function: 7 ERROR:... es un error que nada tiene que ver con la pregunta original. Hay que revisar en qué consulta estás tratando de usar esas variables inválidas ($1 y $2)
    – Triby
    el 18 oct. 2022 a las 19:26

1 respuesta 1

1

Tienes varios formularios y repites ID, que deben ser únicos. Aunque tal vez podría funcionar si en vez de trata de obtener los elementos desde el documento, lo haces desde el formulario. Para eso, primero necesitas enviar el evento (event) o el formulario (this) a la función. Por cuestión de preferencias, te sugiero usar el evento:

<form action="javascript:void(0);" onsubmit="app_cursos.buscar_interesados_curso(event)" class="d-flex">

Adicionalmente, debes asignar inmediatamente el valor del campo oculto, de la misma forma que lo haces con el nombre del curso, para evitar el mismo problema que tienes al obtenerlo:

<input type="hidden" id="id_curso_buscar_interesado" value="${curso.id_curso}">

Al enviar el formulario, obtienes el formulario con event.currentTarget y desde ahí, el resto de elementos:

this.buscar_interesados_curso = (event) => {
    // Obtener el formulario que se está procesando
    let form = event.currentTarget;
    // Crear el objeto formData
    let formData = new FormData();
    // Acceder a elementos desde el formulario en vez del documento
    formData.append('id_curso', form.getElementById('id_curso_buscar_interesado').value);
    formData.append('id_curso', form.querySelector('#id_curso_buscar_interesado').value);
    formData.append("nombre", form.querySelector('#nombre_interesado_curso_search').value);
    formData.append("apellido", form.querySelector('#apellido_interesado_curso_search').value);
}

Hay dos cambios importantes en este código:

  1. Se recomienda usar let en vez de var al definir variables para que estén disponibles solo en el contexto donde se definieron y no globalmente
  2. En lugar de getElementById() se debe usar querySelector() para evitar el error que mencionas en comentarios

Lo ideal sería que no dupliques ID, tal vez usando clases, pero esto puede resolver temporalmente tu problema.

En este fragmento de código se demuestra el funcionamiento, lo único "diferente" son los datos que provienen del objeto curso (nombre e id):

buscar_interesados_curso = (event) => {
    // Cancelar comportamiento normal del evento (no enviar formulario)
    event.preventDefault();
    // Obtener el formulario que se está procesando
    let form = event.currentTarget;
    // Crear el objeto formData
    let formData = new FormData();
    // Acceder a elementos desde el formulario en vez del documento
    formData.append('id_curso', form.querySelector('#id_curso_buscar_interesado').value);
    formData.append("nombre", form.querySelector('#nombre_interesado_curso_search').value);
    formData.append("apellido", form.querySelector('#apellido_interesado_curso_search').value);

    // Para probar
    console.log(...formData);
}
<div class="row justify-content-center mt-4">
    <div>
        <h5>Curso: "${curso.nombre}"</h5>
        <hr>
        <div class="interesados_search">
            <form action="javascript:void(0);" onsubmit="buscar_interesados_curso(event)" class="d-flex">
                <input type="hidden" id="id_curso_buscar_interesado" value="${curso.id_curso}">
                <div class="form-group me-2">
                    <input type="text" class="form-control" id="nombre_interesado_curso_search" placeholder="Nombre" autofocus>
                </div>
                <div class="form-group me-2">
                    <input type="text" class="form-control" id="apellido_interesado_curso_search" placeholder="Apellido" autofocus>
                </div>
                <button class="btn btn-outline-success me-2" type="submit">Buscar</button>
            </form>
        </div>
    </div>
</div>

<div class="row justify-content-center mt-4">
    <div>
        <h5>Curso: "Nombre de otro curso"</h5>
        <hr>
        <div class="interesados_search">
            <form action="javascript:void(0);" onsubmit="buscar_interesados_curso(event)" class="d-flex">
                <input type="hidden" id="id_curso_buscar_interesado" value="2">
                <div class="form-group me-2">
                    <input type="text" class="form-control" id="nombre_interesado_curso_search" placeholder="Nombre" autofocus>
                </div>
                <div class="form-group me-2">
                    <input type="text" class="form-control" id="apellido_interesado_curso_search" placeholder="Apellido" autofocus>
                </div>
                <button class="btn btn-outline-success me-2" type="submit">Buscar</button>
            </form>
        </div>
    </div>
</div>

5
  • imgur.com/a/PtvCc3F el codigo lo deje asi y me tira form.getElementById is not a function el 17 oct. 2022 a las 16:07
  • @LucasLeone, tienes razón, no recordaba que ese método está disponible solo en el documento, modifiqué la respuesta para usar querySelector() y ya debe funcionar sin problema.
    – Triby
    el 17 oct. 2022 a las 17:13
  • para el primer curso listado si me manda el ID, para el resto no manda el ID, y cuando pongo buscar en el primero me salta un error que la consulta en la DB manda como argumento todos los ID de los cursos el 17 oct. 2022 a las 17:31
  • @LucasLeone, por favor edita tu pregunta para poner el código actualizado. Recuerda que hay que quitar la línea document.getElementById('id_curso_buscar_interesado').value = curso.id_curso; donde creas el formulario de curso.
    – Triby
    el 17 oct. 2022 a las 17:51
  • ahi actualice el codigo con todo lo nuevo el 18 oct. 2022 a las 19:17

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.