Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Paginar por capas sin resetar la pagina

Estas en el tema de Paginar por capas sin resetar la pagina en el foro de Frameworks JS en Foros del Web. Hola a todos! Acá estoy de nuevo para consultarles por algo que me pareció muy interesante y no estoy seguro si se tocó este tema ...
  #1 (permalink)  
Antiguo 26/03/2009, 11:35
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Paginar por capas sin resetar la pagina

Hola a todos! Acá estoy de nuevo para consultarles por algo que me pareció muy interesante y no estoy seguro si se tocó este tema ya en el foro.

Gracias al colega Triby que me orientó y ayudó a solucionar un temita que tenía en mi paginador, se me dió por ver la manera de realizar el mismo paginado pero dentro de layers (capas) como lo muestra esta página:

PAGINAR POR CAPAS SIN RESETEAR LA PAGINA

En mi caso sería muy útil por el echo que tengo un flash en la parte superior con música y al cambiar de página se reinicia la misma y la idea sería que al traerme los resultados, la musica no se reinicie cada vez q pagino los mismos.


La página contiene un script que genera el paginado sobre las capas:

Código HTML:
<script language="javascript1.1">
var dom = document.getElementById ? true:false;
var nn4 = document.layers ? true:false;
var ie4 = document.all ? true:false;
function moverPagina(x){
		ocultar2();
		if(ie4){
			document.all['pagina'+x].style.visibility="visible";
			document.all['pagina'+x].style.display="block";
		}
		else if(nn4){
			document.layers['pagina'+x].visibility="visible";
			document.layers['pagina'+x].display="block";
		}
		else if(dom){
			document.getElementById('pagina'+x).style.visibility="visible";
			document.getElementById('pagina'+x).style.display="block";
		}
}

function ocultar2(){
	try
	{
		if(ie4){
			for (var i=1; i<6.2; i++) {
				document.all['pagina'+i].style.visibility="hidden";
				document.all['pagina'+i].style.display="none";
			}
		}
		else if(nn4){
			for (var i=1; i<6.2; i++) {
				document.layers['pagina'+i].visibility="hidden";
				document.layers['pagina'+i].style.display="none";
			}
		}
		else if(dom){
			for (var i=1; i<6.2; i++) {
				document.getElementById('pagina'+i).style.visibility="hidden";
				document.getElementById('pagina'+i).style.display="none";
			}
		}
	}
	catch(e){}
}
</script>


<div style="display: block; visibility: visible;" id="[B]pagina1[/B]">
<a><img src="propiedades.php_files/BB650951.jpg" border="0" width="145" /></a>
<a><img src="propiedades.php_files/BB650951.jpg" border="0" width="145" /></a>
<a><img src="propiedades.php_files/BB650951.jpg" border="0" width="145" /></a>
</div>

<div style="display: none; visibility: hidden;" id="[B]pagina2[/B]">
<a><img src="propiedades.php_files/BB655961.jpg" border="0" width="145" /></a>
<a><img src="propiedades.php_files/BB655961.jpg" border="0" width="145" /></a>
<a><img src="propiedades.php_files/BB655961.jpg" border="0" width="145" /></a>
</div>

<div style="display: none; visibility: hidden;" id="[B]pagina3[/B]">
....... 
</div>

<div style="display: none; visibility: hidden;" id="[B]pagina4[/B]">
....... 
</div> 
Y abajo de esto, el paginado aparece de la siguiente manera:
Código HTML:
<a href="[B]javascript:moverPagina(1)[/B];" style="text-decoration: none;">1</a> | <a href="[B]javascript:moverPagina(2)[/B];" style="text-decoration: none;">2</a> | <a href="[B]javascript:moverPagina(3)[/B];" style="text-decoration: none;">3</a> | <a href="[B]javascript:moverPagina(4)[/B];" style="text-decoration: none;">4</a> 
Esta es la consulta que ya tengo en mi archivo.php y de esta forma muestro 4 resultados por página:
Código PHP:
// declarar variables los datos del formulario
$id_tipopropiedad $_GET['id_tipopropiedad'];

