Asp / Ajax /paging

[emajesus]

Amigos, tengo construida mi paginación en ASP; no obstante, deseo que cada vez que el usuario clica en página siguiente, no tenga que refrescar la página, sino que mediante AJAX veo los siguientes registros de modo más sencillo y veloz.

De AJAX ando pelado; he estado buscando y no he sabido hacer su combinación. ¿Podrían echarme una mano?

Saludos y Feliz 2008,

Emajesus

[Shiryu_Libra]

basicamente, debes tener un DIV, el cual sera para desplegar los resultados, la paginacion que ya tienes construida no cambiara, solamente deberas ponerla en la pagina 2, la cual sera llamada por el AJAX dentro de la pagina 1

tienes algun codigo de ajax que estes intentando, o estas desde 0??

[emajesus]

Estoy desde cero; trato de crear un sistema de comentarios de mis estudiantes a unas noticias; el paginado en asp ... no problem ... pero implementar el ajax ... nada de nada

[El_Metallick]

no es muy complicado lo que quieres pero si es bastante complicado de explicar si es que no tienes algo de conocimiento sobre ajax y javascriptp ero intentare como dice donShiryu_Libra tienes que tener un div en el que tengas el contenido de los n registros de tu bd pongamole un

Código:

<div id="contenido"
...
</div>

ahora mediante ajax tienes que hacer la llamada a la página asp que te genere la lista de elementos para cada página algo asi:

Código:

//Instancias el objeto XMLHttpRequest
//pag: la página a mostrar
//regs: el número de registros por página
function paginacion(pag,regs) {
    if (window.XMLHttpRequest) {
        ajax = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }

    //Mandas los datos de la pagina que necesitas para la paginacion al archivo que la construye
    ajax.open('get','paginacion.asp?pag=' + pag + '&regs=' + regs,true);
    ajax.send(null);
        
    ajax.onreadystatechange = function() {
        if (ajax.readyState == 4) {
            document.getElementById('contenido').innerHTML = ajax.responseText;
        }
    }

Una vez teniendo esto tu pagina paginacion.asp deberia recivir por get pag y regs para que con este identifique que registros mostrar. Ejemplo:

regs=10 y pag=1 se muestran los registros 1 - 10
regs=10 y pag=2 se muestran los registros 11 - 20

regs=20 y pag=1 se muestran los registros 1 - 20
regs=20 y pag=2 se muestran los registros 21 - 40

espero haber sido explicativo y claro

Saludos

--- Editado ---

Reemplazé el error que tenia :P

[emajesus]

No logro implementarlo; cuando utilizo una página senilla, correcto; peor cuando trabajo con includes ... ya no me funciona ... imagino que aquí reside el problema.

[emajesus]

Os explico; tengo una página matriz en la que incluyo las distintas secciones; cuando trabajo sin includes, es decir, con la sección por separado, vuestro código me va genial; pero cuando funciono con la página matriz, la cosa ya no funciona. El botón de "siguiente página" me pide la página matriz, y la vuelve a cargar.

¿Qué puedo hacer?

He modificado el archivo JS, añadiendo una variable "seccion" que indica la sección en la que me encuentro para su inclusión en la matriz.

//Instancias el objeto XMLHttpRequest
//pag: la página a mostrar
//regs: el número de registros por página
function paginacion(seccion,page,regs) {
if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}

//Mandas los datos de la pagina que necesitas para la paginacion al archivo que la construye
ajax.open('get','01seccion.asp?seccion=' + seccion + '&page=' + page + '&regs=' + regs,true);
ajax.send(null);

ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
documentElementById('contenido').innerHTML = ajax.responseText;
}
}



Sin embargo, me sigue sin funcionar.

-la página donde incuyo el paginado es: NOTICIAS.asp
-la página matriz es: 01seccion.asp

[El_Metallick]

que pagina siguiente deberia ser algo asi:

<a href="javascript: paginacion(seccion,page+1,regs)">siguiente ></a>

