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

Paginar resultados en una capa sin resetear la página

Estas en el tema de Paginar resultados en una capa sin resetear la página en el foro de Frameworks JS en Foros del Web. Hola a todos!!!!! Luego de una larga lucha y de mucho estudio por mi parte, logré armar un buscador con el paginador dentro de una ...
  #1 (permalink)  
Antiguo 02/09/2009, 07:39
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Pregunta Paginar resultados en una capa sin resetear la página

Hola a todos!!!!!

Luego de una larga lucha y de mucho estudio por mi parte, logré armar un buscador con el paginador dentro de una capa para ver los resultados de la búsqueda sin que se resetee toda la misma.

El buscador está armado con listas anidadas.

El UNICO problema RARO que tengo, es que en mi PC me funciona PERFECTO, pero al subir todo al servidor de internet, cuando hago la misma búsqueda no me está trayendo los resultados seleccionados según lo que elijo de cada LISTA ANIDADA, sino que me trae directamente TODO.

Les paso el código Ajax para que lo vean:

paginador.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 Pagina(nropagina){
 //donde se mostrará los registros
 divContenido = document.getElementById('respuesta');
 
 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

	// declaro las variables de los document.getElementById que recupero de la pagina
	var select1 = document.getElementById("select1"); 
	var select2 = document.getElementById("select2"); 
	var select3 = document.getElementById("select3"); 
	var id_cocina = document.getElementById("id_cocina"); 
	var id_precio = document.getElementById("id_precio"); 

	// ...y lo envio en la variable m.value para q lo procese resto_lista.php
	ajax.open("GET","resto_lista.php?pag="+nropagina+"&select1="+select1.value+"&select2="+select2.value+"&select3="+select3.value+"&id_cocina="+id_cocina.value+"&id_precio="+id_precio.value); 

 divContenido.innerHTML= '<img src="ajaxloader.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)
}
El botón de BUSCAR es así:
Código HTML:
<input name="boton" type="button" id="boton" onclick="Pagina(1);" value="Buscar" /> 
Tomo las variables enviadas de esta manera:
resto_lista.php
Código PHP:
// realizar esta funci&oacute;n si se apret&oacute; el bot&oacute;n de enviar en el formulario de busqueda
if(isset($_GET['boton']))

