2 errores de novado

[Anonimo12]

Buenos días:

Tengo dos pequeños errores con AJAX, muy tontos, el código en sí tiene solo unas pocas líneas. Os explico con comentarios lo poco que tiene:

Código Javascript:

function comprobacion() {
    var loading = document.getElementById('bloque-loading'); //Bloque que contiene un icono animado de "cargando". La opacidad por defecto es 0, se la pongo a uno cuando se llama a esta función de manera que mientras se ejecuta aparezca la animación "cargando"
    loading.style.opacity = '1'; //Pongo la opacidad de la animación a 1 para que se muestre el icono cargando
    var contenido = document.getElementById('contenido'); //Datos que vamos a enviar con AJAX
    var file = 'comprobacion.php'; //Fichero al que se llama desde AJAX
 
    $.ajax({
        type: "post",
        url: file,
        data: {contenido: contenido}, 
        async: false,
        success: function(result) {
            if(result == 'exist') alert('Este fragmento ya existe');
            else alert('Este fragmento no existe');
        }
    });
 
    loading.style.opacity = '0'; //Ya ha terminado la función, por tanto oculto la animación "cargando"
}
 
document.getElementById('formulario').addEventListener('submit', comprobacion, true); //Cuando se presiona el botón submit del formulario, llama a la función anterior
 

Código HTML:

<form id="formulario" method="POST">
    <input id="contenido" type="text"/>
    <input id="boton-submit" type="submit" value="enviar" />
    <div id="bloque-loading">(AQUÍ VA LA ANIMACIÓN, OBVIO EL CÓDIGO PORQUE ES LARGO Y NO ES RELEVANTE)</div>
</form>
 

Como veis el código es realmente sencillo, no tiene nada, y ahí van los dos problemas que tengo:

1. Cuando se presiona el botón submit se llama a la función correctamente, sin embargo al ejecutarse se recarga la web, cosa que no quiero (por eso utilizo AJAX, no quiero recargar la web). He leído decenas de posts y lo más que encuentro es cambiar el submit por un button lo cual me crea otros problemas y según tengo entendido no es correcto.

2. La animación de "cargando" que debe aparecer mientras se ejecuta la función no se muestra correctamente, me explico: Le cambio la opacidad y no se muestra, sin embargo si después llamo a un "alert()" entonces si se muestra. Es muy raro, ya que la animación funciona perfectamente pero después de cambiar la opacidad hay que poner un "alert()" (lo he descubierto por casualidad) para que se actualicen los estilos.

Gracias de antemano. Un cordial saludo.

[Alexis88]

Para evitar el envío de los datos del formulario, utiliza el método preventDefault.

Código Javascript:

document.getElementById('formulario').addEventListener('submit', function(event){
    event.preventDefault();
    comprobacion();
}, true);
 

Y para el control de la animación, te recomiendo utilizar los métodos ajaxStart y ajaxStop.

Código Javascript:

$(document).ajaxStart(function(){
    $("#bloque-loading").fadeIn("slow");
}).ajaxStop(function(){
    $("#bloque-loading").fadeOut("slow");
});
 

Saludos