lunes, 15 de septiembre de 2008

Cargar páginas con PHP y AJAX

Se han preguntado ¿Cómo cargar una página dentro de un DIV sin recargar todo el sitio?

Por ejemplo:
Tienen un menu vertical y otro horizontal, y entre ellos se encuentra el contenido del sitio, y es en donde quieres cargar nuevo contenido con los enlaces de los menus.



1. Ya sea que el código de AJAX, lo guardes en un archivo .JS, o lo pongas en el HEAD de tu sitio, es lo mismo, a mi gusto, prefiero guardarlo en un archivo .js, y mandarlo llamar desde mi head, por ejemplo, el nombre de mi archivo se llama AJAX.JS, y esta dentro de la carpeta JS:


2. Crearemos el objeto AJAX (XMLHttpRequest) de multi-navegador, para que tanto pueda trabajar con FireFox Mozilla, Safari, Internet Explorer, etc. nuestra llamada asíncrona.


function ajaxFunction() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
return xmlHttp;
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
return xmlHttp;
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
} catch (e) {
alert("Tu navegador no soporta AJAX!");
return false;
}}}
}

3. Ya creado el objeto de AJAX, vamos a crear una función para mandar llamar nuestra página de manera asíncrona:


function Enviar(_pagina,capa) {
var
ajax;
ajax = ajaxFunction();

ajax.open("POST", _pagina, true);

ajax.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
ajax.onreadystatechange = function()
{

if (ajax.readyState == 4)
{
document.getElementById(capa).innerHTML =
ajax.responseText;

}}
ajax.send(null);
}


4. Si notan, el enlace debe contener los parametros de PAGINA y CAPA, me refiero a la página que se va abrir en el DIV, y la CAPA es el DIV en donde se va cargar la página del enlace, en nuestro caso se llama "contenido". Quedando de esta manera cualquiera de los menus:

Las páginas a cargar dentro del div, no deben de llemar etiquetas HTML, HEAD, TITLE. por ejemplo (esta página se llamaria pagina-a-cargar.php):

Un punto importante es, que en nuestra página principal (donde se encuentren los links, ejemplo Index.php, de la figura que he puesto al principio) tengamos nuestro DIV llamado contenido dentro de las etiquetas BODY:



Y listo!, ya tienen como llamar de manera asíncrona una página!...

ACTUALIZACIÓN 26/junio/2009: Quite el status==200, por alguna razón firefox, no toma el valor de status, y simplemente trabaja con readyState.

ACTUALIZACIÓN 02/febrero/2011: Ahora ya pueden cargar archivos PDF con AJAX. Antes recuerden que AJAX solo lee XML, por lo que se realizó lo siguiente:

- Se creó un archivo llamado pdf.html, el cual contiene lo siguiente:

<object data="twitter.pdf" type="application/pdf" width="750" height="600">
alt : <a href="twitter.pdf">twitter.pdf</a>
</object>

De tal forma que, se agrega el object junto con el nombre del archivo.

- Se agregó el botón PDF en el menú, con el código exactamente igual que las opciones anteriores, lo único es que se cambia el nombre de la página.

Lamentablemente tengo los archivos en un servidor donde no acepta PHP, pero pueden cambiar el valor del nombre del archivo PDF. Lean mi post Enviar valores con AJAX y recibirlos con REQUEST o POST (PHP) . Después de la explicación, verán que es posible agregar variables y recibir sus valores con AJAX.


VER EJEMPLO / DEMO >>>

DESCARGAR ARCHIVOS >>>



118 comentarios:

Leticia Carolina dijo...

Hola.
Estoy probando la funcion para cargar página con ajax pero no me carga la página en el div.
La página que quiero cargar contiene un form, alguna ayuda?

Saludos

Héctor Guedea dijo...

Hola Leticia,
Subiré hoy mismo una nueva entrada, la cual se llamará algo como "Enviar todos los datos de mi Formulario con AJAX", y así, contestaré tus dudas, revisa pronto este blog.

Saludos.

Héctor Guedea

Leticia Carolina dijo...

Ok, lo revisaré, muchas gracias!!
Saludos

Miguel dijo...

Hola Héctor,

¿Cómo añadirías un efecto fade cada vez que se cargue una página nueva en el div?

Héctor Guedea dijo...

Hola Miguel!,
mira si quieres hacer efectos como esos en JavaScript/AJAX, te recomiendo que uses la libreria: scriptaculous.js, es mucho más facil y util.

Consulta: http://script.aculo.us/

Saludos

Miguel dijo...

Reholas!

El tema es que tengo hecho el efecto Fade In Fade Out con JS, pero para que funcionara tendría que utilizar la misma id del div que utilizo para cargar páginas externas dinámicamente... y ahí está el problema - por lo menos para mí -.

De todos modos, gracias! me miraré la url ;)

Luis Alberto Delgadillo Carrillo dijo...
Este comentario ha sido eliminado por un administrador del blog.
Anónimo dijo...

Rafael Ramirez Pulido

El analisis documental note como es mas sencillo y eficiente el almacenar algun tipo de documento importante, y de esta forma poder ordenarlo.
Cuando indexamos documentos hay palabras que nos se utilizan como 'el', 'ella', 'hasta', etc, que no son relevantes, estas se llaman palabras vacias.
Tambien note como el tesauro es una herramienta muy util en caso de hacer busquedas y muy rapida.

Alberto dijo...

Me di cuenta como en el analisis documental ayuda a tener mas organizacion con los documentos ya que los puedes buscar rapidamente mediante indices.
Tambien la tesauro observe como es una herramienta potente para hacer algun tipo de busquedas y es mas eficiente que un glosario.

Anónimo dijo...

Rafael Ramirez Pulido

Existen diferentos modelos de recuperacion de informacion, cada uno con sus ventajas y desventajas dependiendo el tipo de recuperacion que se desea, como el booleano, booleano extendido, texto libre y otros los cuales algunos se basan en algun algoritmo y otros son simplemente por comparacion o vectorizacion etc.

Alberto dijo...