$condiciones "";
if (
$id_tipopropiedad != ""$condiciones .= " AND propiedades.id_tipopropiedad = $id_tipopropiedad";

$pag $_GET['pag'];        
        if (!isset(
$pag)) $pag 1// Por defecto, pagina 1
        
$sql "SELECT COUNT(*) FROM propiedades WHERE propiedades.id_tipopropiedad = tipopropiedad.id_tipopropiedad $condiciones ORDER BY id_propiedad";

$result mysql_query($sql$conexion);

        list(
$total) = mysql_fetch_row($result);
        
$tampag 4;
        
$reg1 = ($pag-1) * $tampag;

        
$result mysql_query("SELECT * FROM propiedades WHERE propiedades.id_tipopropiedad = tipopropiedad.id_tipopropiedad $condiciones ORDER BY id_propiedad LIMIT $reg1, $tampag"$conexion) or die (mysql_error());

// Acá me muestra los resultados... 
Mi pregunta es la siguiente:
¿Cómo hago con PHP para decirle en este caso al código Javascript que me vaya "creando" o que vaya "agregando" los datos en las capas, de acuerdo al total de los resultados que me traiga de la consulta?

Espero puedan orientarme ya que me parece que sería muy util para utilizarlos.

Mil gracias a todos y un cordial saludo.

Marx.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #2 (permalink)  
Antiguo 26/03/2009, 11:40
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 16 años
Puntos: 2534
Respuesta: Paginar por capas sin resetar la pagina

mmm....

eso se le conoce como Ajax ... e incluso, es mucho mas sencillo de como lo estas haciendo....

si utilizas jQuery esto es mucho mas rápido, de veras!!

Código javascript:
Ver original
  1. $.post('/el/script/de.php',{
  2.     'pagina': $("input#numpagina").val()
  3. }, function(a,s) {
  4.        
  5.     // OK
  6.     if (s == 'success')
  7.     {
  8.         $("div#contenedor").html(a);
  9.     }
  10.     else
  11.     {
  12.         alert('error desconocido, comprueba tu conexion a Internet');
  13.     }
  14.        
  15. });


NOTA que es mejor que investigues, ya que te has hecho un lío.... suerte!
__________________
Y U NO RTFM? щ(ºдºщ)

No atiendo por MP nada que no sea personal.
  #3 (permalink)  
Antiguo 26/03/2009, 12:51
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
pateketrueke: la verdad no me imaginé que fuera tan complicado. Pensé que con solo agregarle algunas líneas de php se podría llegar a acomodar.

Una consulta... ¿este código que me has pasado es para utilizarlo en la misma página dentro del div?

O sea que con Jquery se puede hacer lo que estoy necesitando? Paginar sin resetear la página? Ufff, espero que si se pueda.

Gracias por responder y por tu aporte.

Buenasss!!!! Otra vez por acá. Estuve viendo toda la tarde varias webs de paginados y el tema sigue rondando en lo que yo me temía... en como hacer para que los resultados se distribuyan en las etiquetas <div></div>... como en el caso de esta página que tiene ejemplos muy buenos y serían los ideales para paginar sin resetear la página:

http://rikrikrik.com/jquery/pager/

Pero aquí no hay nada tomado de la base de datos, por ende, el paginado y los contenidos ya están pre-definidos.

Lo que pude hacer es muy simple... por medio de una consulta pude traer el resultado a la primer etiqueta div que está visible, pero el resto... como se puede colocar en las demás etiquetas div que no están visibles?

Tal vez hacer que aparezcan X cantidad en la primer etiqueta y si hay más datos que se guarden en las restantes y que vayan apareciendo a medida que se paginan los resultados.... no lo sé, estoy desconcertado chicos.

Gracias nuevamente y saludos.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.

Última edición por GatorV; 27/03/2009 a las 11:44
  #4 (permalink)  
Antiguo 27/03/2009, 16:42
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Respuesta: Paginar por capas sin resetar la pagina

¿Alguna idea para saber si se puede paginar el resultado de una busqueda sin resetear la página?

Gracias.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #5 (permalink)  
Antiguo 27/03/2009, 17:33
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: Paginar por capas sin resetar la pagina

Hola:

La paginación es posible, pero debes actualizarte... por ejemplo, ni document.all ni layers te servirá... La cuestión es usar las mismas instrucciones de una paginación normal para obtener los datos, pero creando las capas y demás con javascript...

Un ejemplo: Ajax: Galería de imágenes paginada

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 31/03/2009, 09:42
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Respuesta: Paginar por capas sin resetar la pagina

Cita:
Iniciado por caricatos Ver Mensaje
Hola:

La paginación es posible, pero debes actualizarte... por ejemplo, ni document.all ni layers te servirá... La cuestión es usar las mismas instrucciones de una paginación normal para obtener los datos, pero creando las capas y demás con javascript...

Un ejemplo: Ajax: Galería de imágenes paginada

Saludos
caricatos: muy bueno el link que me enviaste, pero debo decirte que al ver todo el código que escribiste... casi me agarra un ataque .

Entiendo lo que me dices solo que la tengo muy complicada con javascript. El paginador ya lo tengo, es este y funciona bien.

Código PHP:
function paginar($actual$total$por_pagina$enlace) {

  
$pag $_GET['pag'];
  
$id_tipopropiedad "&id_tipopropiedad="$_GET['id_tipopropiedad'];
  
$id_operacion "&id_operacion="$_GET['id_operacion'];
  
$select1 "&select1="$_GET['select1'];
  
$select2 "&select2="$_GET['select2'];
  
$id_moneda "&id_moneda="$_GET['id_moneda'];


  
$total_paginas ceil($total/$por_pagina);
  
$anterior $actual 1;
  
$posterior $actual 1;
  if (
$actual>1)
    
$texto "<a href=\"$enlace$anterior$id_tipopropiedad$id_operacion$select1$select2$id_moneda\" >&laquo; ANTERIOR</a> ";
  else
    
$texto "<b>ANTERIOR</b> ";
  for (
$i=1$i<$actual$i++)
    
$texto .= "<a href=\"$enlace$i$id_tipopropiedad$id_operacion$select1$select2$id_moneda\" >$i</a> ";
  
$texto .= "<b>$actual</b> ";
  for (
$i=$actual+1$i<=$total_paginas$i++)
    
$texto .= "<a href=\"$enlace$i$id_tipopropiedad$id_operacion$select1$select2$id_moneda\" >$i</a> ";
  if (
$actual<$total_paginas)
    
$texto .= "<a href=\"$enlace$posterior$id_tipopropiedad$id_operacion$select1$select2$id_moneda\" >SIGUIENTE</a>";
  else
    
$texto .= "<b>SIGUIENTE</b>";
  return 
$texto;

        
// Cierro la conexion
        
mysql_close($conexion); 

}

echo 
paginar($pag$total$tampag"prop-search.php?pag="); 
Lo que me desconcierta es justamente la parte de javascript... el cómo decirle que me traiga X resultados por página dentro de un div y que me los pagine...

Bue... no sé, seguire viendo nomás.

GRacias.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #7 (permalink)  
Antiguo 31/03/2009, 10:43
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: Paginar por capas sin resetar la pagina

Lo que tienes que hacer es una pagina aparte donde solamente imprimas la parte de la tabla, y con AJAX le envias los parámetros de que número de pagina mostrar, así solamente refrescas el div con la pagina que quieres ver.

Saludos.
  #8 (permalink)  
Antiguo 31/03/2009, 12:47
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Respuesta: Paginar por capas sin resetar la pagina

mmm... a ver si comprendí.

Una página aparte que reciba las variables del buscador, que realice la búsqueda y que las imprima.
En otra página aparte (que es la que realmente verá el cliente) llamada por ejemplo result.php, que muestre dentro de un <div> el resultado con el paginado y que este <div> se refresque... ¿es así?

Qué ensalada me hice por favor...

Ahora... una preguta tonta...
el contenido de la página que puse al principio, que hace el paginado y demás... lo hace solo ese script o hay otros scripts que intervienen? Porque por lo que vi dentro del mismo, no hay un archivo externo que intervenga... no sé, es solo una curiosidad que tengo...

Gracias nuevamente. Marx.

************************

Aaaaaaahhhhh!!!!! sisisisisi... era así GatorV. Lo termino de acomodar y lo posteo. Espero que esta vez funcione.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.

Última edición por marx-pola; 31/03/2009 a las 13:55
  #9 (permalink)  
Antiguo 31/03/2009, 15:32
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: Paginar por capas sin resetar la pagina

Es la teoria de AJAX, que tu hagas una petición y esta te devuelva un resultado, el código que habias puesto desde un inicio no cumplia con eso, y para poder paginar de forma más correcta lo mejor es separar las cosas por capas.

Espero puedas resolverlo en realidad es sencillo (tal como te lo puso paketetrueke).

Saludos.
  #10 (permalink)  
Antiguo 01/04/2009, 16:09
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Respuesta: Paginar por capas sin resetar la pagina

............ Dios... teneme paciencia allá arriba también......!!!!!

Bueno... quiero que sepan que le pongo toda la voluntad que tengo y que dentro de los plazos que me corren, trato de entender este mundo que no exploré antes.

Ahora sí... aca vamos... les muestro lo siguiente que hice en base a un ejemplo que encontré pero que me funcionó a medias.

Una gran parte de lo que está ahora en pagina2.php lo saqué de esta aquí:

PAGINAR SIN RESETEAR

Las páginas de mi proyecto son las siguientes:

buscador.php (lo llamo con un include en las páginas donde se encuentre)
pagina1.php (contiene el div="detalles")
pagina2.php (contiene la consulta a la BDD)
funciones.js (contiene las funciones de ajax)

buscador.php envía los datos a página2.php para que realice la búsqueda.

pagina2.php
Código PHP:
header('Content-Type: text/html; charset=ISO-8859-1');

    include(
'con.php');
    
    
// conexion a la base
    
$conexion mysql_connect($host_db$usuario_db$pass_db) or die ("no se ha podido conectar a la BD");
    
mysql_select_db($base_db$conexion) or die ("no se ha podido seleccionar la BD");

$id_tipopropiedad $_GET['id_tipopropiedad'];
$id_operacion $_GET['id_operacion'];
$select1 $_GET['select1'];
$select2 $_GET['select2'];
$id_moneda $_GET['id_moneda'];


if (isset(
$_REQUEST['pos']))
  
$inicio=$_REQUEST['pos'];
else
  
$inicio=0;

// realizar esta funcion si se presiona el boton enviar en el formulario de busqueda
if(isset($_GET['searchprop']))

// declarar variables los datos del formulario
$id_tipopropiedad $_GET['id_tipopropiedad'];
$id_operacion $_GET['id_operacion'];
$select1 $_GET['select1'];
$select2 $_GET['select2'];
$id_moneda $_GET['id_moneda'];
{

// declarar las condiciones usando la opcion WHERE, dependiendo de lo enviado en el formulario
$condiciones "";
if (
$id_tipopropiedad != ""$condiciones .= " AND propiedades.id_tipopropiedad = $id_tipopropiedad";
if (
$id_operacion != "" && $condiciones != ""$condiciones .= " AND propiedades.id_operacion = $id_operacion";
if (
$select1 != "" && $condiciones != ""$condiciones .= " AND propiedades.id_localidad = $select1";
if (
$select2 != "" && $condiciones != ""$condiciones .= " AND propiedades.id_zona = $select2";
if (
$id_moneda != "" && $condiciones != ""$condiciones .= " AND propiedades.id_moneda = $id_moneda";

$registros=mysql_query("SELECT * FROM propiedades, ..... $condiciones ORDER BY id_propiedad LIMIT  $inicio,3"$conexion) or  die("Problemas en el select:".mysql_error());

  
$impresos=0;
  while (
$reg=mysql_fetch_array($registros))
  {
    
$impresos++;
    echo 
"Nombre:".$reg['desc_localidad']."<br>";
    echo 
"Fecha:".$reg['desc_zona']."<br>";
    echo 
"Imagen:<img src=resizeb.php?img=imageprop/" .$reg['foto']. ">";
//    echo "Comentarios:".$reg['descripcion']."<br>";
    
echo "<br>";
  }
  
mysql_close($conexion);
  if (
$inicio==0)
    echo 
"anteriores ";
  else
  {
    
$anterior=$inicio-3;
    echo 
"<a href=\"pagina2.php?pos=$anterior$id_tipopropiedad$id_operacion$select1$select2$id_moneda\" id=\"ant\">Anteriores</a>";
  }
  if (
$impresos==3)
  {
    
$proximo=$inicio+3;
    echo 
"<a href=\"pagina2.php?pos=$proximo$id_tipopropiedad$id_operacion$select1$select2$id_moneda\" id=\"sig\">Siguientes</a>";
  }
  else
    echo 
"siguientes";

  } 
pagina1.php
Código HTML:
<script src="funciones.js" language="JavaScript"></script>
</head>
<body>

<div id="detalles">
</div>

</body> 
funciones.js
Código:
addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
  cargarPagina('pagina2.php'); 
}

function presionEnlace(e)
{
  if (window.event)
  {
    window.event.returnValue=false;
    var url=window.event.srcElement.getAttribute('href');
    cargarPagina(url);     
  }
  else
    if (e)
    {
      e.preventDefault();
      var url=e.target.getAttribute('href');
      cargarPagina(url);     
    }
}


var conexion1;
function cargarPagina(url) 
{

  if(url=='')
  {
    return;
  }
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open("GET", url, true);
  conexion1.send(null);
}

function procesarEventos()
{
  var detalles = document.getElementById("detalles");
  if(conexion1.readyState == 4)
  {
    detalles.innerHTML = conexion1.responseText;
    var ob1=document.getElementById('sig');
    if (ob1!=null)
      addEvent(ob1,'click',presionEnlace,false);
    var ob2=document.getElementById('ant');
    if (ob2!=null)
      addEvent(ob2,'click',presionEnlace,false);
  } 
  else 
  {
    detalles.innerHTML = '';
  }
}

//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
  if (elemento.attachEvent)
  {
    elemento.attachEvent('on'+nomevento,funcion);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,captura);
      return true;
    }
    else
      return false;
}

function crearXMLHttpRequest() 
{
  var xmlHttp=null;
  if (window.ActiveXObject) 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else 
    if (window.XMLHttpRequest) 
      xmlHttp = new XMLHttpRequest();
  return xmlHttp;
}
Qué pasó con esto... si ejecuto buscador.php y envío los datos a página2.php, me trae los resultados que solicito pero no funciona bien el paginador. Al paginar me aparece ?pos=32 en SIGUIENTE. Igual este paginador no me gusta. Trataré de que sea del tipo ANTERIOR 1 2 3 ... SIGUIENTE... queda más lindo.

Peeero, noten esto en el código funciones.js:

function inicializarEventos()
{
cargarPagina('pagina2.php');
}

¿Cómo hago para que al ejecutar el buscador.php me lleve a pagina1.php y me muestre dentro del div="detalles" el resultado de la búsqueda que realiza pagina2.php, pero paginada?

Trato, trato, tratooooooooooo ....

Gracias a todos... de verdad.

Saludos. MArx.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #11 (permalink)  
Antiguo 02/04/2009, 09:17
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Respuesta: Paginar por capas sin resetar la pagina

Cita:
Iniciado por pateketrueke Ver Mensaje
mmm....

eso se le conoce como Ajax ... e incluso, es mucho mas sencillo de como lo estas haciendo....

si utilizas jQuery esto es mucho mas rápido, de veras!!

Código javascript:
Ver original
  1. $.post('/el/script/de.php',{
  2.     'pagina': $("input#numpagina").val()
  3. }, function(a,s) {
  4.        
  5.     // OK
  6.     if (s == 'success')
  7.     {
  8.         $("div#contenedor").html(a);
  9.     }
  10.     else
  11.     {
  12.         alert('error desconocido, comprueba tu conexion a Internet');
  13.     }
  14.        
  15. });


NOTA que es mejor que investigues, ya que te has hecho un lío.... suerte!
Estoy tratando de entender dentro del o que puedo, el código que has puesto amigo, y quisiera preguntarte donde dice $.post('/el/script/de.php', si llama a mi archivo php completo, es decir, al que actualmente se llama pagina2.php o si este código lo que hace es una paginación en general?

Les juro que uds. me dicen que es realmente facil pero yo me estoy volviendo loco.

Gracias.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #12 (permalink)  
Antiguo 02/04/2009, 09:49
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: Paginar por capas sin resetar la pagina

Es al script donde te devuelve la tabla ya armada, y el parámetro de pagina es la pagina a obtener, es por eso que te decia que es sencillo si lo armas de la forma correcta.

Saludos.
  #13 (permalink)  
Antiguo 02/04/2009, 14:22
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Respuesta: Paginar por capas sin resetar la pagina

Sigo insistiendo, pero a esta altura es como que ya trato de adivinar como debería hacerlo. Probé de hacerlo de esta manera interpretando lo que me has dicho.

formulario.php
Código HTML:
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>

<form name="consulta" action="" onsubmit="MostrarConsulta('consulta.php'); return false">
  <label>
  <input type="submit" value="Consultar" />
  </label>
</form>

<div id="resultado"></div> 
archivo ajax.js
Código:
function objetoAjax(){
	var xmlhttp=false;
	try {
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try {
		   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (E) {
			xmlhttp = false;
  		}
	}

	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}

function MostrarConsulta(datos){
	divResultado = document.getElementById('resultado');
	ajax=objetoAjax();
	ajax.open("GET", datos);
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			divResultado.innerHTML = ajax.responseText
		}
	}
	ajax.send(null)
}
consulta.php (la que tengo actualmente armada)
Código PHP:
    include('con.php');
    
    
$CantxCol 2//Cantidad de columnas
    
$Cant 0// Variable para ser usada como contador

    // conexion a la base
    
$conexion mysql_connect($host_db$usuario_db$pass_db) or die ("no se ha podido conectar a la BD");
    
mysql_select_db($base_db$conexion) or die ("no se ha podido seleccionar la BD");


// recojo las variables para usarlas en la busqueda
if(isset($_GET['searchprop']))

// declarar variables los datos del formulario
$id_tipopropiedad $_GET['id_tipopropiedad'];
$id_operacion $_GET['id_operacion'];
$select1 $_GET['select1'];
$select2 $_GET['select2'];
$id_moneda $_GET['id_moneda'];
{


// declarar las condiciones usando la opci&oacute;n WHERE, dependiendo de lo enviado en el formulario
$condiciones "";
if (
$id_tipopropiedad != ""$condiciones .= " AND propiedades.id_tipopropiedad = $id_tipopropiedad";
if (
$id_operacion != "" && $condiciones != ""$condiciones .= " AND propiedades.id_operacion = $id_operacion";
if (
$select1 != "" && $condiciones != ""$condiciones .= " AND propiedades.id_localidad = $select1";
if (
$select2 != "" && $condiciones != ""$condiciones .= " AND propiedades.id_zona = $select2";
if (
$id_moneda != "" && $condiciones != ""$condiciones .= " AND propiedades.id_moneda = $id_moneda";


// obtener datos de la base

$pag $_GET['pag'];        
        if (!isset(
$pag)) $pag 1// Por defecto, pagina 1
        
$sql "SELECT COUNT(*) FROM propiedades...  $condiciones ORDER BY id_propiedad";

$result mysql_query($sql$conexion);

        list(
$total) = mysql_fetch_row($result);
        
$tampag 4;
        
$reg1 = ($pag-1) * $tampag;
            
$result mysql_query("SELECT * FROM propiedades....  $condiciones ORDER BY id_propiedad LIMIT $reg1, $tampag"$conexion) or die (mysql_error());

// muestro los resultados
    
if (mysql_num_rows($result)){ 

    
// Muestro los registros
      
while ($fila = @mysql_fetch_array($result))
          { 

................ 
El archivo consulta.php aparece en el div pero...

Pregunta:
- Antes me tomaba las variables del formulario y ahora no... ¿Qué estoy haciendo mal? ¿No las está enviando por algo que me falta poner en ajax?
- El paginador también está mal porque no pagina los resultados dentro del div... ¿no sirve esta manera de paginar?

Sigo participando... gracias.

Marx.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #14 (permalink)  
Antiguo 03/04/2009, 10:01
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Respuesta: Paginar por capas sin resetar la pagina

Bueno... estoy en el horno y estoy hecho un lío ya y veo que esto no va ni para atrás ni para adelante, así que voy a pedir OTRO tipo de ayuda, a ver si puedo armar este simple (COMPLEJO) rompecabezas para mí.

A ver... díganme si estoy en lo correcto o no, si para armar esto lo que necesito son estas herramientas:

buscador.php (página que enviará las variables a una consulta para realizar la búsqueda)
resultados.php (página que recibe las variables y arma la tabla con los resultados de la consulta)
index.php (página que tendría un div="contenido" donde se mostrará resultados.php)
ajax.js (aquí iran los scripts para que resultados.php aparezca en el div="contenido" que se encuentra en el index.php)

Bien... ahora pregunto...
- el paginado del tipo << ANTERIOR 1 2 3 SIGUIENTE>>, ¿donde lo tengo que crear?
- en mi estructura anterior y convencional, yo tengo muchas variables que están pasando por GET para que realice la búsqueda que necesito... ¿qué pasan con esas variables si estoy trabajando con ajax?
- ¿cómo hago la paginación de acuerdo al resultado que me trae esas variables dentro de div="contenido" sin que se resetee toooda la página completa?

Creo que de esta manera voy a ordenar más las cosas ya que creo que está todo muy confundido.

Espero puedan orientarme.

Saludos y gracias. MArx.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #15 (permalink)  
Antiguo 03/04/2009, 10:11
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: Paginar por capas sin resetar la pagina

Lo mejor por tiempo y para que entiendas básicamente lo de AJAX es que hagas algo así:

buscador.php, este recibe las variables y crea el HTML (<table>), y el paginador, como si fuera una pagina independiente, solo limitate a generar el bloque de la tabla y el paginador, no toda la estructura HTML (con <html><head>, etc), solamente por ejemplo tu buscador.php te devuelve algo asi:
Código html:
Ver original
  1.       <tr>
  2.               <th>ID</th>
  3.               <th>Nombre</th>
  4.       </tr>
  5.       <tr>
  6.               <td>1</td>
  7.               <td>Juan</td>
  8.       </tr>
  9. <div>
  10.        <a href="javascript:getPagina(1);">Primero</a>
  11.        <a herf="javascript:getPagina(1);">1</a>
  12.        <a herf="javascript:getPagina(2);">2</a>
  13.        <a herf="javascript:getPagina(3);">3</a>
  14.        <a herf="javascript:getPagina(3);">Ultimo</a>
  15. </div>

Eso ya es la estructura HTML lista para insertarla en index.php donde el div contenido este, luego creas una función en Javascript que via AJAX enviandole el parámetro de getPagina() este vaya a buscador.php y cree la tabla con los links directamente.

Como ves son solo 3 archivos:
buscador.php - Recibe, procesa, arma el html, y crea los links
index.php - pagina principal donde se muestran los resultados
ajax.js - Código de AJAX para paginar.

Aunque en lugar de usar ajax.js te recomendaría usar JQuery como te indico pateketrueke.

Saludos.
  #16 (permalink)  
Antiguo 03/04/2009, 11:49
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Respuesta: Paginar por capas sin resetar la pagina

Gracias GatorV. Por lo que leo de uds., veo que que jQuery es mucho mejor y más sencillo, y el código de pateketrueke apunta a ello.

Pero colocando simplemente el código que puso él y con la librería, ¿se resuelve este caso o es solo una parte de lo que necesito?

Y realmente ví unas librerías con efectos buenísimas. Yo había posteado un link sobre un tipo de paginador que se llama jQuery pager plug-in... el link está mas arriba y si fuese así de sencillo, eso mismo es lo que necesitaría.

Bueno, sigo nomás intentando.

Gracias nuevamente.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #17 (permalink)  
Antiguo 03/04/2009, 11:57
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: Paginar por capas sin resetar la pagina

Usa jquery la petición AJAX, lo demás es tu código PHP, si lees mi mensaje con calma puedes entender como hacerlo, es simplemente recibir desde PHP ya todo el HTML armado con todo y el paginador para ir cambiando las hojas.

Saludos.
  #18 (permalink)  
Antiguo 07/04/2009, 12:06
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Respuesta: Paginar por capas sin resetar la pagina

GatorV... querido. Gracias por tu paciencia.

No supe hacer lo que me aconsejaste pero debo comprometerme a aprender, definitivamente y en cuanto termine con este proyecto, lo voy a hacer.

Debo decirte que soy un obstinado, un testarudo... y como no puedo conmigo mismo, levanté velas y salí a navegar por las profundidades de la net toda una noche y caí en jQuery para hacer esto. Estuve viendo algunos ejemplos e hice esto pero... no estoy seguro si lo estoy haciendo bien.

buscador.php
Código HTML:
<form action="prop-result.php" method="GET">
</form> 
muestra_resultados.php (solo contiene la llamada de jQuery y el div dnd aparecera el resultado de la busqueda paginada)

Código:
<script src="js/jquery.js" language="JavaScript"></script>

<script type="text/javascript">
$(document).ready(function(){

$("div#resultado").load("resultados.php"); 
  });

</script>

.......

<div id="resultado"></div>
resultado.php (contiene la consulta a la base y muestra los resultados con el paginador debajo de todo)
Código PHP:
function paginar($actual$total$por_pagina$enlace) {

  
$pag $_GET['pag'];
  
$id_tipopropiedad "&id_tipopropiedad="$_GET['id_tipopropiedad'];
  
$id_operacion "&id_operacion="$_GET['id_operacion'];
  
$select1 "&select1="$_GET['select1'];
  
$select2 "&select2="$_GET['select2'];
  
$id_moneda "&id_moneda="$_GET['id_moneda'];


  
$total_paginas ceil($total/$por_pagina);
  
$anterior $actual 1;
  
$posterior $actual 1;
  if (
$actual>1)
    
$texto "<a href=\"$enlace$anterior$id_tipopropiedad$id_operacion$select1$select2$id_moneda\" >&laquo; ANTERIOR</a> ";
  else
    
$texto "<b>ANTERIOR</b> ";
  for (
$i=1$i<$actual$i++)
    
$texto .= "<a href=\"$enlace$i$id_tipopropiedad$id_operacion$select1$select2$id_moneda\" >$i</a> ";
  
$texto .= "<b>$actual</b> ";
  for (
$i=$actual+1$i<=$total_paginas$i++)
    
$texto .= "<a href=\"$enlace$i$id_tipopropiedad$id_operacion$select1$select2$id_moneda\" >$i</a> ";
  if (
$actual<$total_paginas)
    
$texto .= "<a href=\"$enlace$posterior$id_tipopropiedad$id_operacion$select1$select2$id_moneda\" >SIGUIENTE</a>";
  else
    
$texto .= "<b>SIGUIENTE</b>";
  return 
$texto;

        
// Cierro la conexion
        
mysql_close($conexion); 

}

echo 
paginar($pag$total$tampag"prop-search.php?pag="); 
Veamos... para empezar, desde buscador.php donde está el formulario que envía los datos, ¿hacia donde debe enviarlos? ¿hacia resultado.php ó hacia la página muestra_resultados.php que contiene el div donde aparecerá el resultado?

Una vez que recibe los datos y aparece dentro del div ¿cómo pagino dentro de ese div?

Espero poder estar mas encaminado que antes... por favor.

Gracias nuevamente. MArx.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #19 (permalink)  
Antiguo 07/04/2009, 14:08
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: Paginar por capas sin resetar la pagina

Lee con clama mis mensajes, ya te he dejado varias veces la teoria de lo que debes de hacer, necesitas 2 paginas solamente:

1.- index.php o buscador.php lo que sea con todo tu diseño HTML y un div para pegar los resultados, llamemosle <div id="resultado"></div>, todo esto junto con todo tu HTML.
2.- proceso.php En esta pagina tu vas a recibir los valores enviados desde "index", en este caso el número de pagina, creas la tabla HTML y el paginador, pero sin todo el HTML, solo la parte perteniente a la tabla y el paginador.

Con Jquery haces la llamada asíncrona desde index.php a proceso.php, dibujas tu HTML creas el paginador y lo inyectas con Jquery en index.php.

Si ves ya lo haces, tienes que hacer una función que se llame por ejemplo getPage(num):
Código javascript:
Ver original
  1. function getPagina(num) {
  2.     $.post(
  3.         'proceso.php',
  4.         {
  5.         'pagina': num
  6.         },
  7.         function(a,s) {
  8.             // OK
  9.             if (s == 'success') {
  10.                 $("div#resultados").html(a);
  11.             } else {
  12.                 alert('error desconocido, comprueba tu conexion a Internet');
  13.             }
  14.         }
  15.     );
  16. }

Así por decir al entrar a la pagina haces un evento onload para traer la pagina 0 (getPage(0)), y en cada link del paginador vas poniendo las paginas, desde PHP rescatas $_GET['pagina'] y en base a eso haces la paginación.

Saludos.
  #20 (permalink)  
Antiguo 15/04/2009, 15:49
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Respuesta: Paginar por capas sin resetar la pagina

Hola a todos!!! Bueno... gracias a mi gran esfuerzo, estoy empezando a entender un poco más del tema, básicamente de Ajax, a quien elegí para no marearme más de lo que estuve. Así que hasta que le agarre la mano, seguiré con él.

Lo que no sé hacer es que la consulta procese los datos que envío por el formulario.

Las 3 páginas son estas:
index.php
buscador.php
consulta.php

index.php
Código:
function objetoAjax(){
 var xmlhttp=false;
  try{
   xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
   try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }catch(E){
    xmlhttp = false;
   }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
   xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}


// MOSTRAR RESULTADOS DE LA CONSULTA
function MostrarConsulta(datos){
	divResultado = document.getElementById('resultado');
	ajax=objetoAjax();
	ajax.open("GET", datos);
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			divResultado.innerHTML = ajax.responseText
		}
	}
ajax.send(null)
}


// PAGINAR RESULTADOS
function Pagina(nropagina){
 //donde se mostrará los registros
 divContenido = document.getElementById('resultado');
 
 ajax=objetoAjax();
 //uso del medoto GET
 //indicamos el archivo que realizará el proceso de paginar
 //junto con un valor que representa el nro de pagina
 ajax.open("GET", "consulta.php?pag="+nropagina);
 divContenido.innerHTML= '<img src="anim.gif">';
 ajax.onreadystatechange=function() {
  if (ajax.readyState==4) {
   //mostrar resultados en esta capa
   divContenido.innerHTML = ajax.responseText
  }
 }
 //como hacemos uso del metodo GET
 //colocamos null ya que enviamos 
 //el valor por la url ?pag=nropagina
 ajax.send(null)
}


  <?php include('buscador.php')?>

<div id="resultado"> </div>
buscador.php
Código HTML:
<form name="consulta" action="" onsubmit="MostrarConsulta('consulta.php'); return false">
...........
</form> 

consulta.php
Código PHP:
    include('conectar.php');

// declarar variables los datos del formulario
$id_tipopropiedad $_GET['id_tipopropiedad'];
$id_operacion $_GET['id_operacion'];
$select1 $_GET['select1'];
$select2 $_GET['select2'];
$id_moneda $_GET['id_moneda'];

// declarar las condiciones usando la opci&oacute;n WHERE, dependiendo de lo enviado en el formulario
$condiciones "";
if (
$id_tipopropiedad != ""$condiciones .= " AND propiedades.id_tipopropiedad = $id_tipopropiedad";
if (
$id_operacion != "" && $condiciones != ""$condiciones .= " AND propiedades.id_operacion = $id_operacion";
if (
$select1 != "" && $condiciones != ""$condiciones .= " AND propiedades.id_localidad = $select1";
if (
$select2 != "" && $condiciones != ""$condiciones .= " AND propiedades.id_zona = $select2";
if (
$id_moneda != "" && $condiciones != ""$condiciones .= " AND propiedades.id_moneda = $id_moneda";


 
$RegistrosAMostrar=4;

 
//estos valores los recibo por GET
 
if(isset($_GET['pag'])){
  
$RegistrosAEmpezar=($_GET['pag']-1)*$RegistrosAMostrar;
  
$PagAct=$_GET['pag'];
  
//caso contrario los iniciamos
 
}else{
  
$RegistrosAEmpezar=0;
  
$PagAct=1;
 }

 
$Resultado=mysql_query("SELECT * FROM propiedades ...... $condiciones ORDER BY id_propiedad LIMIT $RegistrosAEmpezar, $RegistrosAMostrar",$conexion);
 
 echo 
"<table border='1px'>";
 while(
$MostrarFila=mysql_fetch_array($Resultado)){
  echo 
"<tr>";
  echo 
"<td>".$MostrarFila['id_propiedad']."</td>";
  echo 
"<td>".$MostrarFila['direccion']."</td>";
  echo 
"<td>".$MostrarFila['foto']."</td>";
  echo 
"</tr>";
 }
 echo 
"</table>";

 
//******--------determinar las páginas---------******//
 
$NroRegistros=mysql_num_rows(mysql_query("SELECT * FROM propiedades.... $condiciones ORDER BY id_propiedad",$conexion));
 
 
$PagAnt=$PagAct-1;
 
$PagSig=$PagAct+1;
 
$PagUlt=$NroRegistros/$RegistrosAMostrar;

 
//verificamos residuo para ver si llevará decimales
 
$Res=$NroRegistros%$RegistrosAMostrar;

 
// si hay residuo usamos funcion floor para que me
 // devuelva la parte entera, SIN REDONDEAR, y le sumamos
 // una unidad para obtener la ultima pagina
 
if($Res>0$PagUlt=floor($PagUlt)+1;
 
 
//desplazamiento
 
echo "<a href='javascript:Pagina(1)'>Primero</a> ";
     if(
$PagAct>1
         echo 
"<a href='javascript:Pagina(" $PagAnt")'>Anterior</a> ";

 echo 
"<strong>Pagina ".$PagAct."/".$PagUlt."</strong>";
     if(
$PagAct<$PagUlt)
         echo 
"<a href='javascript:Pagina(" .$PagSig")'>Siguiente</a> ";

 echo 
"<a href='javascript:Pagina(" .$PagUlt")'>Ultimo</a>"
Como les decía antes, al ejecutar el formulario me aparece toda la info de la base dentro del div resultado, pero el archivo consultas.php no procesa las $condiciones.

¿Deberían pasar por alguna función de ajax o me estoy olvidando de poner algo? Si pasa por ajax, ¿me dicen porfa como se hace?

Muchas gracias a todos, por la ayuda y la paciencia.

Saludos. Marx.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #21 (permalink)  
Antiguo 16/04/2009, 18:38
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: Paginar por capas sin resetar la pagina

Para enviar más parámetros vía AJAX los tienes que enviar junto con el query string, por ejemplo en tu función MostrarConsulta(datos) tendrias que enviarla así: MostrarConsulta('consulta.php?dato1=a&datob=2&dato c=3&dato4=d') Tal como si lo enviaras por una URL.

Otra opción es enviarlos por POST que es en la parte que haces el ajax.send(null) envias el QueryString, algo así:

ajax.send('var1=a&var2=b&var3=c');

Si no envias los datos así no puedes rescatarlos en tu archivo PHP.

Saludos.
  #22 (permalink)  
Antiguo 27/05/2009, 12:48
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Respuesta: Paginar por capas sin resetar la pagina

Hola! Volví dsp de largo tiempo sobre este tema que aún no lo puedo hacer funcionar y a pesar que no me tira ningún error, no me muestra el resultado de la búsqueda dentro del div.

buscador.php
Código HTML:
Código HTML:
<form name="consulta" action="" onsubmit="MostrarConsulta('consulta.php'); return false">
...........
</form> 
consulta.php
Código PHP:
    include('conectar.php');

// declarar variables los datos del formulario
$id_tipopropiedad $_GET['id_tipopropiedad'];
$id_operacion $_GET['id_operacion'];
$select1 $_GET['select1'];
$select2 $_GET['select2'];
$id_moneda $_GET['id_moneda'];

// declarar las condiciones usando la opci&oacute;n WHERE, dependiendo de lo enviado en el formulario
$condiciones "";
if (
$id_tipopropiedad != ""$condiciones .= " AND propiedades.id_tipopropiedad = $id_tipopropiedad";
if (
$id_operacion != "" && $condiciones != ""$condiciones .= " AND propiedades.id_operacion = $id_operacion";
if (
$select1 != "" && $condiciones != ""$condiciones .= " AND propiedades.id_localidad = $select1";
if (
$select2 != "" && $condiciones != ""$condiciones .= " AND propiedades.id_zona = $select2";
if (
$id_moneda != "" && $condiciones != ""$condiciones .= " AND propiedades.id_moneda = $id_moneda";


 
$RegistrosAMostrar=4;

 
//estos valores los recibo por GET
 
if(isset($_GET['pag'])){
  
$RegistrosAEmpezar=($_GET['pag']-1)*$RegistrosAMostrar;
  
$PagAct=$_GET['pag'];
  
//caso contrario los iniciamos
 
}else{
  
$RegistrosAEmpezar=0;
  
$PagAct=1;
 }

 
$Resultado=mysql_query("SELECT * FROM propiedades ...... $condiciones ORDER BY id_propiedad LIMIT $RegistrosAEmpezar, $RegistrosAMostrar",$conexion);
 
 echo 
"<table border='1px'>";
 while(
$MostrarFila=mysql_fetch_array($Resultado)){
  echo 
"<tr>";
  echo 
"<td>".$MostrarFila['id_propiedad']."</td>";
  echo 
"<td>".$MostrarFila['direccion']."</td>";
  echo 
"<td>".$MostrarFila['foto']."</td>";
  echo 
"</tr>";
 }
 echo 
"</table>";

 
//******--------determinar las páginas---------******//
 
$NroRegistros=mysql_num_rows(mysql_query("SELECT * FROM propiedades.... $condiciones ORDER BY id_propiedad",$conexion));
 
 
$PagAnt=$PagAct-1;
 
$PagSig=$PagAct+1;
 
$PagUlt=$NroRegistros/$RegistrosAMostrar;

 
//verificamos residuo para ver si llevará decimales
 
$Res=$NroRegistros%$RegistrosAMostrar;

 
// si hay residuo usamos funcion floor para que me
 // devuelva la parte entera, SIN REDONDEAR, y le sumamos
 // una unidad para obtener la ultima pagina
 
if($Res>0$PagUlt=floor($PagUlt)+1;
 
 
//desplazamiento
 
echo "<a href='javascript:Pagina(1)'>Primero</a> ";
     if(
$PagAct>1
         echo 
"<a href='javascript:Pagina(" $PagAnt")'>Anterior</a> ";

 echo 
"<strong>Pagina ".$PagAct."/".$PagUlt."</strong>";
     if(
$PagAct<$PagUlt)
         echo 
"<a href='javascript:Pagina(" .$PagSig")'>Siguiente</a> ";

 echo 
"<a href='javascript:Pagina(" .$PagUlt")'>Ultimo</a>"

INDEX.PHP
Código:
// MOSTRAR RESULTADOS DE LA CONSULTA
function MostrarConsulta(datos){
	divResultado = document.getElementById('resultado');
	ajax=objetoAjax();
	ajax.open("GET", "consulta.php?pag="+nropagina+"&id_tipopropiedad="+id_tipopropiedad+"&id_operacion="+id_operacion+"&select1="+select1+"&select2="+select2+"&id_moneda="+id_moneda);
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			divResultado.innerHTML = ajax.responseText
		}
	}
ajax.send(null)
}


// PAGINAR RESULTADOS
function Pagina(nropagina){
 //donde se mostrará los registros
 divContenido = document.getElementById('resultado');
 
 ajax=objetoAjax();
 //uso del medoto GET
 //indicamos el archivo que realizará el proceso de paginar
 //junto con un valor que representa el nro de pagina
 ajax.open("GET", "consulta.php?pag="+nropagina);
 divContenido.innerHTML= '<img src="anim.gif">';
 ajax.onreadystatechange=function() {
  if (ajax.readyState==4) {
   //mostrar resultados en esta capa
   divContenido.innerHTML = ajax.responseText
  }
 }
 //como hacemos uso del metodo GET
 //colocamos null ya que enviamos 
 //el valor por la url ?pag=nropagina
 ajax.send(null)
}


  <?php include('buscador.php')?>

<div id="resultado"></div>
Cuando presiono en BUSCAR no muestra los resultados dentro del div ni me tira ningún error.

¿Podrían decirme por favor si la parte de ajax está bien o no, o si me falta agregarle algo? ¿Podrían decirme qué estoy haciendo mal?

¿Está bien puesta a orden en el form como lo que escribí en el onSubmit?

Llevo tiempo con esto y me cuesta entenderlo, por eso les pido encarecidamente a los que saben si pueden darme una mano.
Aunque sea tonto o no lo crean, a quienes algunas cosas les parezca muy fácil, a otros nos cuesta.

Gracias nuevamente y saludos cordiales.

Marx.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #23 (permalink)  
Antiguo 29/05/2009, 07:23
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Respuesta: Paginar por capas sin resetar la pagina

Nadie puede corregirme lo que puse dentro del ajax o darme un ejemplo?

Gracias.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #24 (permalink)  
Antiguo 01/06/2009, 21:08
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: Paginar por capas sin resetar la pagina

¿Que función mandas llamar en tu botón buscar?, por otro lado no veo en que parte de tu función MostrarConsulta() rescates alguna de las variables que estas mandando llamar, como por ejemplo nropagina, id_tipopropiedad, id_operacion y las demás.

Saludos.
  #25 (permalink)  
Antiguo 03/06/2009, 09:50
 
Fecha de Ingreso: marzo-2008
Mensajes: 6
Antigüedad: 16 años, 1 mes
Puntos: 0
Paginar por capas sin resetar la pagina

hola, yo queria saber si alguien puede ayudarme,
tengo unos links en mi pagina que vendrian a ser mi menu de navegacion, lo que quiero saber es si al hacer click en esos links me muestre la pagina abajo sin recargar la pagina, esto sin usar frames

Gracias
Claudio
  #26 (permalink)  
Antiguo 03/06/2009, 10:01
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Respuesta: Paginar por capas sin resetar la pagina

Hola clauvaldez: creo que yo puedo colaborar con tu caso ya que en mi búsqueda pude encontrar calculo, lo que tú necesitas.

Chequea este link sino avisas:

MENUES SIN RECARGAR LA PAGINA

Salutes.

Marx.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #27 (permalink)  
Antiguo 03/06/2009, 11:54
 
Fecha de Ingreso: marzo-2008
Mensajes: 6
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: Paginar por capas sin resetar la pagina

gracias por la info..

lo segui paso a paso pero no obtuve ningun resultado

a vos te funciono??

Gracias!..
  #28 (permalink)  
Antiguo 08/06/2009, 11:46
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Respuesta: Paginar por capas sin resetar la pagina

Cita:
Iniciado por GatorV Ver Mensaje
¿Que función mandas llamar en tu botón buscar?,
mmmm... desde el botón llamo a la función MostrarConsulta(); ... ¿está mal? Lo hago así:

Código HTML:
<form name="consulta" action="" onsubmit="MostrarConsulta('consulta.php'); return false"> 
Cita:
por otro lado no veo en que parte de tu función MostrarConsulta() rescates alguna de las variables que estas mandando llamar, como por ejemplo nropagina, id_tipopropiedad, id_operacion y las demás.
Para rescatar la variable, ¿se hace de esta manera?
Código:
var id_tipopropiedad = document.getElementById("id_tipopropiedad").value;
¿Cómo llamo a la variable nropagina si ésta no se encuentra dentro de la función MostrarConsulta()?

Gracias. MArx.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #29 (permalink)  
Antiguo 08/06/2009, 20:27
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: Paginar por capas sin resetar la pagina

Exacto tienes que rescatar cada variable que quieras enviar, estas no se envian de forma automatica.

Pues si necesitas enviarla vas a tener que pasarla como parámetro o ajustar tu script AJAX para que si no recibe el nro de pagina muestre la pagina 1.

Saludos.
  #30 (permalink)  
Antiguo 09/06/2009, 04:42
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 4 meses
Puntos: 126
Respuesta: Paginar por capas sin resetar la pagina

Hola

La verdad es que me ha dado pereza leer todo el tema. Aquí os dejo algo que hice hace algún tiempo. Se trata de mostrar una ventana de aviso al usuario, diciendole si tiene algún mensaje. Claro está que tendrás que modificarla, ya que esta es una ventana emergente, uso ASP, se consulta la bd cada X tiempo, etc..

Nota: Como se va a recibir javascript via ajax necesitarás
leerjsdeajax.js
Código javascript:
Ver original
  1. var tagScript = '(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)';
  2. /**
  3. * Eval script fragment
  4. * @return String
  5. */
  6. String.prototype.evalScript = function()
  7. {
  8.         return (this.match(new RegExp(tagScript, 'img')) || []).evalScript();
  9. };
  10. /**
  11. * strip script fragment
  12. * @return String
  13. */
  14. String.prototype.stripScript = function()
  15. {
  16.         return this.replace(new RegExp(tagScript, 'img'), '');
  17. };
  18. /**
  19. * extract script fragment
  20. * @return String
  21. */
  22. String.prototype.extractScript = function()
  23. {
  24.         var matchAll = new RegExp(tagScript, 'img');
  25.         return (this.match(matchAll) || []);
  26. };
  27. /**
  28. * Eval scripts
  29. * @return String
  30. */
  31. Array.prototype.evalScript = function(extracted)
  32. {
  33.                 var s=this.map(function(sr){
  34.                 var sc=(sr.match(new RegExp(tagScript, 'im')) || ['', ''])[1];
  35.                 if(window.execScript){
  36.                 window.execScript(sc);
  37.                 }
  38.                 else
  39.                 {
  40.                  window.setTimeout(sc,0);
  41.                 }
  42.                 });
  43.                 return true;
  44. };
  45. /**
  46. * Map array elements
  47. * @param {Function} fun
  48. * @return Function
  49. */
  50. Array.prototype.map = function(fun)
  51. {
  52.         if(typeof fun!=="function"){return false;}
  53.         var i = 0, l = this.length;
  54.         for(i=0;i<l;i++)
  55.         {
  56.                 fun(this[i]);
  57.         }
  58.         return true;
  59. };


Código javascript:
Ver original
  1. <script type="text/javascript" src="./leerjsdeajax.js"></script>
  2. <script type="text/javascript">
  3.  function creaAjax(){
  4.     var ajaxs = ["Msxml2.XMLHTTP","Msxml2.XMLHTTP.4.0","Msxml2.XMLH TTP.5.0","Msxml2.XMLHTTP.3.0","Microsoft.XMLHTTP"];
  5.     var ajax = false;
  6.     for(var i=0 ; !ajax && i<ajaxs.length ; i++){
  7.         try{
  8.             ajax = new ActiveXObject(ajaxs[i]);   // Internet Explorer
  9.         }
  10.         catch(e) {
  11.             ajax = false;
  12.         }
  13.     }
  14.     if(!ajax && typeof XMLHttpRequest!='undefined') {
  15.         ajax = new XMLHttpRequest();  // Firefox, Opera 8.0+, Safari
  16.     }
  17.     return ajax;
  18. }
  19.  
  20.  
  21.  
  22.  
  23.  
  24. function Ventana() {
  25. var ajax=creaAjax();
  26.  
  27. var objetosel = document.getElementById("contenedor");
  28. ajax.open('GET','ventanamessenger_ajax.asp',true);
  29. ajax.send(null);
  30. ajax.onreadystatechange = function() {
  31.  
  32.         if (ajax==null){
  33.         alert ("Tu navegador web no soporta AJAX!");
  34.         return;
  35.     }
  36.  
  37.         if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3) {
  38.                                         objetosel.innerHTML = "Cargando ...";
  39.             }
  40.  
  41.                 else if (ajax.readyState==4){
  42.                     if(ajax.status==200){  
  43.  
  44.         var scs=ajax.responseText.extractScript();
  45.             objetosel.innerHTML = ajax.responseText.stripScript();
  46.         scs.evalScript();
  47.  
  48.  
  49.                    }
  50.                     else if (ajax.status==404)
  51.                                              {
  52.  
  53.                                     objetosel.innerHTML = "La dirección no existe";
  54.                                              }
  55.                                      else
  56.                                              {
  57.                                     objetosel.innerHTML = "Se ha producido un error.<br />Lo mas probable es que no hayas seleccionad una Fecha";
  58.                                              }
  59.                                     }
  60.                   }
  61.        
  62. }
  63.  
  64.  
  65.  
  66. window.setInterval("Ventana()",90000); // 10 minutos 600000
  67. window.onload=setTimeout("Ventana()",1000); // 1 segundos
  68. //window.onload = Ventana;
  69. </script>
  70. </head>
  71. <body>
  72. <table border="1" width="800px">
  73. <tr height="500px">
  74. <td>hola
  75. </td>
  76. </tr>
  77. </table>
  78.  
  79. <style type="text/css"><!--
  80. #VentanaTipoMsgr { z-index:15000; right:2px; bottom:-2px; position:fixed; padding:0px; width:207px; height:123px; background:transparent url(cuerpo_ventanamodal.gif); }
  81. #VentanaTipoMsgr a { font-family:tahoma; font-size:9px; color:#59616E; font-weight:bold; text-decoration:none; }
  82. #btn_vm_paginador a{ background-color:#FFFFFF; color:#59616E; font-family:Arial, Helvetica, sans-serif; font-size:9px; font-weight:900;text-decoration:none;padding:2px; border: 1px solid #C9C9C9;border-width: 1px 1px 1px 1px; }
  83. -->
  84. </style>
  85. <div id="contenedor"></div>
  86.  
  87. <div id="VentanaTipoMsgr" style="bottom:-200px; display:none;">
  88. <div style="position:absolute; top:3px; right:5px;cursor: pointer;"><img id="btn_vm_cerrar" src="cuerpo_cerrar.gif" width="15px" height="20px" border="0" /></div>
  89. <div id="CabezaMsg" style="padding:6px 6px 6px 3px; text-align:left; font-family:tahoma; font-size:11px; font-weight:bold; color:#000000;"></div>
  90. <div id="CuerpoMsg" style="position:absolute; top:30px; right:5px; left:5px; text-align:left; color: #59616E; font-size: 9px; font-family:verdana;"></div>
  91. <div style="clear:both;"></div>
  92. </div>
  93.  
  94. </body>


ventanamessenger_ajax.asp

Código asp:
Ver original
  1. SQL ="SELECT campos FROM tabla "
  2. set rs = oConn.Execute(SQL)
  3.  
  4. registros = rs.getrows()
  5. rs.Close
  6. Set rs = Nothing
  7. oConn.Close
  8. Set oConn = Nothing
  9.  
  10. TextoMensaje = ""
  11. IF UBound(registros,2) = 0 then
  12. TextoMensaje =  "'De: <a href=autor target=_blank>" & registros(De,0) & "</a><br />Asunto: <a href=mensaje target=_blank>" & registros(Asunto,0) & "</a><br/>Mensaje: " & Mid(registros(Contenido,0),1,80) &"'"
  13.  
  14. ELSE
  15.  
  16. For i = 0 to UBound(registros,2)
  17. If i <> 0 then
  18. TextoMensaje = TextoMensaje & ","
  19. End If
  20.  
  21. If i = 0 then ' es el primero de varios
  22. TextoMensaje = TextoMensaje & "'De: <a href=\'autor\' target=\'_blank\'>" & registros(De,i) & "</a><br />Asunto: <a href=\'mensaje\' target=\'_blank\'>" & registros(Asunto,i) & "</a><br/>Mensaje: " & Mid(registros(Contenido,i),1,80) &"<br /><br /><div id=\'btn_vm_paginador\' align=\'center\'><a href=\'javascript:void(0);\' onclick=\'vm_paginador("&i+1&");\'>Siguiente &raquo;</a></div>'"
  23. Elseif i < UBound(registros,2) then
  24. 'TextoMensaje = TextoMensaje & "'De: <a href=\'autor\' target=_blank\'>" & registros(De,i) & "</a><br />Asunto: <a href=\'mensaje\' target=\'_blank\'>" & registros(Asunto,i) & "</a><br/>Mensaje: " & Mid(registros(Contenido,i),1,80) &"<br /><br /><div id=\'btn_vm_paginador\' align=\'center\' onclick=\'vm_paginador("&i-1&");\'>&laquo; Anterior</div>&nbsp;&nbsp;&nbsp;<div id=\'btn_vm_paginador\' align=\'center\'  onclick=\'vm_paginador("&i+1&");\'>Siguiente &raquo;</div>'"
  25. TextoMensaje = TextoMensaje & "'De: <a href=\'autor\' target=_blank\'>" & registros(De,i) & "</a><br />Asunto: <a href=\'mensaje\' target=\'_blank\'>" & registros(Asunto,i) & "</a><br/>Mensaje: " & Mid(registros(Contenido,i),1,80) &"<br /><br /><div id=\'btn_vm_paginador\' align=\'center\'><a href=\'javascript:void(0);\' onclick=\'vm_paginador("&i-1&");\'>&laquo; Anterior</a>&nbsp;&nbsp;&nbsp;<a href=\'javascript:void(0);\' onclick=\'vm_paginador("&i+1&");\'>Siguiente &raquo;</a></div>'"
  26. Else ' es el último
  27. TextoMensaje = TextoMensaje & "'De: <a href=\'autor\' target=\'_blank\'>" & registros(De,i) & "</a><br />Asunto: <a href=\'mensaje\' target=\'_blank\'>" & registros(Asunto,i) & "</a><br/>Mensaje: " & Mid(registros(Contenido,i),1,80) &"<br /><br /><div id=\'btn_vm_paginador\' align=\'center\'><a href=\'javascript:void(0);\' onclick=\'vm_paginador("&i-1&");\'>&laquo; Anterior</a></div>'"
  28. End If
  29.  
  30. Next 'i
  31. END IF
  32. %>
  33.  
  34.  
  35. <script type="text/javascript">
  36. var msg = new Array(<%=TextoMensaje%>); // En este arreglo está todo los que nos trae la consulta
  37. var Ventana_Modal = {};
  38. Ventana_Modal.banner = {
  39.  posicion : {
  40.  bajar_pos : '-127',
  41.  subir_pos : '-4'
  42.  }
  43. };
  44. Ventana_Modal.banner.hoja = 'posicion';
  45. // Variables Globales
  46. var vmDivID = 'VentanaTipoMsgr';
  47. var Retraso = 5 * msg.length;
  48.  
  49.  
  50. vm_retraso(Retraso);
  51.  
  52. //--[Funciones]-----------------------------------------------------------------//
  53.  
  54. var btn_vm_cerrar_elem = document.getElementById('btn_vm_cerrar');
  55. btn_vm_cerrar_elem.onclick = function (){
  56. vm_mover(vmDivID,Ventana_Modal.banner[Ventana_Modal.banner.hoja].bajar_pos, "' + msg[0] + '",'bajar');
  57. return false;
  58. }
  59.  
  60. //var btn_vm_paginador_msg = document.getElementById('btn_vm_paginador');
  61. //btn_vm_paginador_msg.onclick = function (){
  62. //vm_paginador(elID);
  63. //return false;
  64. //}
  65.  
  66. function vm_paginador(mensajeID) {
  67.  var soportado = (document.getElementById);
  68. if (!soportado) return;
  69. var elMsg = document.getElementById('CuerpoMsg');
  70. elMsg.innerHTML = msg[mensajeID];
  71. }
  72.  
  73.  
  74. function vm_retraso(seg){
  75. seg = seg || 0;
  76. setTimeout('vm_mover(vmDivID,' + Ventana_Modal.banner[Ventana_Modal.banner.hoja].subir_pos + ', "' + msg[0] + '");',1000 * seg);
  77. setTimeout('vm_mover(vmDivID,' + Ventana_Modal.banner[Ventana_Modal.banner.hoja].bajar_pos + ', "' + msg[0] + '",\'bajar\');',15000 * msg.length);
  78. }
  79.  
  80. var elemento
  81. var alto
  82. var leyenda
  83. function vm_mover(elemID,x,txt,direccion){
  84. elemento = elemID
  85. alto = x
  86. leyenda =  txt
  87.  
  88.  var soportado = (document.getElementById);
  89. if (!soportado) return;
  90. var DIVruta = document.getElementById(elemento);
  91. var Cortina = parseInt(DIVruta.style.bottom);
  92. var cabecera = document.getElementById('CabezaMsg');
  93. var texto = document.getElementById('CuerpoMsg');
  94.  
  95. DIVruta.style.display = 'block';
  96. if(direccion == 'bajar'){
  97.  
  98. if(Cortina > x){
  99. Cortina -= 5;
  100. DIVruta.style.bottom = Cortina + 'px';
  101. setTimeout('vm_mover(elemento,alto,leyenda,\'bajar\');',15);
  102. }
  103. }else{
  104. if(Cortina < x){
  105. Cortina += 5;
  106. DIVruta.style.bottom = Cortina + 'px';
  107. cabecera.innerHTML = "Tienes (<span style='color:#FF0000;'><%=UBound(registros,2)+1%></span>) mensajes sin leer";
  108. texto.innerHTML = leyenda;
  109. setTimeout('vm_mover(elemento, alto,leyenda);',15);
  110. }
  111.  }
  112. }
  113. </script>

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
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 08:38.