// declarar variables los datos del formulario
$select1 $_GET['select1'];
$select2 $_GET['select2'];
$select3 $_GET['select3'];
$idcocina $_GET['id_cocina'];
$idprecio $_GET['id_precio'];
{


// declarar las condiciones usando la opci&oacute;n WHERE, dependiendo de lo enviado en el formulario
$condiciones "";
if (
$select1 != ""$condiciones .= " AND restaurantes.id_provincia = $select1";
if (
$select2 != "" && $condiciones != ""$condiciones .= " AND restaurantes.id_localidad = $select2";
if (
$select3 != "" && $condiciones != ""$condiciones .= " AND restaurantes.id_zona = $select3";
if (
$idcocina != "" && $condiciones != ""$condiciones .= " AND restaurantes.id_cocina = $idcocina";
if (
$idprecio != "" && $condiciones != ""$condiciones .= " AND restaurantes.id_precio = $idprecio";

// obtener datos de la base
$registros 8;

$pag $_GET['pag'];

if (!
$pag) {
    
$inicio 0;
    
$pag 1;
    }
    else {
    
$inicio = ($pag 1) * $registros;

        
$sql "SELECT * FROM ........ WHERE ....... $condiciones ORDER BY id_rubro";

$result mysql_query($sql$conexion);

$total_registros mysql_num_rows($result);

$result mysql_query("SELECT * FROM ....... WHERE ....... $condiciones ORDER BY id_rubro LIMIT $inicio, $registros"$conexion) or die (mysql_error());

.........
// se listan los resultados en 2 filas y 4 columnas y se arma el paginador...


// Paginador
$total_paginas ceil($total_registros $registros);

 
$PagAnt=$pag-1;
 
$PagSig=$pag+1;

if((
$PagAnt) > 0) {
    echo 
"<a href='javascript:Pagina(" .$PagAnt")'>&laquo; ANTERIOR</a> ";
    } else {
    echo 
"<b>&laquo; ANTERIOR</b> ";
    } 
    for (
$i=1$i<=$total_paginas$i++){
    if (
$pag == $i) {
    echo 
"<b>".$pag."</b> ";
    } else {
    echo 
"<a href='javascript:Pagina(" .$i")'>$i</a> ";
    } 
    }
    if((
$PagSig)<=$total_paginas) {
    echo 
" <a href='javascript:Pagina(" .$PagSig")'>SIGUIENTE &raquo;</a>";
    } else {
    echo 
"<b>SIGUIENTE &raquo;</b> "
¿Por qué en mi PC funciona y en el servidor de internet no?
¿alguna sugerencia después de haber luchado tanto con esto?

Gracias a todos y saludos.
Marx.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #2 (permalink)  
Antiguo 02/09/2009, 08:44
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 resultados en una capa sin resetear la página

Te recomiendo que uses Firefox con la herramienta Firebug para que vayas viendo las llamadas AJAX y el resultado que te devuelven, así puedes diagnosticar que datos estas enviando y recibiendo.

Saludos.
  #3 (permalink)  
Antiguo 02/09/2009, 11:54
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Respuesta: Paginar resultados en una capa sin resetear la página

GatorV:

Está pasando los mismos parámetros en offline y en online.

En el formulario buscador selecciono la opcion Buenos Aires de la primer solapa y en la siguiente me aparecen las localidades correspondientes:
Código HTML:
http://www.misitio.com.ar/resto/proceso.php?select=select2&opcion=1
En ajax lo procesa de esta manera:
ajax.open("GET", "proceso.php?select="+idSelectDestino+"&opcion="+o pcionSeleccionada, true);

En el formulario buscador selecciono la opcion Zona Norte de la segunda solapa y en la siguiente me aparecen los barrios correspondientes:
Código HTML:
http://www.misitio.com.ar/resto/proceso.php?select=select3&opcion=2
al presionar BUSCAR, me devuelve esto:
Código HTML:
http://www.misitio.com.ar/resto/resto_lista.php?pag=1&select1=1&select2=2&select3=8
Los cuales serían:
select1=1 (Bs As)
select2=2 (Zona Norte)
select3=3 (Martinez)

De esta manera, en mi servidor de prueba en la Pc me funciona perfecto, pero en el server de internet me devuelve todo.

Te juro... me costó un montón y ahora que lo terminé y lo subí... no puedo creer que no funcione. Encima no me tira ningún error. No sé... no sé que hacer.

¿El botón del formulario esta bien?

Gracias GatorV por todo.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #4 (permalink)  
Antiguo 02/09/2009, 12:52
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 resultados en una capa sin resetear la página

Lo que veo es que tu script PHP pregunta si esta set $_GET['boton'] y no veo que envies esa variable por el paginador.

Saludos.
  #5 (permalink)  
Antiguo 03/09/2009, 09:07
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Respuesta: Paginar resultados en una capa sin resetear la página

Listo GatorV... que ojo que tienes brother...

En la parte de ajax, en las variables le agregué la del botón buscar:

var buscar = document.getElementById("buscar");

...y se la pasé por GET, al final de las otras:

ajax.open("GET","resto_lista.php?pag="+nropagina+. ........+"&buscar="+buscar.value,true);

Ya funciona... pero me pasó una pavada que quizás sea algo parecido a este tema...
En la misma página al lado de este buscador, le agregué otro buscador pequeño que es el que busca por palabra. Lo probé con un botón común y funcinó... cambié el botón por una imagen con las mismas propiedades y no funcionó.
Lo que veo es que si la propiedad del boton dice type="button" funciona, pero si se lo cambio a type="image" me envía los datos al navegador y no realiza la busqueda.

Este es el boton común:
<input name="buscar" type="button" id="buscar" onclick="Paginar(1);" value="Buscar"/>

Lo reemplacé por este:
<input name="buscar" type="image" id="buscar" onclick="Paginar(1);" src="xnombre.png" value="Buscar"/>

Y... la última... no me aparecen los acentos en el resultado de la busqueda... pero eso no creo q sea problema de la parte de programación, no?

Gracias GatorV por todo este avance que he tenido con esto.

Abrazo. Marx.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #6 (permalink)  
Antiguo 03/09/2009, 11:36
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 resultados en una capa sin resetear la página

No debería de haber una diferencia si usas el type="image" si estas enviando los datos por AJAX ya que lo rescatas igual, la unica diferencia es si lo haces por un form normal, en ese caso si afecta ya que se envian las variables como buscar_x y buscar_y.

Saludos.
  #7 (permalink)  
Antiguo 05/09/2009, 08:59
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Respuesta: Paginar resultados en una capa sin resetear la página

Hola GatorV.

Pasó justamente lo que has dicho, sol oque no entendí el xq pasa esto si es enviado por un form normal.
Lo que hice fue algo medio rebuscado, pero que funcionó, solo que en la url me coloca el ancla que puse debajo del resultado del paginador.

Puse directamente la imagen como botón y le agregué esto en el href un ancla:
Código HTML:
<a href="#b" onClick="Paginar(1);"><img src="imagesite/buscarxnombre.png" width="19" height="18" border="0" id="buscarb" name="buscarb"/></a> 
Y debajo de la consulta:
Código HTML:
<a name="#b" id="#b"></a> 
De esta manera el ajax lo procesa y cuando me muestra el resultado, no se desplaza el scroll de la página para arriba. Para salir del paso...

El tema de los acentos lo solucioné con esta simple línea al comienzo de cada consulta
Código PHP:
header("Content-Type: text/html; charset=iso-8859-1"); 
Por lo menos, ahora ya está funcionando todo.
Mil gracias como siempre GatorV.

Abrazo. Marx.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #8 (permalink)  
Antiguo 07/09/2009, 16:24
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 resultados en una capa sin resetear la página

Para que no te ponga el ancla usa:
Código HTML:
Ver original
  1. <a href="javascript:void(0);" onclick="funcionjs();">

Saludos.
  #9 (permalink)  
Antiguo 08/09/2009, 06:17
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Cita:
Iniciado por GatorV Ver Mensaje
Para que no te ponga el ancla usa:
Código HTML:
Ver original
  1. <a href="javascript:void(0);" onclick="funcionjs();">

Saludos.
aaaaaah!!!! Perfecto GatorV. Ahora está de maravilla.

Muchas gracias

Abrazo. Marx.

GatorV. Me surgió una duda... a ver si puedes orientarme.

Realizo una búsqueda y me trae los resultados que encontró. Selecciono cualquiera y me lleva a la página con su descripción completa. En esa misma página hay un botón con una opción "Volver a la página anterior". Si la presiono, vuelve, pero los resultados de la búsqueda ya no están y hay que hacer todo de nuevo.

¿Hay alguna manera de hacer que esos resultados se mantengan y no desaparezcan?

Gracias y saludos. Marx.

PD: La opción la tengo seteada así: <a href="#" onclick="history.back(-1);">VOLVER A LA PAGINA ANTERIOR</a>

Bueno... una de cal y una de arena.

Al link para volver a la página anterior le puse esto:
Código HTML:
<a href="javascript:onclick=window.history.back(-1);">VOLVER A LA PAGINA ANTERIOR</a> 
El UNICO problema es que en Firefox FUNCIONA, vuelve a la página anterior y me mantiene los resultados de la búsqueda, pero en IE no.

¿Se puede hacer algo para que en este pu-- IE funcione?

Gracias. Marx.

Bue... funciona en el servidor de pruebas de mi PC. Subí todo al servidor de internet y nada... sigue sin funcionar.

Bue... funciona en el servidor de pruebas de mi PC. Subí todo al servidor de internet y nada... sigue sin funcionar.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.

Última edición por GatorV; 10/09/2009 a las 14:29
  #10 (permalink)  
Antiguo 10/09/2009, 14:30
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 resultados en una capa sin resetear la página

Es uno de los problemas al paginar con AJAX, lo que tienes que hacer es implementar lo que se conoce como "ajax navigation" te recomiendo buscar en google ya que no es nada sencillo, ya que tienes que estar manejando muy bien los links con hashes (la parte con #).

Saludos.
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 01:23.