saludos

[emajesus]

Iniciado por El_Metallick

que pagina siguiente deberia ser algo asi:

<a href="javascript: paginacion(seccion,page+1,regs)">siguiente ></a>

saludos

Hay una cosa que no entiendo.

Tengo una página (01seccion.asp --> 01seccion.asp?seccion=' + seccion + '&page=' + page + '&regs=' + regs) en una de cuyas celdas se incluye la página Noticias.asp (a través de un include)

La página que tiene el código del paginado es (donde se despliegan los registros y el código del paginado):

noticias.asp --> es la seccion=82

Y la página del JS es:

paging.js

Cuando le doy a la página 2 (page=2), me direcciona hacia: 01seccion.asp?seccion=82&page=2&regs=5

Es precisamente aquí donde me vuelve a refrescar toda la página.


No logré entender tu última respuesta.

Gracias apor ti apoyo,

Emajesus

[El_Metallick]

lo que quiero decir es que los links no tienen que apuntar a 01seccion.asp?seccion=82&page=2&regs=5, osea no tienen que ser

<a href="01seccion.asp?seccion=82&page=2&regs=5">2</a>
<a href="01seccion.asp?seccion=82&page=3&regs=5">3</a>
<a href="01seccion.asp?seccion=82&page=4&regs=5">4</a>
<a href="01seccion.asp?seccion=82&page=5&regs=5">5</a>

si no que tienen que apuntar la funcion javascript paginacion algo asi:

<a href="javascript: paginacion('82','2','5')">2</a>
<a href="javascript: paginacion('82','3','5')">3</a>
<a href="javascript: paginacion('82','4','5')">4</a>
<a href="javascript: paginacion('82','5','5')">5</a>

la idea es que la función mediante ajax llame al paginador y devuelva los registros que correspondan.

Saludos

[emajesus]

Soy un desastre; he construido los enlaces tal como me indicas pero no me ejecuta el link.

Este es el archivo JS: paging.js (¿tiene algún error? cuando hago clic es como si la función no estuviera activada:

//Instancias el objeto XMLHttpRequest
//seccion: la seccion a que corresponde
//page: la página a mostrar
//mostrar: el número de registros por página
function paginacion(seccion,page,mostrar) {
if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}

//Mandas los datos de la pagina que necesitas para la paginacion al archivo que la construye
ajax.open('get','noticias.asp?seccion=' + seccion + '&page=' + page + '&mostrar=' + mostrar,true);
ajax.send(null);

ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
documentElementById('registros').innerHTML = ajax.responseText;
}
}



Te recuerdo que noticias.asp es la página en la que recojo los valores de la Base de Datos y los despliego. Esta página se incluye posteriormente a través de un Include en 01seccion.asp


Este es el código de paginación que he incluido en noticias.asp.

<%
' Ahora mostramos los enlaces a las otras páginas con el resto de los registros...

If pagina_actual > 1 Then
%>
<span class="btn_anterior"><a href="javascript: paginacion('<%= seccion %>','<%= pagina_actual - 1 %>','5')">«
Anterior</a></span>
<%End if%>

<%If pagina_actual > 5 Then
%>
<span class="btn_anterior"><a href="javascript: paginacion('<%= seccion %>','<%= 1 %>','5')">
Primera</a></span>&nbsp;···

<%
End If
' mostramos la paginacion por numeros de página
For I = 1 To cant_paginas
If I = pagina_actual Then
%>
<span class="btn_activa"><%= I %></span>
<%
Else
If I < pagina_actual+5 AND I > pagina_actual-1 Then
%>
<span class="btn_navega"><a href="javascript: paginacion('<%= seccion %>','<%= I %>','5')"><%= I %></a></span>
<%
End If
End If
Next 'I%>

