Foros del Web » Programando para Internet » Javascript » Frameworks JS »

2 errores de novado

Estas en el tema de 2 errores de novado en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 30/01/2015, 02:07
 
Fecha de Ingreso: abril-2009
Ubicación: En foros del web, normalmente en Web general, HTML y CSS.
Mensajes: 258
Antigüedad: 8 años, 6 meses
Puntos: 3
2 errores de novado

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:
Ver original
  1. function comprobacion() {
  2.     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"
  3.     loading.style.opacity = '1'; //Pongo la opacidad de la animación a 1 para que se muestre el icono cargando
  4.     var contenido = document.getElementById('contenido'); //Datos que vamos a enviar con AJAX
  5.     var file = 'comprobacion.php'; //Fichero al que se llama desde AJAX
  6.  
  7.     $.ajax({
  8.         type: "post",
  9.         url: file,
  10.         data: {contenido: contenido},
  11.         async: false,
  12.         success: function(result) {
  13.             if(result == 'exist') alert('Este fragmento ya existe');
  14.             else alert('Este fragmento no existe');
  15.         }
  16.     });
  17.  
  18.     loading.style.opacity = '0'; //Ya ha terminado la función, por tanto oculto la animación "cargando"
  19. }
  20.  
  21. 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:
Ver original
  1. <form id="formulario" method="POST">
  2.     <input id="contenido" type="text"/>
  3.     <input id="boton-submit" type="submit" value="enviar" />
  4.     <div id="bloque-loading">(AQUÍ VA LA ANIMACIÓN, OBVIO EL CÓDIGO PORQUE ES LARGO Y NO ES RELEVANTE)</div>
  5. </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.
__________________
¿Por qué Anónimo?, porque como está el mundo no podemos considerarnos humanos...
  #2 (permalink)  
Antiguo 30/01/2015, 17:41
Avatar de Alexis88
Colaborador
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.233
Antigüedad: 5 años, 11 meses
Puntos: 859
Respuesta: 2 errores de novado

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

Código Javascript:
Ver original
  1. document.getElementById('formulario').addEventListener('submit', function(event){
  2.     event.preventDefault();
  3.     comprobacion();
  4. }, true);

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

Código Javascript:
Ver original
  1. $(document).ajaxStart(function(){
  2.     $("#bloque-loading").fadeIn("slow");
  3. }).ajaxStop(function(){
  4.     $("#bloque-loading").fadeOut("slow");
  5. });

Saludos
__________________
«Laissez faire et laissez passer, le monde va de lui même»

Etiquetas: ajax, errores, formulario, funcion, input, javascript, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:56.