Note como dependiendo de el modelo de sistema de recuperacion de informacion que se este utilizando vamos a tener un respuesta similar a la de otro modelo esto dependiendo en la forma en que se predicen los documentos que son mas reelevantes en la coleccion. Los modelos vistos son el de texto libre, el modelo booleano, booleano extendido, vectorial, de logica difusa etc

Alberto dijo...

Se ha notado como en estos tiempos ha habido una gran evolucion en el mercado de las bases de datos ya que ahora mucha de la informacion que viene en libros se puede encontrar ahi, año tras año aumenta la cantidad de estas, aunque lamentablemente al hacer esto se daña el mercado del libro o titulo que con el que se trabaja en cuanto a su mercadeo por lo cual tiene que haber un equilibrio entre control y autocontrol para asi proteger a los autores.

Anónimo dijo...

Rafael Ramirez Pulido

La evolucion del mercado a ido incrementado favoreblemente para el crecimiento de la informacion en bases de datos, ya sea en titulos, libros etc. de diferentes campos, cada vez mas gente hace busquedas en bases de datos, busquedas en linea esto para beneficio de los que requierern informacion. esto puede ser un problema debido a que puede haber lucro en la infomracion y asi degradar el valor de los autores que realizaron algun libro.

gAbi dijo...

Tengo una duda al utilizar este tipo de funciones en las páginas, porque no sé hasta que punto google accede al contenido que cargamos dinámicamente en esos divs, si reconoce las páginas a las que llamas como un link a nuestra página principal y ese tipo de dudas con respecto a la compatibilidad del robot con esta función. Alguien ha tenido algún resultado? Gracias por todo

Héctor Guedea dijo...

Que tal,
Diste al clavo gabi, ese era el siguiente post que tenia el mente.. Te contestaré, esas dudas, además de darte un ejemplo de como transformar los enlaces de Javascript en enlaces text links.

Próximo Martes 4 de Noviembre.. Unete al FEED del blog.

Saludos.

Tonimito dijo...

Hola!!

Estaba buscando información sobre este tutorial, y funciona a la perfección, pero me he encontrado con el problema que no carga en el DIV pelíclas de flash (.swf)!

Hay alguna solución???

Gracias!

Anónimo dijo...

Hola amigo, realmente tu publicacion me sirvio de mucho esta muy bueno, el problema es k tengo algunos links con swf y no los carga, intente uno k otro truco por alli y me funciono para internet explorer pero en otro navegador nada k ver, existe alguna forma de hacerlo estandar te lo agradeceria mucho

Carlos dijo...

no me funciona en la ultima version de firefox, cual puede ser el problema?

Anónimo dijo...

Me encontré con el problema que no carga en el DIV pelíclas de flash (.swf)!

Hay alguna solución???

Anónimo dijo...

Al igual que a carlos, a mi no me funciona en firefox 3, con explorer y chrome todo esta perfecto, pero firefox no soporta estas funcionas, les agradeceria sus comentarios.

Anónimo dijo...

Bueno señores, soy el del mensaje anterior.

Despues de 1 dia de ardua búsqueda por la web, y después de más de 50 posibles soluciones, ninguna me sirvió. Pero a algo me llevó. Me fijé que no entraba en la sentencia if (ajax.status==200){}...

porque me devolvia el status 400, esto significa que el navegador (firefox) no interpreta correctamente la sintaxis.

El detalle a final de cuentas era que enviaba ajax.send(null) y por alguna razón no es correcto en firefox, asi que puse ajax.send(_pagina) con tal de enviar algo y listo...funcionó perfectamente.

Espero le sirva a alguien algún día. y gracias por el ejemplo.

Héctor Guedea dijo...

Hola, no habia tenido tiempo de revisar sus comentarios.

Muchas gracias por contribuir a la retroalimentaciòn de esta entrada, tratarè en estos dìas de resolver el problema del la carga asìncrona del SWF.
A su vez, muchas gracias al @Anonimo (del ùltimo comentario).

Un gran saludo a todos.

Anónimo dijo...

HOla quisiera que hicieras algo cuando uno le da actualizar al la pagina no sepierda el contenido que tiene en ese momento

nonorussell dijo...

hola, me funciona perfecto, fue de mucha ayuda, gracias. Pero tengo una duda, al cargar el div, carga super bien..ningun problema. Pero luego al poner atras en el navegador no retrocese en la carga del div..sino que en la carga de la pagina..hay una forma de que se devuelva en la carga del div..(ojalá se entienda mi pregunta)..

Saludos

Héctor Guedea dijo...

Hola @nonorussell, ese es el problema de AJAX, no guarda un historial para el navegador. Como solución, es incorporar librerias que hagan este trabajo. Te soy sincero, nunca las he usado, pero conozco:

History Keeper: http://www.unfocus.com/projects/historykeeper/

También encontre un post al respecto:

http://blog.controlzeta.net/?p=210

Saludos

Marcelo dijo...

Hola! Quiero felicitarte por todos los tutoriales que has puesto. Estan muy buenos. Lo que quisiera preguntarte es lo siguiente; comunmente en PHP, para paginar resultados de una consulta, por medio de un formulario envías las variables por GET y listo, con el paginador armado muestras los resultados pero cambiando de página. Ahora, tratando de utilizar AJAX y los ejemplos que has postrado, ¿cómo haces para paginar resultados dentro de una capa sin que se resetee toda la página? ¿Cómo le pasas los datos del form a AJAX para que los procese y que éste los pase al paginador? Ufff... realmente te hago un monumento si me lo explicas porque no doy pie con bola.
Gracias por todo!!!
Marcelo.

Héctor Guedea dijo...

Que tal Marcelo,

Mira un ejemplo bien explicadito de lo que quieres hacer de Paginado con AJAX, lo puedes encontrar en el articulo de Ribosomatic, te servirá de mucho, ya que también incluye un ejemplo.

Te mando un saludo, y espero que sigas visitando el Blog, en unos días publicado algo de jQuery (librería de JavaScript) que posiblemente te interesará.

