Poner imagen Cargando.......

Iniciado por madri09, 4 Octubre 2012, 19:58 PM

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

madri09

Hola, quisiera poner a mi cod una imagen de Cargando..... para cuando tenga que buscar muchos registros.
Donde la puedo poner y cúal es la funcion.
Gracias


js.js

Código (javascript) [Seleccionar]

/ javascript Document
var ordenar = '';
$(document).ready(function(){

// Llamando a la funcion de busqueda al
// cargar la pagina
filtrar()

var dates = $( "#del, #al" ).datepicker({
yearRange: "-50",
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
onSelect: function( selectedDate ) {
var option = this.id == "del" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});

// filtrar al darle click al boton
$("#btnfiltrar").click(function(){ filtrar() });

// boton cancelar
$("#btncancel").click(function(){
$(".filtro input").val('')
$(".filtro select").find("option[value='0']").attr("selected",true)
filtrar()
});

// ordenar por
$("#data th span").click(function(){
var orden = '';
if($(this).hasClass("desc"))
{
$("#data th span").removeClass("desc").removeClass("asc")
$(this).addClass("asc");
ordenar = "&orderby="+$(this).attr("title")+" asc"
}else
{
$("#data th span").removeClass("desc").removeClass("asc")
$(this).addClass("desc");
ordenar = "&orderby="+$(this).attr("title")+" desc"
}
filtrar()
});
});

var fila= null;
function pulsar(obj, num_usuario) {
 obj.style.background = 'orange';
 if (fila != null && fila != obj)
   fila.style.background = 'white';
 fila = obj;
window.location ="menu1.php?id="+num_usuario;
}
function filtrar()
{
$.ajax({
data: $("#frm_filtro").serialize()+ordenar,
type: "POST",
dataType: "json",
url: "ajax.php?action=listar",
success: function(data){
   var html_user ='' ;
   if(data.length > 0){
       $.each(data, function(i,item){



html_user += '<tr ondblclick="pulsar(this, ' +  String.fromCharCode(39) + item.num_usuario + String.fromCharCode(39)  + ');" >';
html_user += '<td ><input name="demo" type="radio" value=""/></td>';
html_user += '<td >'+item.num_usuario+'</td>';
html_user += '<td>'+item.telefono+'</td>';
html_user += '<td>'+item.nombre+' '+item.apellidos+'</td>';
html_user += '<td>'+item.poblacion+'</td>';
html_user += '</tr>';


       });                    
   }
   if(html_user == '') html_user = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';
   $("#data tbody").html(html_user);
}


 });
}

function createAjax(){
  if (window.XMLHttpRequest)
  {
     xmlhttp=new XMLHttpRequest();
  }
  else
  {
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}

function buscarAparatos()
{
   var num_usuario = 0;
   var elements = document.getElementsByName('demo');

   for(var x=0;elements[x];x++){
       if(elements[x].checked){
           num_usuario = elements[x].value;
           break;
       }
   }

   createAjax();
   xmlhttp.onreadystatechange=function()
   {
       if (xmlhttp.readyState==4 && xmlhttp.status==200)
       {
           document.getElementById("pestaña1").innerHTML=xmlhttp.responseText;
       }
   }
  xmlhttp.open("GET","listado_aparatos.php?ID=" + num_usuario,true);
  xmlhttp.send(null);
}


madri09

He encontrado este ejemplo pero no se como integrarlo en mi cod:

Código (javascript) [Seleccionar]

<?php
// Incluye la librería de clases xajax
require ('xajax/xajax_core/xajax.inc.php');

// Se crea una nueva instancia de un objeto xajax
$xajax = new xajax();

// Define la ruta para las llamadas a xajax
$xajax->configure('javascript URI','xajax/');

// Registramos el nombre de la función que queremos llamar mediante xajax
$xajax->register(XAJAX_FUNCTION'llamada_servidor');

// Procedimiento por el que xajax maneja las peticiones realizadas antes de enviar salida alguna
$xajax->processRequest();

// Función en la que se realiza una llamada al servidor
function llamada_servidor()
{
// Función que se realiza: pausa de 2 segundos
sleep(2);

// Se crea una nueva instancia de un objeto xajaxResponse
$objResponse = new xajaxResponse();
// Envía al navegador el comando como respuesta a la petición xajax
$objResponse->Assign("capa_actualiza","innerHTML","Finalizado");

return 
$objResponse;
}
?>


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

<html>
<head>
<title>Mostrar imagen de carga de datos</title>

<?php
// Permite a xajax generar el código javascript necesario
$xajax->printJavascript();
?>


   <script type="text/javascript">
   <!--
// Función que muestra la imagen de "cargando..." mientras se realizan las acciones con el servidor
   function muestra_cargando(){
   
      xajax.dom.create("capa_actualiza","div", "cargando");
      xajax.$('cargando').innerHTML='<img src="imagenes_menu/ajax-loader.gif" alt="cargando..." border="0">';
   }

   // Función que se lleva a cabo cuando se ha devuelto la respuesta del servidor
   function oculta_cargando(){
      // lo que sea
   }
   
   // Determina qué función se llama mientras se espera respuesta del servidor
   xajax.callback.global.onResponseDelay = muestra_cargando;
   // Determina qué función se llama cuando se ha devuelto la respuesta del servidor
   xajax.callback.global.onComplete = oculta_cargando;
   // --></script>
</head>

<body>

<div id="capa_actualiza">
<a href="javascript:void(xajax_llamada_servidor())">Llamada al servidor</a>
</div>

</body>
</html>

Doctrina