JQUERY -> cambiar contenido de un DIV usando INPUT SUBMIT del FORM

[quico5]

Hola, tengo este formulario de email que estoy adaptando para android/iphone

lo que me gustaría...
al darle enviar y mientras no reciba la respuesta de PHP, en el <div id="result"> ponga ENVIANDO...

supongo que tendria que editar, pero no se como se hace, gracias

$('#loading').show();
$('#result').hide();

gracias

<center><div id="loading"></div><div id="result"></div></center>

<form method="post" action="envio.php" id="form">
<div>

<select name="destinatario" style="width:100%;">
<option value="">Destinatario:</option>
<option value="vigo">Anhida Vigo</option>
<option value="ferrolterra">Anhida FerrolTerra</option>
<option value="coruna">Anhida Coru&ntilde;a</option>
<option value="quico">Webmaster</option>
</select>

<input type="text" name="nombre" value="Nombre" placeholder="Nombre:">
<input type="text" name="remitente" value="Email" placeholder="Email:">
<input type="text" name="asunto" value="Asunto" placeholder="Asunto:">
<div><textarea name="msj" placeholder="Mensaje:">Texto</textarea></div>
<input type="submit" id="enviar" value="Enviar">
</div>
</form>

<script language="javascript" src="jquery-1.3.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('slow');
});
$('#form').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('#result').html(data);

}
})

return false;
});
})
</script>

[kikeking1]

No termino de entender tu problema. En principio todo parece estar bien (asumiendo que la respuesta llega del servidor bien).

Lo unico que veo, es que tienes dos contenedores (supongo que escondidos con CSS o ocultado previamente con jquery) uno para el resultado (result) y otro para la carga (loading). Pero... esos contenedores segun pones estan vacios, por lo que seguramente se muestren y se escondan correctamente, pero como no hay nada que cambie la aparecia, pues no se nota efecto alguno.

añade el mensaje "ENVIANDO" dentro del div de loading asi:

Código HTML:

<center><div id="loading">ENVIANDO</div><div id="result"></div></center> 