http://www.ribosomatic.com/articulos/paginar-consultas-con-mysql-php-y-ajax/

Crak dijo...

Podrias poner un ejemplo funcionando.
Copio todo el codigo e igual no me funciona...
no se que sera.

Marco dijo...

Buen dia, Hector quisiera saber si puedes publicar el ejemplo completo de como cargar paginas en DIV usando Menus

Héctor Guedea dijo...

@Todos
Hola, Si publicaré el ejemplo hoy mismo por la mañana!!, esten atentos.

Un gran saludo!

Héctor Guedea dijo...

@Todos:

Ya coloque el ejemplo, note un problema en Firefox, es que ya no soporta el status==200, así que simplemente se trabaja con readyState, que es lo mismo.

Un gran saludo, espero que les sea de ayuda!.

Anónimo dijo...

Muy bien explicado el ejemplo.
Creo que lo utilizare para recargar una aplicacion que pesa un poco.

Un saludo y gracias

Héctor Guedea dijo...

Hola,
Me da gusto que te haya servido, un saludo!

bleyarkngel dijo...

hola Hector la verda no me correo no se por que podrias subir un archivo que tenga todo los archivos (el menu en css,el php que utilizas, y el ayax que implementas x favor te agradecere mucho!

Héctor Guedea dijo...

Que tal @bleyarkngel,
Listo, ya puedes descargar los archivos del ejemplo en esta entrada, un gran saludo!

Héctor Guedea

bleyarkngel dijo...

hola Hector y gracias, pero debo decirte que esa parte si logre lo que no me resulta es cargar el formulario en esa division y despues el formulario que envie datos y que cargue la otra pagina creo que es "noticiosa.php" en la misma division recibiendo loas datos x favorrrrrr sube ese archivo de verda que estas haciendo un gran favor estare esperando Hector.

pd. no se si debi publicar este post en esta seccion en en la otra de "Cómo enviar todos los datos de un Formulario con AJAX"

bleyarkngel dijo...

hola Hector debo decir que lo logre =D! gracias estare constante en este foro o bueno en tu blog. una pregunta simple "cuando utilizo "POST" Y CUANDO "REQUEST" y donde queda "GET"??? bueno espero tu respuesta y deverda muchas gracias.

pd:x ahi me recomendaron jquery talves puedas subir algun tutorial completo de jquery ( los que me baje son muy basicos)

Héctor Guedea dijo...

Que tal @bleyarkngel,me da gusto que porfin te funciono.

Mira, GET y POST es el método de enviar los datos, por ejemplo con GET los datos se envían por la URL, se vería así ejemplo.php?id=1&animal=conejo&valor=2, y lo recibes con GET, ejemplo $_GET['animal']; si haces una impresión en PHP con echo, te imprimiría conejo.

Con POST los valores se envían internamente, "ocultos", y recibes dichos valores con POST, $_POST['animal'];.

Ahora, si quieres poder recibir valores por los 2 métodos GET o POST al mismo tiempo, lo haces con REQUEST['animal']; pero OJO, hay que tener cuidado cuando se usa REQUEST, no simple es bueno usarlo.

Tengo algunas cosas de jQuery en este blog, pero que te gustaría como tutorial?, para elaborarlo.

Un saludo

bleyarkngel dijo...

hola Hector, tu siempre tan atento a las preguntas, mira lo que quiero es un manual o tutorial completo de jquery como usarlo que puedo hacer con jquery y todo eso .tal ves tengas alguno x ahi o talves links de donde lo pueda bajar .. gracias ;)!

♥ShoLectiTo♥ dijo...

hola hector!! te escribo para felicitarte por tu blog realmente es buenisimo!! y para que me des una ayudita!!=) como tendria que realizar para que la pagina.php que se abre dentro del div que es una carga de datos a una base de datos pueda funcionar!!! mi pagina.php fuera del div me funciona o sea realiza la carga, pero al abrirlo dentro del div ya no responde!!! soy nuevisima en este tema y me encantaria que me ayudaras si puedes!!! desde ya gracias y saludos!!!!=)

Héctor Guedea dijo...

Hola ♥ShoLectiTo♥,

No debe de ser problema, porfavor postea los archivos para descargarlos y así ver cómo lo estas haciendo y poder ayudarte.

Un saludo

♥ShoLectiTo♥ dijo...

hola hector una vez mas!!!=) quieres que postee todos los archivos que utilizo o solo donde llamo a mi pagina.php???
div id="menu"
dl class="dropdown"
a href="javascript:Enviar('formularios/ciudad.php','contenido')" class="underline" Ciudad" /a
/div
lo cual me abre en el div contenido!!! en esa parte no hay problema me sale fantasticamente utilizando ajax.js pero al tratar de cargar datos en ciudad.php es el problema!!! pues dentro de ciudad.php tengo un boton cargar datos y el cual no lo reconoce!!! lo quise hacer con iframes con el que si me funcina pero el tema es que tengo un menu despleglable y al hacerlo con iframes me corta por la mitad el menu!!! y por ello quiera hacerlo con div!!!! o tu que me recomiendas??? no se si me explique bien!!! ojala me tengas paciencia!!!;)

Héctor Guedea dijo...

Hola ♥ShoLectiTo♥ ,

El código de como llamar no es problema, es el que puse en este post, el que quiero ver es el de ciudad.php, a evr si entendi.

1. Cargas ciudad.php dentro del DIV. (aquí no hay problema).

2. En ciudad.php, se encuentra un bóton de cargar datos, el cual no se ve?, y si se ve das click y no pasa nada?


3. ¿para que tienes un bóton de cargar datos al abrir ciudad.php?, si lo puedes hacer directo dar click en ciudad y se cargen los datos desde la base de datos.


Un gran saludo.

♥ShoLectiTo♥ dijo...
Este comentario ha sido eliminado por el autor.
♥ShoLectiTo♥ dijo...

