Mi función de búsqueda asíncrona está incrustada en names.php y cuando activo la función me lleva al punto final, PUBLICA en: change-name.php. Quiero permanecer en la página de nombres.php pero actualizar esa página después de que se haya ejecutado la función de búsqueda.
Estoy haciendo clic en el espacio a continuación para abrir un campo de texto donde agrego un nombre y hago clic en el botón:
<span onclick="addGuestName(this)"> <button class="addPaxName btn btn-xs btn-warning">ADD</button>Esto funciona perfectamente bien. Y actualiza el nombre, pero soy transportado a la página /cambiar-nombre.php después de hacer clic en el botón AÑADIR.
Mi respuesta deseada es permanecer en la página original con una actualización de página después de que se haya completado la función de búsqueda. ¿Cómo obtengo este resultado?
async function updateGuestName(paxid,name){ paxIDbody = '{"pxid": "' + paxid + '", "name": "' + name + '"}'; console.log("PaxID:", paxIDbody); try { const settings = { method: "POST", headers: { "Content-type": "application/json; charset=UTF-8" }, body: paxIDbody, }; const response = await fetch( "/change-name.php", settings ); const data = await response.json(); console.log("DATA: ",data); } catch (error) { console.log("ERROR: ",error); } } function addGuestName(obj) { const itemClicked = obj; const paxid = obj.id; const addPaxName = itemClicked.nextElementSibling; const addPaxNameButton = itemClicked.nextElementSibling; addPaxNameButton.style.display = 'inline-block'; var addPaxNameField = document.createElement('input'); addPaxNameField.setAttribute('type', 'text'); addPaxNameField.setAttribute('name', 'visitorNameSurname[]'); addPaxNameField.setAttribute('placeholder', 'Enter Name & Surname'); itemClicked.parentNode.insertBefore(addPaxNameField, itemClicked.nextSibling); addPaxNameField.setAttribute("required", "required"); addPaxNameButton.addEventListener('click', () => { const name = addPaxNameField.value; updateGuestName(paxid,name); }) }Mi punto final de PHP devuelve JSON después de la actualización de la base de datos:
header('Content-type:application/json;charset=utf-8'); $myObj=new \stdClass(); $myObj->status = $status; $myObj->message = $message; $myJSON = json_encode($myObj); echo $myJSON;El tipo de botón predeterminado es enviar. Use onsubmit con event.preventDefault() dentro de la devolución de llamada onsubmit . Si no necesita la validación de formulario del navegador, puede usar type="button" más directo. Para actualizar la página, mire location.reload() .
addPaxNameButton.addEventListener('click', (e) => { e.preventDefault(); const name = addPaxNameField.value; updateGuestName(paxid,name); })