[SOLUCIONADO] Botón que hace cálculos necesita recargar la página

[melkart239]

Salud y saludos.
He creado una página web, sólo en modo local dado que no será necesario alojarla en un servidor, con un formulario en el que se ponen las unidades de cada producto.
En ese formulario hay un botón que al pulsarlo, con javascript, hace los cálculos que necesito y los pone en el DOM en div que está vacío. Todos mediante .append en un div que en html está vacío.
Mi problema es que si arranco la página en el navegador (primer caso Firefox) y meto los valores en el formulario, pulso sobre el botón, me hace los cálculos perfectamente. Pero si cambio algún valor del formulario me veo obligado a "recargar" la página y volver a pulsar el botón. No es muy fácil para el usuario y además en Chrome (segundo caso) borra los datos que puse en el formulario y toca volver a ponerlos, lo que aun es peor para el usuario.
He probado a poner en el código javascript del botón inmediatamente después del click
"location.reload()", "window.location.reload()", "document.location.reload()".
Hecho esto en Chrome no veo nada, pero en Firefox me da tiempo a ver, al clickar sobre el botón, que hace los cálculos pero desaparecen.
Espero haberme explicado y gracias por adelantado por vuestra ayuda. Y cuidaros mucho.

[tuadmin]

quieres hacer persistencia de datos?? en tu boton de procesos, almacena esos valores en un localStorage, para que al recargar la pagina, si encuentra el localStorage lleno este los vuelva a poner en su lugar

y como nota, el localStorage no funciona con dominio "localhost", tiene que ser con IP o un dominio o dominio local

[melkart239]

¡Qué buena idea! No conocía esa posibilidad. Muchas gracias.
A ver si lo he entendido. El proceso sería:
1) meto los datos en el formulario
2) al clickar sobre el botón lo primero que hago el localStorage
3) luego el reload
4) recupero los datos de localStorage
5) luego se hacen los cálculos que necesito
¿Es así?

[melkart239]