<%If pagina_actual < cant_paginas - 5 Then
%>
···&nbsp;<span class="btn_siguiente"><a href="javascript: paginacion('<%= seccion %>','<%= cant_paginas %>','5')">
&Uacute;ltima</a></span>
<%End if%>

<%If pagina_actual < cant_paginas Then
%>
<span class="btn_siguiente"><a href="javascript: paginacion('<%= seccion %>','<%= pagina_actual + 1 %>','5')">Siguiente
»</a></span>
<%
End If
'Fin...
End if
%>

[El_Metallick]

aver pegame el código de la página de donde estas llamando al archivo asp (donde tienes el js que te mande.

saludos

PD: puedes usar las etiquetas code para que se vea mas ordenado de la forma [ code] [ /code] pero sin el espacio entre el [ y la c o el /

[emajesus]

//Instancias el objeto XMLHttpRequest
//seccion: la seccion a que corresponde
//page: la página a mostrar
//mostrar: el número de registros por página
function paginacion(seccion,page,mostrar) {
if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}

//Mandas los datos de la pagina que necesitas para la paginacion al archivo que la construye
ajax.open('get','noticias.asp?seccion=' + seccion + '&page=' + page + '&mostrar=' + mostrar,true);
ajax.send(null);

ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
documentElementById('registros').innerHTML = ajax.responseText;
}
}
}

[El_Metallick]

ese es todo el código?, pon todo el codigo de la página que contiene ese js

[emajesus]

PÁGINA DONDE INCLUIRÉ LOS COMENTARIOS -01SECCION.ASP- te la he resumido para que no me líe con tanto código-


<html>
<head>
<script language="javascript" src="paging.js" type="text/javascript"></script>

<div id="registros">
</div>

</body>
</html>


PÁGINA QUE DESPLIEGA LOS REGISTROS DE LA BASE DE DATOS -NOTICIAS.ASP-


<table class="tabla" width="600" border="1" cellpadding="5" cellspacing="1" bgcolor="#f4f4f4">
<%
Dim mostrar 'cantidad de registros a mostrar por página
Dim cant_paginas 'cantidad de páginas que recibimos
Dim pagina_actual 'La página que mostramos
Dim registro_mostrado 'Contador utilizado para mostrar las páginas
Dim I 'Variable Loop

mostrar = 5
seccion=request.querystring("seccion")


' IF para saber que página mostrar
If Request.QueryString("page") = "" Then
pagina_actual = 1
Else
pagina_actual = CInt(Request.QueryString("page"))
End If

Function sinAcentos(strsql)
Dim CurLtr
For x = 1 To Len(strsql)
CurLtr = Mid(strsql, x, 1)
Select Case CurLtr
Case "a", "à", "á"
sinAcentos = sinAcentos & "[aàá]"
Case "e", "é", "è"
sinAcentos = sinAcentos & "[eéè]"
Case "i", "ì", "í"
sinAcentos = sinAcentos & "[iìí]"
Case "o", "ò", "ó"
sinAcentos = sinAcentos & "[oòó]"
Case "u", "ù", "ú"
sinAcentos = sinAcentos & "[uùú]"
Case "n", "ñ", "Ñ"
sinAcentos = sinAcentos & "[nñÑ]"
Case Else
sinAcentos = sinAcentos & CurLtr
End Select
Next
End Function

strsql = "SELECT * FROM comentarios where seccion like '"&seccion&"%' order by Id ASC"
Set oConn = Server.CreateObject("ADODB.Connection")
Set RS = Server.CreateObject("ADODB.Recordset")

oConn.Open("DRIVER={Microsoft Access Driver (*.mdb)}; DBQ= comentarios.mdb")

RS.PageSize = mostrar
RS.CacheSize = mostrar

RS.Open strSQL, oConn,3,1
cant_paginas = RS.PageCount

If pagina_actual > cant_paginas Then pagina_actual = cant_paginas
If pagina_actual < 1 Then pagina_actual = 1

If cant_paginas = 0 Then

Else