hola hector!!! una vez mas!!=) ayer conteste un poco apurada y por ello creo que no fue del todo claro lo que escribi por eso lo borre!! PERDON!!!!;) bueno si es exactamente como dices con mi Boton cargar: das click y no pasa nada!!! cuando cargas en el div ciudad.php sin problema trae los datos de la bd, el tema es cuando yo quiero darle un nuevo dato para que registre en mi base de datos!! input id="bnt_enviar" type="button" value="Cargar datos" name="bnt_enviar"/
bueno creo que es me estoy complicando y complicandote demasiado!!! jejeje voy a seguir tratando de resolverlo y si llego a alguna solucion te escribo para contartela!! y una vez mas gracias por la ayuda!!!!=)

Héctor Guedea dijo...

Hola ♥ShoLectiTo♥,

bien, veo que también quieres cargar el formulario por AJAX, pero no te puedo ayudar porque no tengo el código fuente, tienes que enviarme todos los archivos para ver cual es el problema, con que me pongas el HTML del bóton no puedo resolver nada.

Pero mira, cuando cargues la página ciudad.php o la que sea, revisa que tus scripts carguen, porque por más que des click en el bóton si tus scripts de JavaScript no se cargaron, no va funcionar.

Ve siguiuente el rastro con Firebug (https://addons.mozilla.org/es-ES/firefox/addon/1843)


Recuerda que sin archivos, mucho no te puedo ayudar.

Un gran saludo

♥ShoLectiTo♥ dijo...
Este comentario ha sido eliminado por el autor.
thrashaholico dijo...

mmmmm..y finalmente se puede colocar un swf usando este ejemplo?

Alfa 2 dijo...

Hola hector, tengo una pregunta, he utilizado su forma de cargar paginas en un estilo muy similar, agradezco su sabiduria, y el inconveniente que tengo es que en varias de las paginas que tengo tengo formularios, pero al momento de recargar el formulario o sea, guarda la info y vuelve me carga la pagina del div en toda la pagina, existe alguna manera para que solo se recargue en el div? agradezco colaboración.

Héctor Guedea dijo...

Que tal Alfa_2!

Si la hay, de hecho en este mismo blog he publicado como trabajar AJAX con Formularios, mira este enlace:

http://guedea.blogspot.com/2008/10/cmo-enviar-todos-los-datos-de-un.html

Ahí tendrás la respuesta, cualquier duda, publica tus dudas por aquí, un saludo!

Alfa 2 dijo...

UHm creo que quizas no formulé bien la pregunta.

el formulario envia los datos y los guarda en una base de datos si todo es correcto y recarga la página con los mensajes, pero si hay errores se devuelve a la pagina anterior y muestra el mensaje del error.
ejemplo:
form.php
guardar.php
si todo esta bien, vuelve a form con mensaje 1
si no vuelve a form con mensaje 2

el problema de todo eso es que todo está dentro de un div, como el que maneja en el blog "Cargar páginas con PHP y AJAX", y al regresar del formulario en vez de cargarlo en el div, lo recarga en toda la pagina.

espero haberme hecho entender hector
gracias.

Héctor Guedea dijo...

Si, por eso mismo te paso el enlace:

http://guedea.blogspot.com/2008/10/cmo-enviar-todos-los-datos-de-un.html


Leelo, eso que quieres se hace exactamente con el enlace anterior.

AJAX + FORMULARIOS

Borja dijo...

Hola Héctor,

Necesitaría hacer esto que explicas pero los links estarían dentro de la propia capa.

En la capa estoy cargando una página y claro en esa página no está definido el div contenedor.

Crees que se podría ajustar tu código de algún modo para este tema??

Gracias y un saludo.

Héctor Guedea dijo...

Hola Borja
Todo se puede ajustar a tu gusto, ya que en los enlaces es donde defines los parámetros: página y capa.
Si cargas la página en el mismo DIV donde están los enlaces TEN CUIDADO porque desaparecerán, te recomiendo definir un área donde se cargarán cada una de las páginas y otra de menús, como el caso de mi ejemplo.

b lopardo dijo...

no hay manera Héctor...
no puedo hacer que se meta el php en el div...
:(
te puedo mandar los archivos para que chequees? lo tengo tal cual!
ya no sé que hacer..

mi mail es blopardo@gmail.com

Anónimo dijo...

Hola, mi consulta es como puedo hacer para luego de cargar en un div una pagina con un catalogo de productos y al pie su paginador, al seleccionar siguiente no se refresca el div contenedor sino que habré una nueva pagina en el explorador con la lista siguiente.
El codigo de la pagina que se carga en el div esta:
Descargar codigo

Se que es largo pero es para tener una mejor idea
Saludos
Marcelo

Héctor Guedea dijo...

Hola Marcelo,

No te entendí del todo, explícate un poco más.

Saludos

Anónimo dijo...

Bueno haber si me sale; Usando AJAX En el Index.php se carga contenedor.php. Contenedor.php recupera 20 registros de la base de datos, se muestran 6 registros por vez y en el pie de contenedor.php muestra la paginación (primero - anterior – siguiente – ultimo), el tema es que no logro mostrar los 6 registros siguientes dentro de la pagina index.php, si los muestra pero en una pagina nueva, en la barra de dirección del explorador no esta localhost/index.php sino que muestra localhost/contenedor.php.
Si me pueden dar una idea se los agradezco.
Marcelo

Héctor Guedea dijo...

Marcelo:
Perfecto, ya se que buscas, pues bien, si tu contenedor.php recibe por metodo GET el valor de la página, por ejemplo, tu enlace luciría así:

echo "<a onclick=\"Pag('1','contenido')\">Primero</a> ";
 if($PagActual>1) echo "<a onclick=\"Pag('$PagAnterior','contenido')\">Anterior</a> ";
 if($PagActual<$PagUltima)  echo " <a onclick=\"Pagina('$PagSiguiente','contenido')\">Siguiente</a> ";
 echo "<a onclick=\"Pagina('$PagUltima','contenido')\">Último</a>";


Ahora la función de AJAX, sería así:

function Enviar(numpagina,capa) {

var ajax;

ajax = ajaxFunction();



ajax.open("GET","contenedor.php?numpag="+numpagina);



ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

ajax.onreadystatechange = function()

{

if (ajax.readyState == 4)

{

document.getElementById(capa).innerHTML = ajax.responseText;

}}

ajax.send(null);

}

y ya simplemente en el contenedor.php tienes que recibir la variable "numpag" con get, es decir:

$_GET["numpag"], teniendo eso ya es rollo de tu paginador con php y mysql. Recuerda que en cada enlace enviaste el ID "contenido" es el DIV donde se hará la carga asíncrona, puedes cambiar al DIV que quieras.

Un saludo, y espero que te haya servido para entender un poco más esto.

Anónimo dijo...

Paaaaaaaaa loco!!! Estas pasado!! Ahora si funciona!!.
Gracias.
Saludos Maestro.

Marcelo

Héctor Guedea dijo...

Marcelo:
Un gusto poder ayudarte, cuidate!

Héctor Guedea
Mi web personal: www.hectorguedea.com

Anónimo dijo...

Hola Hector
Otra consulta:
La paginación funciona bien con ajax, cuando hacia la consulta a la base de datos no usaba una condición de búsqueda.
Ahora agregue WHERE tipo='licores' a la consulta y cuando muestra la primer pagina lo hace bien pero al darle siguiente no recupera datos y el numero total que muestra el paginador es el total de registro de la base de datos;
ejemplo tengo 20 registro en BDato filtrándola quedan 15, al paginarla limitados por 5 registro muestra los primero 5 y marca 1 de 3 pagina y al darle siguiente no muestra datos y el paginador dice 2-4. Que puede ser? Tendré que pasar algún valor?
Saludos
Marcelo

gallego dijo...

Hola a tod@s:

Mis mas sinceras felicitaciones a todos por el esfuerzo y dedicación de estos ejemplos realmente clarificadores.

Y despues del peloteo, a ver si podeis con esta:

He conseguido cargar el div con el ajax y cargar tambien el css. Pero intento utilizar librerías js para realizar un efecto con fotos, y estas no se cargan / no funcionan.

La pregunta: ¿ hay algún codigo para cargar un js externo (archivo .js), definido previamente en el html principal (El que hace la llamada ajax) y que me permita ejecutar la/s librerías para el ajax? (en la página principal si funciona el efecto perfectamente)

Utilizo html, js, css y ajax.

Un saludo de nuevo a toda la comunidad.

Héctor Guedea dijo...

Marcelo: En ciencia cierta, no le veo mucho problema a lo tuyo, agregar un WHERE teniendo las bases de la consulta y lo que habías hecho no es motivo de que no funcione, tendría que ver tu código completo (consultas, etc) para poderte ayudar bien.

Gallego: yo el mismo problema tuve hace mucho, pero algo que me ayudo a comprender que estaba pasando en el DOM fue Firebug de Firefox, la solución no fue agregar un interpretador de javascript ó archivos, sino fue la misma carga del la librería en la página principal (head). Se que no te di una solución en especifica, es que no la hay, ya que regrese a la Web en la que tenia el problema, y no había nada fuera de lo normal.


Un gran saludo

Anónimo dijo...

Hola.
Gracias Hector por tu ayuda, el código no tiene problemas esta impecable, te comento que el error estaba en donde llamaba al archivo js, yo lo hacia desde la misma pagina de consulta que cargaba con ajax, pero ERROR es como le aconsejas al Gallego, llamo las librerías desde el index, en el head, y se soluciono no solo ese problema sino el de los efectos.
Saludos desde Uruguay
Marcelo

Héctor Guedea dijo...

Marcelo:
Venga me da gusto que todo se haya solucionado.

Un gran saludo!.

Héctor Guedea

www.hectorguedea.com

Anónimo dijo...

Hola Hector
Otra vez yo acosándote, tengo una consulta: tengo un formulario que cargo datos y una imagen, con ajax llamo un php que se encarga de guardar esos datos mas el nombre de la imagen, los datos los guarda pero trato de capturar la imagen (imagen.jpg) con $_FILES['imagen'] y no trae valor, no quiero cargar la base de datos con la imagen solo guardo el nombre+extensión. Cundo no asía el llamado con ajax guardaba bien. Te muestro parte del código para mejor idea

Este es el formulario

form class="borde" name="formulario" action="" onsubmit="validaForm(); return false"
Imagen:
input type="HIDDEN" name="MAX_FILE_SIZE" VALUE="1024000">
input type="FILE" SIZE="44" name="imagen">
input id="botonEnviar" onClick="" type="submit" >
FORM>

Con este capturo y guardo en la bdato

$titulo = $_REQUEST['titulo'];
$descripcion = $_REQUEST['descripcion'];
$tipo = $_REQUEST['tipo'];
$procedencia = $_REQUEST['procedencia'];
$valor = $_REQUEST['valor'];
$destacado = $_REQUEST['destacado'];

if (is_uploaded_file ($_FILES['imagen']['tmp_name']))

$upload_dir = '../fotos/';
$upload_file = $upload_dir . $_FILES['imagen']['name'];
$imag1 = $_FILES['imagen']['name'];
if (move_uploaded_file($_FILES['imagen']['tmp_name'],$upload_file)){

include ("../lib/conectar.php");
include ("../lib/fecha.php");
$fecha = date ("Y-m-d");
$instruccion = "insert into catalogo (titulo, descripcion, tipo, procedencia, valor, destacado, imagen, fecha ) values ('$titulo', '$descripcion', '$tipo', '$procedencia', '$valor', '$destacado', '$imag1', '$fecha')";
$consulta = mysql_query ($instruccion, $conexion) or die ("Fallo en la consulta");
}
}

Ajax

function validaForm()
{
divResultado = document.getElementById('mensaje');
titulo= document.formulario.titulo.value;
destacado=document.formulario.destacado.value;
imagen=document.formulario.imagen.value;
ajax=objetoAjax();
ajax.open("GET", 'guardar_pro.php', true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
//mostrar resultados en esta capa

divResultado.innerHTML = ajax.responseText
}
}

ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("titulo="+titulo+"&descripcion="+descripcion+"&tipo="+tipo+"&procedencia="+procedencia+"&valor="+valor+"&destacado="+destacado+"&imagen="+imagen);

}

