Parametro de funcion load() Ajax no ejecuta bien

Iniciado por Lupin, 20 Abril 2013, 01:53 AM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

Lupin

20 Abril 2013, 01:53 AM
Hola camaradas
Resulta que tengo un div en este caso "cargando" y quiero que se cargue recien cuando llega la respuesta desde carga_filtrada.php y luego usar esos datos para por ejemplo sacar un mensaje cualquiera, supuestamente el tercer argumento de load() puede ser una funcion que se ejecuta luego que load() ha cargado, pero el asunto es que la funcion que he llamado "aviso()" se ejecuta antes de que los datos esten en el div "cargando"  cuando primero debe esperar que se cargue y luego ejecutarse...espero que me puedan echar una mano ::)
Código (javascript) [Seleccionar]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> 


<script type="text/javascript">

$(document).ready(function() {
  // Enable hover effect on the style switcher buttons.
  $('#switcher .button').hover(function() {
    $(this).addClass('hover');
  }, function() {
    $(this).removeClass('hover');
});
});

</script>



<script type="text/javascript">
$(document).ready(function() {
$("#cargando").click(function(event) {    
$("#cargando").load("carga_filtrada.php",aviso());
});
});

function aviso(){

var valores = $("#cargando").tml();
var msgleft = valores.substring(0, 1).trim()
var msgright =valores.substring(1, 2).trim()
alert(msgleft)
if  (msgleft =='0')
    {
$("#switcher-default").removeClass('button');
$("#switcher-default").addClass('desabilitado');
alert("inicio deshabilitado valor:" + msgleft);
}else{
$("#switcher-default").removeClass('desabilitado');

alert("inicio habilitado valor: !!" + msgright);
}

}
</script>


<style type="text/css">

#cargando {
  float: left;
  background-color: #ddc;
  border: 1px solid #000;
  margin: 10px;
  padding: 10px;
  font-size: .9em;
}
#switcher {
  float: right;
  background-color: #ddc;
  border: 1px solid #000;
  margin: 10px;
  padding: 10px;
  font-size: .9em;
}
#switcher .button {
  width: 100px;
  float: left;
  text-align: center;
  margin: 10px;
  padding: 10px;
  background-color: #fff;
  border-top: 3px solid #888;
  border-left: 3px solid #888;
  border-bottom: 3px solid #444;
  border-right: 3px solid #444;
}
#switcher .hover {
  cursor: pointer;
  background-color: #afa;
}

.desabilitado {
  cursor: pointer;
  color:#dcdcdc;

}




</style>
</head>

<body>

<div id="switcher">
        <h3>Style Switcher</h3>
        <div class="button selected" id="switcher-default">
          <b>Primero</b>
        </div>
        <div class="button" id="switcher-narrow">
          <b>Anterior</b>
        </div>
        <div class="button" id="switcher-large">
          <b>Comentarios</b>
        </div>
        <div class="button" id="switcher-large">
          <b>Siguiente</b>
        </div>
        <div class="button" id="switcher-large">
  <b>Final</b>
        </div>
</div>

<div id="cargando">
Cargando     
</div>
</body>
</html>


Lupin

#1
20 Abril 2013, 15:37 PM
¿ alguien puede darme alguna sugerencia ?

#!drvy

#2
20 Abril 2013, 17:14 PM
Hola,

Documentación:
Cita de: http://api.jquery.com/load/Callback Function
If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.
Código (javascript) [Seleccionar]
$('#result').load('ajax/test.html', function() {
   alert('Load was performed.');
});
In the two examples above, if the current document does not contain an element with an ID of "result," the .load() method is not executed.

Básicamente te dice que si añades un callback (function), se ejecutara una vez termine de cargarlo todo.

Código (javascript) [Seleccionar]
$("#cargando").load("carga_filtrada.php",function(){
   aviso();
});

Saludos

Lupin

#3
20 Abril 2013, 18:14 PM
Gracias por la respuesta amigo.
Pero segun lo que me has documentado no entiendo por que el callback ("aviso()")se dispara sin que los datos hayan llegado al div especificado y envez de recuperar la data entrante recupera un dato que ya estaba alli predeterminadamente

#!drvy

#4
20 Abril 2013, 18:25 PM
Jquery entiende como callback una función anónima (tal y como te lo he mostrado). Osease, espera que la función se declare dentro del propio callback no que ya este definida. Como lo tenias/tienes tu, la función se dispara nada mas se haga el request sin esperar a que haya completado o devuelto nada.

Tienes mas info aquí: http://www.w3schools.com/jquery/jquery_callback.asp

PD: tambien tienes un error en la linea 33.
Código (javascript) [Seleccionar]
var valores = $("#cargando").tml();

es
Código (javascript) [Seleccionar]
var valores = $("#cargando").html();

Saludos

Lupin

#5
20 Abril 2013, 19:11 PM
Genial amigo tenias razon !!
Mi error fue declarar la funcion fuera del Callback , yo estaba dandome vueltas al asunto ;) incluso estaba pensando hace una espera de 3 segundos dentro de la funcion aviso() pensando que los datos solo se estaban demorando o que el Alert era demasiado rapido.
Imprimir
Ir Arriba Páginas1
Acciones del Usuario