1. Causa del problema
htmx cuando hace un post, si el elemento que lo realiza está dentro de un form entonces envia todos los datos del form en el request dentro de una estructura "FormData"
Si el form tiene muchso datos y pasamos for nginx (openresty), entonces hacemos un "overflow" del caché del mismo.
ChatGPT y Claude plantean soluciones QUE NO FUNCIONAN que es añadirle algunos de estos parámetros al htmx (aplicados a un botón o un anchor):
hx-include="none"
hx-include="[data-include='never']"
Al final utilizando Claude lo que se hace es realizar un fetch, para simplificar creamos una función para utilizarla igual:
/** * Fetch data from the given endpoint and update the target element with the response HTML. * @param {*} endpoint * @param {*} data * @param {*} targetSelector * @returns */ async function fetchAndUpdate(endpoint, data, targetSelector) { console.log("executing fetchAndUpdate with:", endpoint, JSON.stringify(data), targetSelector); try { const response = await fetch(endpoint, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); const html = await response.text(); const target = document.querySelector(targetSelector); if (target) { target.innerHTML = html; } else { console.warn(`Target element "${targetSelector}" not found`); } return html; } catch (error) { console.error('Fetch error:', error); throw error; } }
y luego la llamamos así:
// ✅ Define the "value" property set value(newValue) { const tab_id= sessionStorage.getItem("id_tab"); const mydata= { sql_id: newValue, my_id: this._parentId, tab_id: tab_id || "" }; fetchAndUpdate( this.url, mydata, this.target ); }
