Tengo un botón que tiene una identificación de datos con un valor de 1. Necesito pasar esta identificación a getCarDetails.php durante una llamada fetch(). getCarDetails necesita esta identificación para una consulta. El php funciona bien, ya que lo probé en un formulario de envío normal y devuelve el jSON que necesito. Sin embargo, este script no quiere funcionar. He intentado todo.
function loadCarDetails(event) { const id = event.currentTarget.getAttribute("data-id"); const data = new FormData(); data.append("car_id", id); fetch("getCarDetails.php", { method: "POST", data }) .then(response => { if (!response.ok) { throw new Error(`HTTP error ${response.status}`); } return response.json(); }) .then(carDetails => { // ...use the car details here... }) .catch(error => { // ...handle/reject error here... }); } <div class="car-item"> <div class="row"> <p>Ford Fiesta</p> </div> <div class="row"> <button type="button" class="btn" data-id="1">View</button> </div> </div>Dado que sus botones se generan dinámicamente, necesitan una clase adicional que pueda identificar:
<button type="button" class="btn btnview" data-id="1">View</button>Luego, agregue un detector de eventos para ellos al final del javascript:
document.querySelectorAll('.btnview') .forEach((e, i) => e.addEventListener('click', loadCarDetails)); Esto significa que cuando el usuario hace clic en uno de los botones, llamaría a la función loadCarDetails para ese botón.
No está pasando esa función en una devolución de llamada en el controlador de eventos del botón
<div class="row"> <button type="button" onClick={(e) => loadCarDetails(e)} class="btn" data-id="1">View</button> </div>