Digamos que você tenha uma página com um vídeo e um box ao lado com vídeos relacionados. Neste box de vídeos relacionados há uma paginação e você não quer que o usuário clique ali e o site faça o reload, fazendo seu usuário recarregar o vídeo todo denovo.
A maioria dos sites implementa chamadas AJAX usando o atributo onClick da tag html a. Ex:
Próxima Página
Até aí tudo bem. Funciona que é uma beleza, o youtube usa isso, etc. O href=’#’ é usado para não gerar um request pro servidor, usando um recurso simples do html, a âncora.
Se você paginou até a 7a página e quer passar o vídeo para um amigo, com a 7a página selecionada para mostrar alguns vídeos que lá estão, de repente um seu que está ali por exemplo, só com o recurso onClick não seria possível. Teria que pedir para ele paginar e olhar. Mas há uma maneira de fazer isso, e um amigo lá do trabalho, Tiago Motta, fez uma classe javascript que possibilita passar o contexto de todos os boxes da sua página que funcionam com ajax no link para seus amigos.
É o projeto TralhaController: http://github.com/timotta/TralhaController/tree/master
Mas Bruno, comofas/
Esta classe javascript, após você adicionar um observador, ela começa a monitorar a URL do usuário por mudanças na âncora (#). Vamos aos exemplos:
A partir daí o TralhaController passa a monitorar a URL do usuário. Vejamos como montar o link que muda de página no box:
Próxima Página
Dessa forma, quando a URL mudar, o observador que programou e adicionou ao TralhaController será notificado e o método update será chamado com a url “http://seu-site-aqui/#pagina_box_videos_relacionados=2″, sem mudar de página, possibilitando que seu observador faça uma chamada ajax atualizando o box.
Até aqui o onClick também faria. A novidade é que se você copiar este link e passar para um amigo, ele conseguirá ver o vídeo/página/qualquer coisa que estava vendo e o box estaria paginado na segunda página, ou seja, o mesmo contexto que você via, o seu amigo também verá pois ao acessar a página seu observador será notificado e atualizará o box com a página certa.
Espero que este projeto os ajude. Ele implementa um padrão de projeto conhecido: O Observer.
5 Comments
Esqueceu de mencionar sua participação na correção daquele bug
Seria legal fazer isso só que com unobtrusive javascript
Plentz,
É verdade. Este é um dos próximos desafios. Além disso estou pensando em uma maneira de não ter que usar o setInterval que não seja horrorosa, do tipo alterar todos os onClick…
Queria testar isso numa página onde o usuário fica muito tempo pra ver se esse polling pra ver se a URL mudou nao vai ferrar tudo.
Porque você ainda escreve Javascript?
Utilize uma framework que faça isso para si, sugiro http://www.zkoss.org
hehehehehe
Cheers
Olá Bruno, blz? Eu comecei a estudar javascript há pouco tempo, e agora preciso usar um recurso como esse do TralhaController. O usuário clica em link do menu e apenas a div do conteúdo é atualizada (to usando ajax), mas quero que a url também mude. Tentei pelo TralhaController mas ñ consegui, a url até muda, mas o conteúdo não é atualizado. Você tem um exemplo de uma página para eu poder entender melhor? Valew pela atenção. Ah, e parabéns pelo seu site! Fazia tempo que eu não tinha visto uma página web com um design tão claro e objetivo.
One Trackback
[...] URLs para cada contexto de navegação do usuário. Para saber mais sobre ela basta ler o artigo Mantendo contexto usando ajax que o Bruno Carvalho escreveu [...]