Foros del Web » Programando para Internet » Javascript »

Simbolo de cargando con Javascript

Estas en el tema de Simbolo de cargando con Javascript en el foro de Javascript en Foros del Web. hola, buenas. Tengo un problema, tengo una pagina que por lo general para mostrar algunos resultados se tarda un poco y necesito mostrar al usuario ...
  #1 (permalink)  
Antiguo 18/03/2009, 15:05
(Desactivado)
 
Fecha de Ingreso: enero-2009
Mensajes: 103
Antigüedad: 15 años, 3 meses
Puntos: 0
Simbolo de cargando con Javascript

hola, buenas. Tengo un problema, tengo una pagina que por lo general para mostrar algunos resultados se tarda un poco y necesito mostrar al usuario un simbolo que indica que la pagina se esta cargando. El detalle es que yo necesito q ese simbolo se muestre justo despues que el usuario selecciona una de las opciones de un select. Hasta ahora lo q he hecho es que salga el simbolo de cargando pero antes de que el usuario seleccione cualquier opcion del select y por supuesto no es lo q se quiere. Aqui les dejo el codigo con el que muestro la pagina:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Region Capital</title>
<script language="javascript" type="text/javascript" src="ajax.js"></script>

<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga()
{
document.getElementById("imagen").style.display="n one";
}
</script>
</head>
<body>
<br>
<div id="sele">
Seleccione una Central:&nbsp;&nbsp;
<select name="codrf" id="codrf" onchange="javascript:accion('redes2.php','dibujo', 'codrf='+$('#codrf').attr('value'))">
<option value="0000">-----------</option>
<?php
for($z=0;$z<$k;$z++)
{?>

<option value="<?php echo $resul1[$z].$resul2[$z];?>"><?php echo $resul2[$z];?>
</option>

<?php
};
?>
</select>&nbsp;&nbsp;
</div>

<div id="dibujo">
<div id="imagen" align="center">
<img src="imagenes/cargando.gif" alt="Cargando...">
</div>
</div>

</body>
</html>

Espero q me puedan ayudar, gracias...
  #2 (permalink)  
Antiguo 18/03/2009, 16:43
(Desactivado)
 
Fecha de Ingreso: enero-2009
Mensajes: 103
Antigüedad: 15 años, 3 meses
Puntos: 0
Respuesta: Simbolo de cargando con Javascript

Bueno lo voy a plantear de otra forma, yo quiero que me ayuden en un codigo que me permita mostrar el simbolo que indica que la pagina se esta cargando cuando se presiona un boton, es decir justo despues de presionar el boton quiero mostrar ese simbolo mientras aparece el resultado de lo que se trae con la accion del boton, por favor ayudenme con eso, gracias!!
  #3 (permalink)  
Antiguo 18/03/2009, 16:53
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Simbolo de cargando con Javascript

Hola:

Curioso código... y algo complicado de interpretar... tienes alguna librería, pero también usas getElementById... y también se ve código php... aquí solo sirve código javascript...

La cuestión es que tengas la imagen "cargando..." oculta y la muestres con el evento onchange... y si esa imagen es un tag img, programar su evento load para volver a ocultar esa imagen... la verdad es que tu código no llego a entenderlo...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 18/03/2009, 16:54
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años
Puntos: 839
Respuesta: Simbolo de cargando con Javascript

Depende mucho de la acción del botón.

Por ejemplo, si el botón usa AJAX, puedes mostrar el "Cargando..." en el evento onclick y esperar el readyState 4 del objeto XMLHttpRequest() para ocultarlo.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #5 (permalink)  
Antiguo 18/03/2009, 17:06
(Desactivado)
 
Fecha de Ingreso: enero-2009
Mensajes: 103
Antigüedad: 15 años, 3 meses
Puntos: 0
Respuesta: Simbolo de cargando con Javascript

Hola David
Mira estoy tratando de hacer lo mismo pero con un boton de esta forma:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Consulta de Radios</title>

<link rel="stylesheet" type="text/css" media="screen" href="esti.css" />

<script language="javascript" type="text/javascript" src="ajax.js"></script>

<script>
function accion(url,div,cadena)
{

if(document.getElementById('radio').value=="")
{
alert("Debe colocar el nombre a Buscar");
document.getElementById('radio').focus();
}
else
{

var datos = cadena;
var div="#"+div;
$.ajax
(
{
async:true,
url: url,
type: 'POST',
dataType: 'html',
data: datos,
cache: false,
success: function(respuesta)
{
$(div).html(respuesta);
}
}
);

}
}
function detectarCarga()
{
document.getElementById("imagen").style.display="n one";
}
function accion2(url,div,cadena)
{

var datos = cadena;
var div="#"+div;
$.ajax
(
{
async:true,
url: url,
type: 'POST',
dataType: 'html',
data: datos,
cache: false,
success: function(respuesta)
{
$(div).html(respuesta);
}
}
);
}

</script>

</head>

<body>

<div id="todo">

<div id="membrete">

<div id="logo">
</div>
</div>
</div>


<br>
<h3><p align="center">Ingrese el sitio a Buscar</p></h3>
<br>

<input type="text" name="radio" id="radio">
<input type="button" name="Buscar" value="Buscar" onclick="javascript:accion('tablaradio.php','respu esta','radio='+$('#radio').attr('value'))">