RS.AbsolutePage = pagina_actual
registro_mostrado = 0
bandera=0
Do While registro_mostrado < mostrar And Not RS.EOF
if bandera = 0 Then
color="#fafafa"
bandera = 1
Else
color="#ffffff"
bandera = 0
End IF
%>

<tr bgcolor=<%=color%>>
<td align="left"><b><%=rs("Id")%></b>&nbsp;|&nbsp;<%=rs("nombre")%></td>
<td align="left"> <div align="left"></div></td>
<td align="left"> <div align="left"></div></td>
</tr>
<tr valign="middle" bgcolor=<%=color%>>
<td colspan="3" align="left" class="line_100pc_ee"> <div align="left">
<%=rs("mensaje")%></div></td>
</tr>

<%
registro_mostrado = registro_mostrado + 1
RS.MoveNext
Loop

Response.Write "" & vbCrLf

RS.Close
Set RS = Nothing
oConn.Close
Set oConn = Nothing

Response.Write "<br><br>" & vbCrLf
%>
<tr valign="middle">
<td colspan="3" align="left" class="height">&nbsp;</td>
</tr>
<tr>
<td colspan="3" class="height">P&aacute;ginas:

<%
If pagina_actual > 1 Then
%>
<span class="btn_anterior"><a href="javascript: paginacion('<%= seccion %>','<%= pagina_actual - 1 %>')">«
Anterior</a></span>
<%End if%>

<%If pagina_actual > 5 Then
%>
<span class="btn_anterior"><a href="javascript: paginacion('<%= seccion %>','<%= 1 %>')">
Primera</a></span>&nbsp;···

<%
End If
' mostramos la paginacion por numeros de página
For I = 1 To cant_paginas
If I = pagina_actual Then
%>
<span class="btn_activa"><%= I %></span>
<%
Else
If I < pagina_actual+5 AND I > pagina_actual-1 Then
%>
<span class="btn_navega"><a href="javascript: paginacion('<%= seccion %>','<%= I %>')"><%= I %></a></span>
<%
End If
End If
Next 'I%>

<%If pagina_actual < cant_paginas - 5 Then
%>
···&nbsp;<span class="btn_siguiente"><a href="javascript: paginacion('<%= seccion %>','<%= cant_paginas %>')">
&Uacute;ltima</a></span>
<%End if%>

<%If pagina_actual < cant_paginas Then
%>
<span class="btn_siguiente"><a href="javascript: paginacion('<%= seccion %>','<%= pagina_actual + 1 %>')">Siguiente
»</a></span>
<%
End If
'Fin...
End if
%>

</td>
</tr>
</table>

[El_Metallick]

ya por lo que veo hay algunas diferencias con lo que te mande

Código:

<html>
<head>
<script language="javascript" src="paging.js" type="text/javascript"></script>
</head>
<body>
 <div id="registros">
</div>
          
</body>
</html>

si le llamaste registros al div en el js tienes que cambiar

documentElementById('contenido').innerHTML = ajax.responseText;

por

documentElementById('registros').innerHTML = ajax.responseText;

Segundo no veo la primera llamada a la funcion js, yo haría algo asi:

Código:

<html>
<head>
<script language="javascript" src="paging.js" type="text/javascript"></script>
</head>
<body onload="paginacion('82','1','5')">
 <div id="registros">
</div>
          
</body>
</html>

Ahora paginacion() es el nombre de la funcion JS que hace la paginacion si le cambiaste el nombre a los links le tienes que poner nombreFuncion().

Bueno espero ser de ayuda.

Saludos

[emajesus]

Tanto en JS como en la página que recibe los rgistros, utilicé la misma expresión: registros.

Hago la llamada a JS en la página 01seccion.asp

Los enlaces hacen referencia a la función PAGINACIÓN que mantiene el nombre (véase JS).

He hecho todo eso ... pero ni siquiera me despliega los resultados.

Seguiré en la brecha. Te agradezco de corazón tu ayuda. Gracias, Emajesus

