Jquery cargar contenido secciones ajax
Hola, estoy trabajando en un sitio web al que me gustaría darle una funcionalidad similar a la de cargo collective. Seguro que conocéis el sitio, si no es así os pongo un link - http://cargocollective.com/
Estoy trabajando en mi portfolio, y aquí generalmente se plantea una grid de trabajos que al clickar sobre uno de ellos un div oculto se abre y carga, imagino via ajax, el contenido de este trabajo.
He buscado en el foto y en internet, y no hay manera de encontrar un lugar donde se explique bien cómo plantear un proyecto así.
Aquí en el foro he encontrado un plugin que se llama jquery history que permite generar hash para cada trabajo, de modo que podemos tener una url por cada uno. Este es un primer paso, pero cómo realizaríais el tema de la carga via ajax?
No termino de ver cómo lo hacen en cargo, así que si alguien me puede echar un cable lo agradecería un montón!!
Muchas gracias! :)
andrewman
Si lo usas con Wordpress, creo sería mejor que usarás la función get_post. No necesitas esperar que se ejecute todo el bucle para obtener el contenido de un post específico.
maddundee
Andrew, muchas gracias!
El método .load() lo utilicé en un proyecto y resultó muy sencillo de usar, simplemente le pasas la url y listo. Luego lo cargas en un div, lo muestras y fuera. Pero mi problema concreto es poder más tarde escalarlo a Wordpress. Pero me he dado cuenta que realmente le puedo pasar la URL correspondiente al loop y el cms a través de la plantilla single-post ya va generando cada uno de estos. Parece sencillo, tengo que estudiarlo bien.
Además es muy importante eso que remarcas de pasar las url vía POST o GET. WP usa get escribiendo el permalink en la URL tal y como lo tengas definido, es decir, pasa el nombre del post y la fecha por ejemplo, lo cual es muy interesante a la hora de trabajar el SEO de esas URLs. Voy a trastear bien ese jquery.history para manejar esto.
Cuando lo tenga montado ya te contaré. Muchas gracias por tomarte las molestias de mirar cargo y el hilo en general!! ;)
andrewman
Todo depende de como plantees el proyecto, divs ocultos en la misma página o subsecciones cargadas desde un html. ¿Vas a usar algún CMS o harás el código a mano?
Cargo utiliza la función post que es uno de los atajos existentes de jquery.ajax. También tienes $.get y el más fácil y cómodo de todos, el $.load, que incluso te permite cargar el contenido de un elemento específico (un div, una lista, etc...). Para todos ellos necesitas especificar una url de la cual obtendrás el contenido que quieres cargar.
Si fuese con un cms, probablemente tendrás que usar un post o get y pasar como variable una id, para así obtener el contenido desde la base de datos. Por otro lado, si lo haces a mano, podrías usar el get y pasas como referencia el nombre del archivo.
Lo normal sería que en la grilla de proyectos, cada proyecto contega el link de la sección/proyecto y el evento click de cada uno de ellos sea procesado por una función que defines tú. En dicha función tendrás que definir las variables que necesitas para utilizar el atajo ajax que hayas elegido y una vez cargado el contenido, procedes a reemplazar(insertar) dicho contenido en un elemento predefinido (cargo usa un div #main-container).
A grandes rasgos, funciona más o menos así, espero te sea de ayuda.