Aunque personalmente, no lo haria de la forma que lo haces, si no que simplicaria el proceso a un unico contendor y simplemente haria el $().ajaxStart() y una vez terminada la funcion ajax, carga el resultado en el mismo contenedor (al ejecutar la funcion .html() sobre un contenedor, cambias todo su contenido, por lo que al meter el resultado el mensaje de "ENVIANDO" desaparecera.

seria una cosa asi:

Código:

<center><div id="result"></div></center> 

Código:

<script language="javascript" src="jquery-1.3.min.js"></script>
<script language="javascript">
$(document).ready(function() {

	$().ajaxStart(function() {
			$('#result').text('ENVIANDO...');
		})

	$('#form').submit(function() {
	
		$.ajax({
			type: 'POST',
			url: $(this).attr('action'),
			data: $(this).serialize(),
			success: function(data) {
				$('#result').html(data);
				}
			})
	
	return false;
	});

})
</script>

Si en lugar de cargar el simple texto de "ENVIANDO..." quieres meter una imagen, (tipicas rallitas de carga) usa html()

Código:

$().ajaxStart(function() {
    $('#result').html('<img src="img/loading.gif" alt="ENVIANDO..." />');
})

Prueba y ya nos comentaras que tal te fue. Suerte!

[quico5]

Funciona correctamente, solo intento hacerle una pequeña modificación...

muchas gracias por responder, lo estoy haciendo en www.movil.anhida.org para teléfonos móviles modernos, como ANDROID o IPHONE

tengo un gif animado en forma de rueda para la espera de la respuesta del archivo PHP, pero en android la rueda no na vueltas, y para ajustar el espacio entonces pensé en reemplazar la rueda por el texto que ocupa menos verticalmente

también estaba pensando en anular uno de los contenedores como me recomiendas

gracias por la orientacion, lo acabo de dejar así

$('#loading').hide();
$('#result').hide();
$().ajaxStart(function() {
//$('#loading').show();
//$('#result').hide();
$('#result').show();
}).ajaxStop(function() {
//$('#loading').hide();
$('#result').fadeIn('slow');
});

<center><div id="loading"></div><div id="result">Enviando email...</div></center>

una ultima pincelada ¿y como seria una función temporizada que a los 30 segundos recupere su texto y se oculte el DIV?

ajaxStop(function() {
$('#result').text('ENVIANDO...');
$('#result').hide();
}

[kikeking1]

No entiendo porque hay un fadeIn() en el ajaxStop(), en todo caso seria un fadeOut, para hacer que el cuadro de "Enviado" desaparezca.

Si lo planteas de la segunda forma que te indique, tendras siempre visible el contenido, y cuando hagas una nueva llamada a ajax, se pondra el texto de "Enviando", cuando se carge el contenido, desaparece y se cambia por el contenido, asi todas las veces que hagas una llamada a ajax.

De todos modos, si no quieres tocar eso y seguir con el planteamiento que tienes (aunque sigo pensando que el otro metodo es mejor, pues el texto solo aparece el tiempo que debe aparecer, si pones que tarde 30 segundos, aunque el contenido se haya cargado, seguira apareciendo el mensaje de "ENVIANDO" durante esos 30 segundos.. y por no decir, si la aplicacion se pausa, mientras aparece este mensaje [es decir que no se carge el contenido o no sea acesible hasta que "ENVIANDO" desaparezca, en cuyo caso me parece que haces sufrir a los usuarios innecesariamente), para hacer un temporizado, te recomiendo que uses setTimeOut.

Código HTML:

ajaxStop(function() {

setTimeout(function(){
             $('#result').hide();  //Primero escondemos el contenedor
             $('#result').text('ENVIANDO...'); //Cambiamos el texto
      }, 30000); //1seg = 1000ms

}

Pongo que primero se oculte el contenedor, para que no aparezca de nuevo en la pantalla el mensaje, luego añadiriamos el mensaje.

Buena suerte con el proyecto, espero que te sirva la ayuda.

[quico5]

perdona que me explicara tan poco

me gustan tus sugerencias pero no se gran cosa de JS, menos de JQUERY, este SCRIPT no lo hice yo, y no se que hace fadeOut supongo que dice algo de hacer a la salida, el temporizado es para que desaparezca el mensaje de Enviado al cabo de un tiempo, si no se llega a ver el Mensaje Enviando... mejor, significa que ha funcionado rápido la comunicación con el servidor

Quizas el fadeIn venga por defecto para poner el mensaje Enviado indefinidamente, cosa que creo que con que dure 30 segundos llega para informar al remitente

[quico5]

creo que lo voy pillando, ¿es correcto así? gracias

puse dos temporizadores, pero antes de cumplirse se corta a los 4 segundos

<script language="javascript" src="http://movil.anhida.org/jquery-1.3.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$('#loading').hide();
$('#result').hide();
$().ajaxStart(function() {
//$('#loading').show();
//$('#result').hide();
$('#result').show();
setTimeout(function(){
$('#result').hide(); //Primero escondemos el contenedor
$('#result').text('Internet inaccesible'); //Cambiamos el texto
}, 10000); //1seg = 1000ms
}).ajaxStop(function() {
//$('#loading').hide();
$('#result').fadeIn('slow');
$('#result').show();
});
$('#form').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('#result').html(data);
setTimeout(function(){
$('#result').hide(); //Primero escondemos el contenedor
$('#result').text(''); //Cambiamos el texto
}, 10000); //1seg = 1000ms

}
})

return false;
});
})
</script>

[kikeking1]

Hechale un vistazo a la documentación de jquery, que seguro la encuentras interesante. http://api.jquery.com/category/effects/

fadeIn() a grandes rasgos, lo que hace es un transicion de opacidad (de 0 a 100) que hace que un elemento oculto se muestre.

fadeOut() es lo contrario, hace que el elemento desaparezca con una transicion de 100 a 0 de opacidad.

Por lo que entiendo de tu idea, en ese momento el contenedor deberia desaparecer y no aparecer, por eso pensaba que debia ser alrevez.

lo de los temporizadores, es porque al lanzarlo en el ajaxStart() el temporizador empieza a contar (una vez llamada a la funcion setTimeOut() , se espera los X seg que le indiques, y ejecuta su contenido) pero claro, esto entra en conclicto con el concepto de ajaxStart(), ya que esta funcion se ejecuta al comenzar una llamada ajax, pero como presicamente la gracias de ajax es su a (asincronimus) el programa javascript sigue ejecutandose, por lo tanto tu contador (a 10 seg) esta contando, pero el programa realmente ha enviado ya el mensaje y ha devuelto la respuesta de servidor antes de ese tiempo, disparandose nuevas funciones (ajaxStop, el segundo contador, varias veces que escondes y muestras contadores).

Sinceramente no veo necesario temporizadores en ese script, si sigues la linea que te dije al principio veras que te complicas menos la vida, el script es mas efectivo y gasta menos recursos y peso del script.