[El_Metallick]

mmm para serciorate que paginacion estya devolviendo bien los resultados pone antes de la linea

documentElementById('registros').innerHTML = ajax.responseText;

alert(ajax.responseText);

y ve que te pone por pantalla deberia ponerte el código de una tabla o algo asi con los contenidos de la paginacion (el resultado de la ejecución) ve eso si no te devuelve codigo HTML comentame que te devuelve.

Saludos

[emajesus]

Me despliega los comentarios en formato HTML que me debiera incluir en la página: 01seccion ...

[El_Metallick]

entoncespor ahi va el problema, como comente, deberia retornarte el contenido HTML resultado de la ejecución del archivo noticias.asp, ya sea una tabla con registros o lo que sea.

Saludos

[emajesus]

Eso que tú comentas es precisamente lo que me retorna; los comentarios -es decir, los registros- que despliega de mi BD. Lo que debiera incluir en la página y no hace.


No obstante, la última línea la he escrito del modo siguiente y me funciona; eureka!

document.getElementById('registros').innerHTML = ajax.responseText;

Te doy mil gracias , El_Metallick; sin ti, no habría logrado dar con la tecla; creo que voy a meterme en el tema de JS y AJAX definitivamente.

No obstante, tengo un pequeñín problema; las tildes no me las reconoce y las sustituye por un rombo; ¿qué sucede?

SOLUCIONADO: HE GUARDADO EL DOCUMENTO COMO UTF-8; GENIAL

[El_Metallick]

Iniciado por emajesus

Eso que tú comentas es precisamente lo que me retorna; los comentarios -es decir, los registros- que despliega de mi BD. Lo que debiera incluir en la página y no hace.


No obstante, la última línea la he escrito del modo siguiente y me funciona; eureka!

document.getElementById('registros').innerHTML = ajax.responseText;

Te doy mil gracias , El_Metallick; sin ti, no habría logrado dar con la tecla; creo que voy a meterme en el tema de JS y AJAX definitivamente.

No obstante, tengo un pequeñín problema; las tildes no me las reconoce y las sustituye por un rombo; ¿qué sucede?

SOLUCIONADO: HE GUARDADO EL DOCUMENTO COMO UTF-8; GENIAL

no me habia fijado de ese error, que tontera, efectivamente document.getElementById() lo que hace es rescatar el nodo del arbol DOM que tiene el id que se le pasa. Que tontera sorry por el error . Pero bueno por lo menos te funcionó que es lo importante.

Te recomiendo el libro de ajax que hay publicado en www.librosweb.es (ese use yo hace unas semanas para aprender ajax).

Saludos y suerte

[emajesus]

Ahora me surge un problema adicional. En Firefox todo de maravillas; en IE 6.0 nada de nada ... ¿Qué sucede?


En IE, la primera que accedo a la sección de donde se despliegan los comentarios de la BD, sin problema. Pero cuando hago clic sobre otra sección de la web y luego vuelvo a la sección de comentarios nuevamente, ... YA NO APARECEN los comentarios. ¿Qué sucede?

Es como si sólo los cargara una vez y luego ¡zas, nada!

HE probado CON EL SIGUIENTE CÓDIGO:

Response.addHeader "pragma", "no-cache"
Response.CacheControl = "Private"
Response.Expires = 0

PERO NO ...


PERO SÍ ... HE COLOCADO ESAS LÍNEAS EN EL ARCHIVO NOTICIAS.ASP Y POR AHORA TODO BIEN.

[Shiryu_Libra]

es problema de cache en IE, en la parte donde mandas el query

ajax.open('get','noticias.asp?seccion=' + seccion + '&page=' + page + '&mostrar=' + mostrar,true);

anexale esta pequeña linea extra

ajax.open('get','noticias.asp?seccion=' + seccion + '&page=' + page + '&mostrar=' + mostrar+ '&ran=' + math.random(),true);