<br>
<br>

<div id="respuesta" align="center">
<img src="imagenes/cargando.gif" alt="Cargando...">
</div>

</body>
</html>

en ese codigo como haria como dices tu colocar el mensaje "cargando..." en el evento onclick, porfa explicame como lo haria ahi con mi codigo?? gracias
  #6 (permalink)  
Antiguo 19/03/2009, 07:48
(Desactivado)
 
Fecha de Ingreso: enero-2009
Mensajes: 103
Antigüedad: 15 años, 3 meses
Puntos: 0
Respuesta: Simbolo de cargando con Javascript

Como hago para que el simbolo cargando, se vea con la accion del boton?? ayudaaaa plis
  #7 (permalink)  
Antiguo 19/03/2009, 11:15
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años
Puntos: 839
Respuesta: Simbolo de cargando con Javascript

Puedes agregarle style="display: none" al div respuesta. Luego, al comienzo de la función accion() lo muestras usando document.getElementById("respuesta").style.display = "block"
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #8 (permalink)  
Antiguo 19/03/2009, 12:28
(Desactivado)
 
Fecha de Ingreso: enero-2009
Mensajes: 103
Antigüedad: 15 años, 3 meses
Puntos: 0
Respuesta: Simbolo de cargando con Javascript

Gracias David, eres Grande, ya funciona, oye ahora me falta un pequeño detalle para q me quede mas perfecto, y es q la primera vez que presiono el boton lo hace perfecto, luego cuando intento hacer otra consulta borrando el campo con el ultimo nombre y presiono nuevamente el boton ya no sale el simbolo de cargando, es como si necesitara limpiar la tabla que quedo anteriormente y alli mostrar el simbolo nuevamente en espera de la nueva consulta, como crees que lo haria?? solo ese detalle, gracias
PostData:y disculpa lo de abrir otro tema pero a veces escribo sobre el mismo tema y ya nadien me responde mas, entonces abro uno nuevo para ver si se reanuda el debate...
  #9 (permalink)  
Antiguo 19/03/2009, 12:35
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años
Puntos: 839
Respuesta: Simbolo de cargando con Javascript

Es que al cargar en el div el resultado de la petición hecha con AJAX se borra la imagen. Por lo que debes usar innerHTML para volver a colocar la imagen dentro del div antes de mostrarlo.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #10 (permalink)  
Antiguo 19/03/2009, 13:03
(Desactivado)
 
Fecha de Ingreso: enero-2009
Mensajes: 103
Antigüedad: 15 años, 3 meses
Puntos: 0
Respuesta: Simbolo de cargando con Javascript

Pero entonces como seria?? no se si ponerlo en le javascript asi:

document.getElementById("respuesta").innerHTML='<i mg src="imagenes/cargando.gif" alt='Cargando...' />';

Como es?? de verdad no entiendo con el innerHTML
  #11 (permalink)  
Antiguo 19/03/2009, 13:10
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años
Puntos: 839
Respuesta: Simbolo de cargando con Javascript

Sí, así puedes hacerlo, el único problema en ese código es que estás poniendo comillas simples dentro de las comillas simples. Coloca Cargando... entre comillas dobles.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #12 (permalink)  
Antiguo 19/03/2009, 13:20
(Desactivado)
 
Fecha de Ingreso: enero-2009
Mensajes: 103
Antigüedad: 15 años, 3 meses
Puntos: 0
Respuesta: Simbolo de cargando con Javascript

David, colocando eso ya no me muestra nada, ni siquiera el simbolo de cargando, mira asi lo tengo en el javascript:

function accion(url,div,cadena)// funcion para el jquiery
{
//document.getElementById("respuesta").style.display = "block" ;
document.getElementById("respuesta").innerHTML='<i mg src="imagenes/cargando.gif"/>';

var datos = cadena;
var div="#"+div;
$.ajax(
{
async:true,
url: url,
type: 'POST',
dataType: 'html',
data: datos,
cache: false,
success: function(respuesta)
{
$(div).html(respuesta);
}
});
}

y en el html tengo el codigo asi:

<div id="respuesta" align="center" style="display: none">
<img src="imagenes/cargando.gif" alt=""><?php echo "Cargando...";?>
</div>
  #13 (permalink)  
Antiguo 19/03/2009, 13:22
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años
Puntos: 839
Respuesta: Simbolo de cargando con Javascript

¿Para qué tratas de imprimir "Cargando..." con PHP?
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #14 (permalink)  
Antiguo 19/03/2009, 13:32
(Desactivado)
 
Fecha de Ingreso: enero-2009
Mensajes: 103
Antigüedad: 15 años, 3 meses
Puntos: 0
Respuesta: Simbolo de cargando con Javascript

ok, listo ya lo resolvi, deje estas dos lineas:

document.getElementById("respuesta").style.display = "block" ;
document.getElementById("respuesta").innerHTML='<i mg src="imagenes/cargando.gif"/><?php echo "Cargando...";?>';

y en html lo puse asi:

<div id="respuesta" align="center" style="display: none">
<img src="imagenes/cargando.gif" alt=""><?php echo "Cargando...";?>
</div>

y listo, gracias David, eres Grande!!
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 11:51.