Te agradezco si me podes ayudar. He buscado en la web y solo encuentro que imagen no se puede pasar con ajax, yo solo busco guardar el nombre de la imagen. Saludos
Marcelo

Héctor Guedea dijo...

Marcelo:

La solución es sencilla, y viene desde el formulario.

en el tag del formulario, agrega enctype="multipart/form-data".

form class="borde" name="formulario" enctype="multipart/form-data" action="" onsubmit="validaForm(); return false"

desde ahí.

Anónimo dijo...

Hola Hector
Tu sabes que agregue enctype="multipart/form-data" y nada.
Con ajax tomo así el valor imagen= document.formulario.imagen.value; esta bien?

En el archivo que grava llegan los datos y los cargo en las variables, del if no pasa. Sera algo en esta parte?

$titulo = $_REQUEST['titulo'];
$descripcion = $_REQUEST['descripcion'];
$tipo = $_REQUEST['tipo'];
$procedencia = $_REQUEST['procedencia'];
$valor = $_REQUEST['valor'];
$destacado = $_REQUEST['destacado'];

echo ">>>>hasta aca llego<< ";
if (is_uploaded_file ($_FILES['imagen']['tmp_name']))

echo ">>>>no pasa<< ";

Saludos

Héctor Guedea dijo...

Marcelo:
No podrás recibir el valor y el temporal de la imagen de esa forma.