He probado a hacerlo así y sigue pasando lo mismo. Al clickar sobre el botón aparecen los cálculos por un instante pero desaparecen :(

[tuadmin]

Iniciado por melkart239

He probado a hacerlo así y sigue pasando lo mismo. Al clickar sobre el botón aparecen los cálculos por un instante pero desaparecen :(

en ese caso me das a suponer que estas haciendo algo asi

Código Javascript:

element_html.addEventListener("click",function(e){
     //tu megaproceso
    
});
 

y lo mas seguro es que tu elemento_html sea un BOTON de formulario que hace un SUBMIT

por lo que si no quieres que se ENVIE esos datos a un Script de servidor PHP, NODEJS, etc

tienes que evitar la propagacion de tu Evento

[HIGHLIGHT="Javascript"]
element_html.addEventListener("click",function(e){
e.preventDefault();//con esto ya no se propagara el click
//tu megaproceso

});

[melkart239]

Pido disculpas, he cometido el error de no poner el código para mejor explicación del problema.
En html, el formulario (abreviado)

Código HTML:

<form method="post" action="#">
	<div class="paunidades">
		<label>ACEITE </label><input id="unidadesp1" class="unidades" type="number" size="6" value="0">
<!-- y otros productos-->
	</div>
	<div class="paboton">
		<button type="button" id="calc_palets" name="calc_palets">CALCULAR</button>
	</div>
</form> 

En el script (también abreviado)

Código:

$(document).ready(function(){
	//palets iniciales de Europa, nombre, filas, unidadesxfilas, total unidades, altura caja, resistencia
	var p1 = ["aceite", 5, 11, 55, 28.5, 1];
//el resto de los arrays de productos
	$('#calc_palets').on('click', function(e){
		e.preventDefault();
		//++ SE AÑADEN al array PALETS COMP, UNID QUE QUEDAN, FILAS SUELTAS AL ALZA, ALTURA FILAS SUELTAS, unidades asignadas, (si el palet incompleto cabe en la estantería)
		anadir_calculos(p1, '#unidadesp1');
}
function anadir_calculos(rp1, id_prod){//anadir es añadir
	//coge las unidades del input
	var unidades = parseFloat($(id_prod).val());
	//añade los posibles palets completos
	var palets = parseInt(unidades/rp1[3]);
	rp1.push(palets);
	//añade las cajas sueltas
	var sueltas = unidades%rp1[3];
	rp1.push(sueltas);
	//añade las filas al alza
	var filas = Math.ceil(sueltas/rp1[2]);
	rp1.push(filas);
	//añade la alturas de las cajas al alza
	var alt_sueltas = filas*rp1[4];
	rp1.push(alt_sueltas);
	//añade las unidades otorgadas, posición 10
	rp1.push(unidades);
	//pone las filas no al alza, posición 11
	rp1.push(parseInt(sueltas/rp1[2]));
	//pone las cajas fuera de fila, posicion 12
	rp1.push(unidades%rp1[2]);
}
//Y para poner el producto en html, hago esto (también abreviado, he omitido las variables)
$('#nocombi').append("<div class='sobras'><div><p><span>"+todos_prod[i][5]+" - "+todos_prod[i][0]+"</span>. "+fila_sobra+" filas del palet original y "+caja_sobra+" cajas del palet original. Altura: "+todos_prod[i][9]+".</p></div>"+hecho+"</div>");

Espero que así sea más fácil.
He puesto tu sugerencia del preventdefault. Con él lo que ocurre es:
- pongo una cantidad en aceite y le doy a calcular, lo hace bien
- pongo una cantidad en el siguiente producto y le doy a calcular
- repite aceite 2 veces y el otro producto no aparece
- recargo la página en el navegador, le doy a calcular y lo hace bien
Gracias de nuevo.

[tuadmin]

jeje sube tus archivos html y javascript involucrados en un ftp, servicio online etc, para dar un vision general, a veces es dificil explicar un problema

para compartir codigo tienes muchas opciones desde complejas a sencillas

como

https://docs.github.com/en/github/wr...creating-gists

o

https://codepen.io

[melkart239]

En github, es la primera vez que lo uso. Espero que la url sea ésta:
https://github.com/melkart-ba/productos.git

[melkart239]

He solucionado mis problemas. Eran dos fallos.
Problema 1 (necesidad de refrescar la página si cambiaba algo en el formulario):
- lo que hacía era crear un array, al inicio de $document.ready, para cada producto con sus datos básicos (altura, unidades por fila, etc)
- luego al hacer click en "calcular", con el ánimo de preservar los datos básicos iniciales, creaba otro array por producto (y aquí estaba el fallo) igual al original. Es decir, si los datos básicos del producto 1 era el array "po1" hacía "var p1=po1". Y así con el resto de productos.
- luego hacía las posibles combinaciones por alturas y si 2 productos combinaban, ponía sus alturas a 0 para que ya no entraran otra vez en los cálculos de más combinaciones de productos
- ¿qué ocurría?
- que si ponía la altura del array del producto para los cálculos "p1" a 0, también se ponía a 0 la altura del array original "po1"
- si cambiaba algún valor de un producto en el formulario y volvía a darle al botón de calcular, dado que los productos que combinaban tenían altura=0 ya no entraban en los cálculos
CONCLUSIÓN: no es lo mismo hacer "var p1=p01" que "var p1=po1.slice(x, y)". Porque digamos que slice no "vincula" los valores del array original y el del "destino".
Error de novato.

Problema 2 (al darle al botón de calcular por segunda vez se repetían las combinaciones entre productos):
- lo que hacía era al combinar dos o más productos, según alturas, mediante un "append" los ponía en su div correspondiente
- al darle por segunda vez a calcular, ya estaban ahí y volvían a repetirse
- lo solucioné con un "remove" en los divs correspondientes
CONCLUSIÓN: si añades algo en el DOM y necesitas "recalcular" lo hecho, no se te olvide eliminarlo antes.
Error de novato.

Espero que mi experiencia os sirva de ayuda.
Gracias por todo y cuidaos mucho.