Saludos comunidad, tengo el siguiente problema,
estoy probando como realizar la carga de una imagen cuando se utiliza ajax, en un proceso complejo, pero la segunda vez que apreto el boton la imagen ya no se muestra si no se muestra en blanco.
Codigo JQuery:
Código:
<script type="text/javascript">
$(document).ready(function () {
//Eventos Globales para Ajax
$(document).bind("ajaxSend", function () {
$("#resultado").html($('#carga').show());
}).bind("ajaxComplete", function () {
$('#carga').hide();
});
$('#btnCarga').click(function () {
$.ajax({
url: 'EfectoCargaAjax2.aspx/DevuelveCadena',
data: '{valor:"hola"}',
type: 'POST',
dataType: 'json',
contentType: "application/json; charset=utf-8"
}).done(function(data){
var Valor = data.d;
console.log(Valor);
$('#resultado').html(Valor);
}).fail(onError);
});
function onError(jqXHR, textStatus) {
alert(jQuery.parseJSON(jqXHR.responseText).Message);
}
});
</script>
Código:
<form id="form1" action="EfectoCargaAjax2.aspx" method="post">
<h1>Efecto de Carga 2 Ajax</h1>
<input type="button" id="btnCarga" value="Carga" />
<div id="resultado">
<p>Esperando que cargue la imagen</p>
</div>
<div id="carga" class="oculta">
<p><img src="images/ajax-loader.gif" /></p>
</div>
</form>
Código:
.oculta
{
display:none;
}
Gracias por su tiempo.