Yo también tuve la misma duda hace un tiempo, aún conservo la web que me ayudo -> http://atwebresults.com/forum/viewtopic.php?f=25&t=391

Hay vienen los scripts, es una técnica no creas que me gusto del todo, pero bueno funciona.

Anónimo dijo...

Qué tal Hector, mi nombre es Jorge
estoy aprendiendo a usar ajax con php y js.
tengo mi index.php que según el valor de un select option me carga un php dentro de un div usando ajax, dentro de ese div tengo una forma; pero no me la ejecuta.

¿Hay un ejemplo o algun consejo para salir a flote?

Saludos

Nadia dijo...

graciaaas! muy util

diseño web dijo...

gracias por el pequeño manual, me ayudo mucho!

Héctor Guedea dijo...

@Nadia
@Diseño web

DE NADA!

alonso dijo...

al igual que MARCELO tengo el mismo problema que cuando se ejecuta cargar pagina en un div el php de la pagina cargada no se ejecuta dentro del div también sino en una nueva ventana..
entonces asi cargo la pagina como ustedes lo han escrito:
index.php:
function Enviar(_pagina,capa) {
var ajax;
ajax = ajaxFunction();
ajax.open("GET", _pagina, true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

ajax.onreadystatechange = function() {
if (ajax.readyState==1){
document.getElementById(capa).innerHTML = "img src='spinner.gif'";
}
if (ajax.readyState == 4) {

document.getElementById(capa).innerHTML=ajax.responseText;
}}

ajax.send(null);
}

hasta ahi si la carga bien, despues trato de ejecutar un php en la pagina que se cargo que se llama home.php
que es lo siguiente:

href="?go=headlines">AQUI



usando cutenews, si llamo a la pagina de home.php la corre sin problemas hace lo que tiene que hacer pero si la llamo al div ya no :( entonces me preguntaba si se tenia que mover algo en la funcion de ajax :( porfavor si alguien sabe como agradeceria mucho su ayuda porque lo que he modificado no me sirve...
nota: cuando llamo a la pagina home.php utilizo el siguiente link

href="javascript:Enviar('home.php','contenido')" Home ,y lo carga oviamente al div "contenido" :) espero su ayuda :P

alonso dijo...

este es el contenido php que me falto de la pagina home.php

if($_GET['go'] == "" or $_GET['go'] == "news"){
include("...\cutenews/show_news.php");
}
elseif($_GET['go'] == "headlines"){
$template = "headlines";
include("...\cutenews/show_news.php");
}

TyRONE dijo...

Hola Hector,
para cargar contenidos dentro del div con ajax mi problema es el siguiente, me carga el contenido que quiero cargar pero solo eso, no me carga la pagina entera osea cabecera,menu,pie,etc.
Qué estoy haciendo mal?? te ruego me digas algo porque estoy atascado y probado mil maneras ya.

Gracias de antemano.
Saludos.

Bárbara dijo...

Hola Hector, no me anda el codigo ajax para el internet explorer 8, podrás darme una mano con esto?
Muchas Gracias
Saludos.

Anónimo dijo...

Buen dia

Tengo una duda, hice una funcion con ajax para cargar una grafica en el div, esta se carga cuando en un select elijo una opcion, hasta aqui todo bien.
Elijo Opcion 1 y se carga la grafica correctamente, Elijo Opcion 2 y se carga la grafica correctamente.
Aqui esta el problema!!!, si elijo nuevamente la Opcion 1 ya no se carga la grafica.
Si elijo Opcion 3 se carga la grafica, pero si elijo la Opcion 2 no se carga nada.

Me pueden dar alguna idea de cual es el problema

De antemano gracias.

Saludos

Anónimo dijo...

Hola Hector,

Una consulta ando que le doy ya tengo una semana en esto y nada.
Realice tu menu con div, pero cuando llamo a un formulario, los eventos de ese formulario no los realiza, la pagina carga pero no hace ningun evento ya sea de ingreso o consulta, me podrias ayudar por favor o alguna pagina n particular para revisar.

Roberto Ruiz

Anónimo dijo...

A LOS Q LEs INTERESE.. TENGO ESTE CODIGO FUNCIONANDO CON CUTENEWS.. AQUI PUEDEN CHECARLO WWW.RADIOAREPA.COM PARA LOS Q QUIERAN SABER COMO SE HACE ESCRIBANME jgmg84@gmail.com

Jaspher dijo...

Hola amigo, gracias por el tuto, la verdad que andaba buscando algo asi hace mucho tiempo, y gracias por eso.
Quisiera pedirte porfa una ayduda. mira como haria para reciba los valore por la url, osear con php, envio mi url con por ejemplo:

www.miweb.com/?pagina=1
y me muestra el div con la pagina 1
y asi si recibo
www.miweb.com/?pagina=2
....
pero sin que la web se actualice totalmente, ni el header, con peticiones asincronas como dices tu, porfavor quisiera que me ayudes con esto, porfavor, y gracias otra vez por tu aporte

Iván dijo...

En primer lugar magnifico blog. Me ha surgido un problemilla al usar esta funcion, tengo un mapa en una de mis paginas que cargo en el div tras haber pinchado en el menu, bien, pues ese mapa se genera con funciones que normalmente van en body Onload="funcion();" o window.Onload=funcion, si la pagina no se recarga esas funciones no se activan y mi mapa no se crea, ¿como podría solucionarlo? he probado llamando a la funcion sin mas al principio de la pagina que contiene el mapa y tampoco ha funcionado.

Somos dijo...

Hola, quisiera saber si es posible cargar un pdf en ves de un html dentro del div?

Héctor Guedea dijo...

Hola a todos,

Acabo de agregar 2 actualizaciones en esta entrada.

1. Agregue un Video sobre el cross-browsing del código. algunos de ustedes me han escrito comentándome que no servía en distintos navegadores.

2. En respuesta a Somos, agregue el ejemplo de Cargar Archivos PDF con AJAX.


Les pido a todos una disculpa por no responder alguna de sus preguntas, pero por razones de trabajo se me complica contestarles a todos, pero trataré!.

Un saludo

Ro dijo...

que onda, muchas gracias por este pequeño tutorial! sabes algo curioso, cuando abro la página de ejemplo desde la web, me corre, pero cuando descargo el archivo deja de funcionar, (utilizo IE9), por si fuera poco, cuando veo el código fuente de la que está albergada en internet, es el mismo código! y aun más, si abro el ejemplo con firefox funciona! y todo, pero no funciona el ejemplo que bajé en IE9 jajaja :s tienes idea de por qué? :(

Rodrigo dijo...

Viejo te lo agradesco DE-MA-SIA-DO me funcionó perfecto casi a la primera...llevaba MESES tratando...muchas gracias!

Anónimo dijo...

buenas!!!
Mi problema es el siguiente
tengo un boton que me llama a la funcion CargarFotos en el evento onclick() para que con ajax, me cargue una fotos con un php en un div llamado "scrollContainer".

quiero que al presionar el boton me llame a la funcion CargarFotos el cual el código es el siguiente:

function nuevoAjax(){
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 CargarFotos()
{
var XMLHttpRequestObject = nuevoAjax();

if(XMLHttpRequestObject) {
XMLHttpRequestObject.open("POST", "galeriaFotos.php");


XMLHttpRequestObject.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');

XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
document.getElementById('scrollContainer').innerHTML = XMLHttpRequestObject.responseText;
}
}

var consulta;
consulta = document.getElementById('listaActividad').options[document.getElementById
('listaActividad').selectedIndex].value

XMLHttpRequestObject.send("pkActividad=" + consulta);
}
}
Mi problema es que al presionar el boton, me llama a la funcion, pero la funcion no me llama al archivo php que hace la paginación, como que se brinca el ajax.open().

Agradecería demasiado cualquier ayuda, gracias!!

Anónimo dijo...

Ya lo solucioné, pero de verdad se agradecen estos tutoriales, son de gran ayuda!!

Anónimo dijo...

hola, cuando quiero cargar el link que muestra el pdf no funciona en firefox, solo aparece alt: porque?

Emi Glez dijo...

Hola

Este ejemplo esta genial, justamente lo que venia buscando desde hace un tiempo, ya que habia creado un sistema utilizando frames, lo cual me trajo muchos problemas (especialmente el de f5), y al investigar opte por cambiar y realizarlo con div, pero aun sigo teniendo el mismo problemas.

si conoces algo sobre el tema, te agradeceria si me ayudaras.

Gracias

Anónimo dijo...

Por que dicen que no funciona solo lo tienen que montar a el internet information center o a xamp lo corren local y funciona en cualquier navegador

miguel dijo...

se te agradece man!!!!
justo lo que era buscando
A LA PRIMERA CUANDO LO DESCARGUE NO FUNCIONÓ PORQUE EJECUTE DANDOLE DOBLE CLICK, ASI QUE CREE UN SITIO Y ALLI LO PROBE, FUNC}ONÓ A LA PERFECCIÓN.....

MUCHAS GRACIAS..........................

Anónimo dijo...

Excelente explicacion, y buenos ejemplos.

Elesvain Users dijo...

Muchas gracias, es lo que estaba buscando, excelente aporte.

Anónimo dijo...

Hola amigo Hector tu post esta muy bien explicado, pero por mi poca experiencia hay algunas cosas que me kedaron en duda me facina muxo la programacion y ahora quiero hacerlo con php y este maravilloso mundo de programacion web, estoy haciendo una pequeña pagina y queria saber si estarias dispuesto a hecharme una mano te dejo mi msn c0mrade19@hotmail.com o espero el tuyo amigo asme saber tu correo o tu numero de celular si eres de peru. atte. Johan Paucara

cartod86 dijo...

Hola!!!
No me carga en el div las imagenes del archivo .php q llamo con la funciòn que podria ser???
Gracias

ev dijo...

Hola, estuve mirando bastante el código y hay algo que quiero hacer y no me sale...
El asunto es así:
tengo en un php un form con distintos select.. la idea es que a traves de ajax, me muestre el resultado de la consulta sql (segun los parametros del formulario q el usuario elija) y me muestre en un div resultado el resultado de la consulta sql... pero paginado...
logré x un lado que me muestre el resultado completo pero sin paginar.. este paginador funciona pero no recibe ademas las variables x post del form para hacer la consulta...
cómo hago?

ev dijo...
Este comentario ha sido eliminado por el autor.
Anónimo dijo...

Mil gracias, sé que ya van varios comentarios como este, pero me parece muy valioso tu post. Gracias por tu esfuerzo y por compartir tus conocimientos.

Anónimo dijo...

funciona de maravilla el unico problema es cuando lo pruebo con un link que no se encuentra en el servidor como por ejemplo www.google.com

no hace nada la función

Anónimo dijo...

Cordial saludo…le pido un gran favor y que pena abusar de de usted, estoy usando este codigo para cargar paginas con extension PHP dentro de un div, pero no me carga el codigo fuente para la validacion, ni el recapcha..de antemano le agradesco su ayuda.
aca le expongo el codigo fuente.
function ajaxFunction() {
var xmlHttp;

try {

xmlHttp=new XMLHttpRequest();
return xmlHttp;
} catch (e) {

try {
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
return xmlHttp;
} catch (e) {

try {
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
return xmlHttp;
} catch (e) {
alert(“Tu navegador no soporta AJAX!”);
return false;
}}}
}

function Enviar(_pagina,capa) {
var varajax;
varajax = ajaxFunction();
varajax.open(“POST”, _pagina, true);
varajax.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

varajax.onreadystatechange = function() {
if (varajax.readyState==1){
document.getElementById(capa).innerHTML = “….”;
}
if (varajax.readyState == 4) {

document.getElementById(capa).innerHTML=varajax.responseText;

}}

varajax.send(null);
}

segun GOOGLE en variso foros el problema radica en esta funcion
varajax.open(“POST”, _pagina, true);
ya la he modificado y nada.
Gracias

Giancarlo dijo...

hola a todos,
funciona bien cargar paginas con php y ajax, pero cuando tengo un video(autoestar=true) en uno de los enlaces y en el otro tengo otro video(autoestar=true), se escucha(solo audio) los dos videos..
Alguna solucion?..

Gracias de antemano,

Saludos

Marxe dijo...

Hola estoy tratand de abrir varios links de la misma pagina dentro del div...ayuda por favor y muxas gracias por tu aporte

Villa Gesellw dijo...

excelente articulo.
Lo probare.

_EpY_ dijo...

He hecho mis ajustillos y funciona perfecto, muchas gracias por el aporte a los novatos nos sirve y de mucho :D

nico_dr dijo...

Estimado hector

Me parece que tu post esta muy bien especificado me funciono a la perfeccion sin problemas muchas gracias por la informacion.

Solo tenia una duda con ajax no se puede cargar un enlace que contenga css lo que pasa que no me mostro unos index que queria cargar que tenian su css nose que paso de todas manera se que todo es posible en la programacion me informare de todas maneras.

Muchas gracias por conpartir esta informacion.

Anónimo dijo...

hola hector, muy buen post, sin embargo al ejecutarlo me aparece error 404
saludos

Anónimo dijo...

hola que tal. he utilizado este script y me funciono muy bien, pero tengo algunos problemas:

1.- una de mis paginas cargada dentro de la div contenedor tiene links y un pequeño java para cambiar una imagen de fondo a gusto del visitante y no funcionan

2.- en otra pagina tengo un formulario o forma, al darle click al boton enviar refresca la pagina y no envia el formulario

3.- al parecer si quiero integrar una galeria me dará problemas, como lo soluciono?

expongo estas dudas que parecer son similares a otras ya publicadas pero no he visto la respuesta, si alguien me pudiera ayudar se lo agradeceré . buen dia

Anónimo dijo...

gracias... mejor explicación imposible aclaraste todas mis dudas

Anónimo dijo...

tengo un problema con el código de arriba para cargar la pagina en una capa div, es decir las paginas que ya están registradas en el menú cargan bien, aparecen con sus tildes y todo pero apenas agrego una nueva pagina en el menú también carga la pagina pero cargar sin tildes, y el código es igualito al código de las otras paginas de muestras que ya esta en el menú, solo tengo ese problema, todo lo demás funciona bien, si me pudieran ayudar se los agredeceria, este es el único código que excepto por este problema si me ha funcionado.

Anónimo dijo...

Hola...el ejemplo me ha servido bastante...

solo tengo un detalle, lo que pasa es que al mandar a llamar a un archivo php en ese archivo hago una consulta sql y mediante un ciclo quiero que este imprimiendo varias imagenes...

si solo imprimo una si lo hace pero cuando quiero que imprima varias ya no imprime nada....

Espero puedas ayudarme.

Anónimo dijo...

Ya lo solucioné xD..

Julián Andres Pizarro Collazos dijo...

Hola, tengo un menu en mi index.php pero no me da siguiendo tu ejemplo, no me carga en el div que tengo... He intentado de varias formas y no me da, agradecería de tu ayuda, mi web site para que lo puedas chekear clic aqui y de antemano mil gracias por tu aporte.

Diego Villanueva dijo...

muy bueno, prolijo y se entiende claro!
lo probé con varios navegadores y me funciono en su totalidad.

lo use para que cargue galerias de imagenes hechas en php dentro de otro php y funciona.

muchas gracias!!

rafar dijo...

muchas gracias por compartir este trabajo, yo sin tener ni idea, y que conste no lo he probado te lo agradezco muchísimo, con gente tan amable como tú, he conseguido aprender muchas cosas, y mejorar mi web hasta límites donde jamás habia previsto sin saber de nada. Esto llevaba muchos días buscándolo para añadir atributos a mis productos en un carrito de compras sin cambiar de página. Un saludo!

julio boyacá dijo...

Hola amigo, muchas gracias por el tutorial, es excelente, solo una cosilla y es que en los html externos donde tengo los contenidos he puesto la etiqueta img, si visualizo la pagina sola, me muestra las imágenes pero si le doy click a el vinculo del menú, solo me muestra los textos, que será eso??? gracias!

eider dijo...

tengo una duda hay alguna forma de hacerlo sin utilizar otro archivo
me explico que todo este dentro del mismo link y llamado desde una base de datos