Uma das maiores vantagens do uso de uma Framework Javascript é sua facilidade de trabalhar com o Ajax. Ao invés de criar as requisições pelo httprequest em códigos intermináveis e que precisam ser adaptados para funcionar em todos os Browsers, a framework faz este trabalho para você. Resta ao desenvolvedor a criatividade de aplicá-la. Um dos primeiros motivos de procurar o Jquery foi primeiramente o Ajax. Assim como a maioria das frameworks são procuradas. Com a explosão dessas frameworks Javascript como a Jquery, costuma-se associar seus efeitos e suas outras capacidades com Ajax. Para alguns, tudo de legal e novo com o Javascript, como efeitos de animação e de interface é julgado como Ajax. Essa falsa impressão ocorreu justamente por causa da explosão das frameworks e todas as suas funcionalidades.
O Jquery oferece vários meios de trabalhar com o Ajax, desde requisições simples até as mais complexas. Neste post vou mostrar como fazer uma simples requisição de uma página externa, sendo passadas duas variáveis e chamando um arquivo externo usando o objeto httprequest e com isso dispensando o reload da página.
Neste exemplo, irei usar o Ajax para inserir em uma div um conteúdo externo quando o usuário clica em um link.
Enquanto a requisição estiver sendo processada, irá aparecer uma div que funcionará como o carregamento até a requisição ser finalizada.
Abaixo a marcação deste código:
[jsfiddle url=”http://jsfiddle.net/mBKX2/” include=”html”]
A url /echo/html é fictícia e usada pelo jsfiddle para poder emular as requisições ajax para conseguir demonstrar no exemplo.
Vamos analisar este código e descrever todos os métodos usados.
Linha 01: Função do Jquery que executa tudo que está dentro depois que todos os objetos DOM foram carregados. Aconselhável ser aplicado em todo código Jquery que você for usar.
Linha 02: Usando o método hide que esconde a div selecionada, no caso a div com id carregando.
Linha 03: Executando o evento click para a classe exemplo(que está aplicada na tag a). Com isto, quando o usuário clicar no link, será executada as funções que virão abaixo.
Linha 04: Aplicando o método ajaxStart na div com id carregando. O método ajaxStart especifica uma função a ser executada enquanto uma requisição se inicia e não há nenhuma outra ativa. Assim, ela manda exibir a div carregando(através do método show) enquanto a requisição estiver sendo processada e esconde a div com a classe alvo que ficará escondida através do método hide.
Linha 08: Aplicando o método ajaxStop na div com id carregando. O método ajaxStop faz o contrário, ele executa uma função quando a requisição está completa. A função executada irá esconder a div carregando assim como mostrará a div com a classe alvo através dos métodos hide e show.
Linha 12: Fazendo a requisição simples através do método $.get. Este método é usado para fazer requisições simples de ajax através do método get. Também poderia ser usada o método $.post se desejasse passar as variáveis através do método post. Os parâmetros são o arquivo a ser chamado, as variáveis que serão passadas com o seu valor e uma função callback, que é executada quando os dados são carregados com sucesso e aceita como parâmetro os dados passados. Assim, dentro desta função eu mandei apagar o conteúdo da div com a classe alvo através do método empty e logo depois executei o método html que aceita como parâmetro o conteúdo a ser escrito na div. Nesse parâmetro eu passei os dados requisitados que estão no arquivo chamada. Aqui eu usei dois métodos em uma mesma linha, lembrando que o Jquery aceita isto perfeitamente.
Linha 17: O return: false é usado simplesmente para anular o comportamento padrão do elemento, no caso o link, o comportamento padrão é clicar e a página ir para o chamada.php sem usar o Ajax. Com isto, eu permiti que os dados também fossem carregados se o usuário não tiver Javascript ou seu browser não aceitar o objeto httprequest.
O arquivo chamada.php: Neste arquivo há no cabeçalho o recebimento dos dados passados pelas variáveis enviadas pela requisição, para assim poder testar se foi recebida com sucesso. O resto do conteúdo é somente um texto aleatório para testar o funcionamento.
Abaixo encontra-se o código das primeiras linhas do arquivo chamada.php:
$nome = $_GET['nome']; $idade = $_GET['idade'];
echo "conteudo requisitado pelo ajax
";
echo "parâmetros enviados. Nome: ".$nome." idade: ".$idade;
Assim pode ser enviadas quando variáveis forem necessárias no método $.get.
Resultado final
O resultado final é uma simples abertura de uma página externa sem necessidade de se carregar a página. Não existe apenas esta maneira de se escrever o código com o Jquery, existe uma infinidade de métodos e ainda requisições mais complexas que podem ser feitas. Esta é apenas para começar e para mostrar como se torna simples fazer estas requisições com o Jquery e além de tudo, funcionar em todos os browsers que suportam o httprequest sem problemas. A documentação para os métodos para o Ajax pode ser encontrado no site.
[jsfiddle url=”http://jsfiddle.net/mBKX2/” include=”result”]
Espero poder ter ajudado e se quiserem, sintam-se a vontade de compartilhar métodos para requisições simples deste tipo. Espero que com mais este exemplo, tenha mostrado o quanto essa framework pode ser útil no dia a dia do desenvolvimento Web.
Olá Alexandre,
você poderia mostrar um exemplo de como faço para pegar os valores de variaveis em um link como por exemplo: e jogar na função $.get
Obrigado!
Isso realmente é uma grande dúvida que me atormentou também Marcelo. Existem várias maneiras para isto, uma delas foi colocada pelo tmferreira no seu blog:
passar variáveis para o Javascript através da Query String
Dá uma olhada se lhe foi útil e me fala que devo colocar alguns métodos em posts futuros.
Olá Alexandre ótimo post.
Poderia me tirar uma dúvida, estou começando a aprender ajax agora e estou precisando fzr um esqueminha + ou – igual o seu, q por sinal e peguei o script e modifiquei e parcialmente funcionou.
Vou explicar minha dúvida, tenho uma página com uns 4 links na direita e a cada vez q clico em um link o carregando aparece no meio da tela e depois lê a página requisitada. Pelo seu script até onde vi, ele só lê uma página q está no link e no script, certo?
Saberia como posso fazer o que quero se é q entendeu, rs.
Tentei achar na net como fzr na unha mesmo, sem framework e ñ encontrei.
Dá uma olhada pra vc ver o q quero.
http://www.zenryo.com.br/teste_animais/produtos.html
Só está funcionando o primeiro link, condicionador.
Abraço!
E ai Raul,
Entendi o que você quer fazer. Dá uma olhada e vê se este link te ajuda: http://www.tableless.com.br/artigos/ajaxdemo/
Se a dúvida permanecer volte a postar aqui novamente ok?
Abraços…
Ótimo artigo, gostaria de saber como eu faço para fazer requisição de uma pagina .php sem enviar as variáveis!
será que você pode me tirar essa dúvida?
🙂
obrigado e parabéns.
Bom dia Amilton, obrigado pelo elogio…
Se você quer fazer isto utilizando o jQuery, ele tem um método muito simples chamado load, onde você passa como parâmetro somente a página e assim ele irá carregá-la sem passar variáveis, para mais detalhes, acesse http://docs.jquery.com/Ajax/load#urldatacallback. Espero ter ajudado e um grande abraço…
poxa, era isso mesmo!
obrigadão! 🙂
Oi, estou comecando com jquery e mootools agora e apesar de entender a maioria ainda tem uma coisa que nao consigo entender e nao acho quem me explique…
o problem…usando so ajax sem jquery eu uso isso:
Link
Seu exemplo mostra como passar variaves, mas e se essa variaveis vem do php? O que quero dizer e, como passo variaves que sao dinamicas na pagina? Tenho que criar um campo HIDDEN pra cada um?
Seu exemplo as variaveis ja sao definidas dentro do script, como faco elas dinamicas?
Muito bom o site. Valeu
Este é um grande problema Dan, não só da framework mas do ajax em geral. Venho lutando para conseguir isto sem nenhum truque, sem usar javascript no head do documento ou dentro do body da página… mas não vejo outra solução a não ser a citada abaixo.
Entre a tag script, tanto no head(de preferência), tanto no body, você pode fazer o seguinte:
var vemdophp = ;
Assim, a variável vemdophp ficará disponível para ser manipulada via jQuery externamente e poderá ser passada no método $.POST.
Espero ter ajudado e vou tentar buscar uma solução com os desenvolvedores jQuery para resolver isto, pois é a única coisa que tenho que usar no html e venho buscando a total separação que jQuery “quase” oferece…
Abraços e se precisar estamos aí…
Obrigado pela resposta rapida. Ja tinha pensado em passar as variaveis de PHP pra JS mas nao sabia como. Esse modo nao parece ser o mais correto, mas se functiona entao e melhor do que usar um monte de HIDDEN campos.
Obrigado.
Realmente não é o modo mais correto, mas foi a única solução que encontrei até agora, se for campos de formulário, ele pode ser “pego” pelo jQuery, mas se for variáveis eu desconheço outro modo, mas vou pesquisar, se encontrar algo também você me fala, abraços…
Parabéns pelo Ajax com o Jquery, eu também estou começando em AJAX e consegui colocar no meu localhost o seu scritp, ficou super show, o problema é só funciona com um link, como faço para abir mais de um link, eu olhei os sites que voce recomendou, até consegui, mas não achei nenhum com o GIF de preloading (igual o seu), como faço para usar o seu script com mais de um link.
Valeu
Para pegar preloaders tem um ótimo site que gera automaticamente, é o http://www.ajaxload.info/ .
Para fazer uma barra de navegação em ajax, com menus que chamam páginas específicas tem várias maneiras para isto, uma delas é você passar um id no link e pegá-los com o jQuery através do seletor de atributos… é um pouco mais complicado, mas irei fazer um post pra isto, mas a idéia é essa… se quer chamar a home por ajax, por exemplo, vc pode fazer
$('a[href^=home]').click(function(){//codigoajax});
No código ajax vc tem que pegar um identificador para passar por parâmetro para o post ou o get para chamar a página, ou então usar o método load que carrega uma página por ajax.
Existem também plugins para navegação em tabs que usam um esquema próprio, por que dependendo da situação fica muito código para apenas chamar uma página em ajax… mas dá para desenvolver um script para poder fazer tudo automático, espero que isto já ajude… abraços…
Otima Materia!!!
Mas tenho uma dúvida… se dentro do conteudo carregado eu tenho um link, como faço para quando clicado ele chamar outro conteudo dentro da pagina novamente?(retirando o antigo) Grato !
Você irá usar o mesmo raciocínio… simplesmente acesse esse segundo link através do jQuery e execute o método usado para o ajax…. se ficar muito repetitivo e se vc desejar fazer um projeto usando várias vezes o ajax desta maneira, você terá que usar uma programação mais avançada, como usar um each e pegar o atributo href por exemplo para saber qual página é e usar um return false para não ir para a página.
Alexandre,
como sempre vc foi perfeito na matéria! Parabéns mesmo!
Uso alguns desses milagrosos frameworks em meus projetos como o JQuery, Mootools e agora estou estudando a ExtJS.
Uso sempre alguns sites como referência de consulta e o seu está em minha wishlist. Abraços.
Muito obrigado Junior, fico feliz pelo prestígio. E o que quiser compartilhar, seja bem vindo…
Cara, este exemplo é quase perfeito pra mim…. só preciso usar ele em 5 links numa página .aspx, como eu faço? passo os links por variável? se sim, como ficaria?
Parabéns pelo blog.
Boa tarde Evaldo,
se você quer abrir páginas por ajax, o ideal é usar o método load, que tem esse propósito. Você pode pegar os links usando o método para pegar o atributo href.
Seria mais ou menos assim(estou desenvolvendo um plugin para isto):
$(“a.classe”).click(function(){
$(“div”).load(this.href);
return false;
});
Espero ter ajudado. Abraços.
Eutou com um probleminha, uso a função pra chamar as páginas para abrir numa DIV, estas páginas tem outros links que por sua vez chamam outras páginas, até a segunda chamada abre a página dentro da div, ex: link chama pa´gina pra dentro da div, esta página tem um link para outra pa´gina, (que abre na div), ok funciona, mas esta terceira pa´gina tmen tem um link e ai não abre na div??
o que pode estar errado??? Estou usando asim:
$(‘a’).bind(‘click’,function(){
$(“#centro”).load(this.href).fadeIn();
return false;
@Dargo: Já fiz um post sobre isto, dá uma consultada em http://www.alexandremagno.net/blog/?p=69
Isto acontece por que quando você atualiza uma página via ajax, o conteúdo inserido “perde” os eventos, tendo que ser reanexados, no seu caso, no callback do load você precisa reanexar os eventos, mas tem que tomar muito cuidado com isto e saber usar:
$(‘a’).bind(“click”,function(){
$(“#centro”).load(this.href,function(){
$(‘a’).bind(“click”,function(){
$(“#centro”).load(this.href);
});
});
});
Isto é uma adaptação do seu código para que o evento clique funcione para a página atualizada por ajax.
Espero ter ajudado. Abraços.
Infelizmente não funcionou… tentei tmen usando a LiveQuery, e não obtive resultado…
Não queria de maneira alguma usar um iframe, aj que sempre tenho problemas com a scrollbar horizontal……
se você puder dar uma analizada..
http://www.designeria.com/fenabrave
Abraços
$(document).ready(function(){
$(“#carregando”).hide();
$(“.exemplo”).click(function() {
$(“#carregando”).ajaxStart(function(){
$(this).show();
$(“.alvo”).hide();
});
$(“#carregando”).ajaxStop(function(){
$(this).hide();
$(“.alvo”).show();
});
$.get(“chamada.php”,{nome: “Alexandre”, idade: “23”}, function(data) {
$(“.alvo”).empty().html(data);
});
return false;
});
});
// não fico faltando esse script ai não ???
@tiare: Qual a diferença deste código para o que apresentei?
Alexandre tenho um site todo em css e jquery, os links abrem em uma div(#centro), funciona perfeito, mas, um destes links chama um formulario, e qundo submito o from, ele abre em outra página(qdo uso o ajaz.form), ou volta a página inicial do site(metodo tradicional), o que podera ser??
função usada para os link’s:
$(document).ready(function(){
$(“#centro”).ajaxStart(function(){
});
$(‘a’).livequery(‘click’,function(){
$(“#centro”).load(this.href).fadeIn();
return false;
});
});
———-
o formulario
aqui os elementos do form
@joni: você usou o live query para links, assim, ele só irá reanexar os eventos depois de atualizado o dom para os links, você precisa também usá-lo para eventos em forms. Espero ter ajudado.
Alexandre, parabéns! Esse post me ajudou bastante!
Só estou tendo um problema…as palavras com acento estão vindo desconfiguradas do arquivo “chamada.php” ? como faço pra consertar isso?
Isto é pelo fato da codificação da requisição ajax ser por padrão UTF-8(os caracteres do português possuem a codificação ISO-8859-1). Você pode ou setar no PHP o header para esta codificação ou deixar os caracteres na forma do html entities(onde o é por exemplo, seria é).
Espero ter ajudado… abraços….
Bom cara tenho uma duvida fiz seu exemplo blz
mas
$.get(”chamada.php” ….
funciona blz
so que gostaria de passsar uma url tipo ‘www.meusite.com’ ou um endereço no estilo cake ‘/usuarios/add’ mas nao funciono pq ?
ola testei de tudo quanto foi geito e não funcionou aparece carregando mas não mostra a pagina
testei outros ajax com jquery e funfo mas o seu é bem mais claro pena que num rolo se vc souber o porque disso ou se tiver um exemplo pronto disso posta ai show seu site
@Ricardo: Você já tentou olhar a resposta da requisição no firebug? Ele provavelmente poderá apontar a fonte do problema. Em relação a domínios externos, como www, não sei se irá funcionar, pois você estaria tentando abrir um site externo, enquanto ao formato estilo cake, ele irá abrir normalmente. Se na resposta do firebug estiver constando que o endereço não foi encontrado, o problema não está sendo no ajax.
Espero ter ajudado, abraços…
@Roberto: Me fale mais detalhes sobre o erro…
Estou a adorar as tuas dicas, parabéns comigo também não foncionou como o ROBERTO tenho o jQuery 1.2.3 – New Wave Javascript
IE 7
Fire 2.0.0.13
um abraço e continua 🙂
ignora o meu post funcionou
era as divs estão mal no teu POST
um abraço
@nuno: Você tinha razão, houve um problema quando fui gerar a marcação html. Agora já está corrigido…
@roberto: verifica a marcação html…
Abraço a todos…
Alexandre, ainda bem que está resolvido, provavelmente alguns iriam ter dificuldades!
Estou aprender bastante com os teus posts, cada vez mais dependente do jquery. Uma questão já agora, já sabes como contornar a situação do retorno dos dados da BD do teu post “Ajax com o Jquery – Parte 02”?
um abraço e bom trabalho
Nuno
mais uma vez a chatear 😉
podias fazer um de combobox + jquery + php, era fantástico 🙂
abraço
@nuno: Obrigado nuno, e não tem problema em deixar comentários, fique a vontade!
O retorno do banco de dados é algo abrangente, uma maneira mais eficiente levaria duas requisições e uma consulta ao banco, que gastaria mais tempo, mas garantiria que os dados são os que estão no banco. A maneira do post “Ajax com o jQuery – parte 2”, além de fazer somente uma requisição, a resposta do PHP diz se foi adicionado com sucesso, então pode ser usada sem problemas!
A idéia do combo box é muito boa, já implementei em um projeto, assim que puder posso passar para todos…
Abraços e sucesso!
Valew… Muito bem explicado.
código que pega a url do link, em vez de só um link fixo
Ajax no Jquery
$(document).ready(function(){
$(“#carregando”).hide();
$(“.exemplo”).click(function() {
$(“#carregando”).ajaxStart(function(){
$(this).show();
$(“.alvo”).hide();
});
$(“#carregando”).ajaxStop(function(){
$(this).hide();
$(“.alvo”).show();
});
$.get(this.href,{nome: “Alexandre”, idade: “23”}, function(data) {
$(“.alvo”).empty().html(data);
});
return false;
});
});
Clique aqui para abrir uma página html pelo httprequest
Clique aqui para abrir uma página html pelo httprequest
carregando…
a página será aberta aqui
Ola, boa noite, Alexandre.
Achei bem proveitoso seu post, estou iniciando na framework jQuery, e estou utilizando a facebox acredito que deva conhecer pois bem, como eu faço para chamar uma função na jQuery para fechar (esconder o div). Igual no teu exemplo, como eu esconderia o div.
Valeu até mais.
@Fábio: Obrigado Fábio, fico feliz que tenha ajudado. Para esconder uma div, existe o método hide. sua sintaxe é a seguinte:
$(“elemento”).hide(); // se quiser utilizar uma animação, basta passar um parâmetro “slow”, “normal” e “fast”
Espero ter ajudado e abraços!
Ótimo post, parabéns pela iniciativa.
Usava Xajax (http://xajaxproject.org/) para fazer httprequest e jquery para alguns efeitos, mas porque não utilizar a mesma ferramenta par ambos ?
########
Só um detalhe, vi que no arquivo chamada.php voce escreveu parâmetros com acentuação em html (ˆ), pois colocando acentuação normal o script retorna par?metro, tambem não encontrei no wiki do jquery nenhum resultado com a palavra charset, você conhece alguma solução para este porém ?
@alberto: por padrão, as requisições ajax possuem um charset definido. A melhor maneira é usar o html entities para os textos. Espero ter ajudado, abraços!
Opa! Cara q bacana o casamento de Jquery com o Ajax! rsrs
Agora tenho uma dúvida quanto a seu código!
oque ésta acontecendo neste “html(data)”?
de onde surgiu essa variavel data?
Desde já agradeço, e Parabéns!
@Carlos Anderson: a variável data é passada como parâmetro no callback da resposta. Ela consiste no conteúdo retornado. O método html insere um conteúdo html dentro do contexto da div que executa o método. Espero ter esclarecido… Abraços e boa sorte…
Alexandre parabéns por toda essa iniciativa que mais parece uma cruzada de ajuda aos desenvolvedores iniciantes, principalmente autônomos como eu, que não aprende nada com ninguém ao ser pela internet, tendo que ficar as vezes dias e dias sentado tentando resolver um problema, para depois se ver que era bem mais simples de se resolver do que se pensava; Uma vez que sou iniciante em progamação e web designer e não tenho nenhum tipo de formação acadêmica. Caro Alexandre, tenho um problema! Estou construindo um site que tem quatro divs; Um header(785×186), um foot(785×216), uma left column(246×512) e uma div chamada content(539×512), aonde nessa mesma content existe um menu que fiz que ao clicar por xemplo em about-me, o javascript mostra um caminho ligando o link até uma caixinha flutuante que é mostrada ao lado esquerdo justamente na left column, bom existe um link fotos que eu gostaria que ao invés de carregar uma página que contem um galeria de fotos, carregasse só o conteudo da div content ao lado direito que contem a mesma origem do link “fotos” com uma galeria de fotos. Ao ler o artigo entendi que isso seria possivel. No caso do exemplo dado ele pegou as variáveis e passou através da método get, no meu caso não quero passar nenhuma variável, quero carregar uma página que é nada mais do que a mesma sem o head o foot e a left column, só com a div content com outro fundo que vai conter a galeria. Não quero que a página seja carregada,só o frame vamos dizer, tudo que tentei com iframe frame e tudo mais, deu maus resultados… Sempre aparecendo barra de rolagens, não as quero. Quero só a mesma content vindo de uma página replicada sem as outras divs sendo que nessa vai ter todos os códigos da galeria smooth! Será que é possivel e Será que eu fui claro? Serei mais claro se for preciso e postarei o código caso você ache necessário! Vi o que o colega Amilton perguntou e estudei a sua resposta sobre o método load tentei de tudo, fui na documentação Jquery li os parâmetros entendi fiz, mas, a cereja do bolo não foi colacada!!! O que preciso para obter tal resultado e será que vocÊ poderá me dar um força??? Diante mão, valeu por tudo que aqui estou aprendendo!!!
@mavi: Obrigado pela força. Da maneira que você está dizendo é possível sim, mas deve ser algo no código, você poderia me enviar para eu dar uma olhada. Abraços e boa sorte.
Estou com o mesmo problema do usuário acima em relação ao livequery, não estou sabendo aplicá-lo no código, já li o material mas ainda estou me batendo, pode me dar um help, uma pequena explicação da aplicação dele no código, ou um exemplo?
@katia: A utilização do livequery é semelhante ao bind, ao invés do bind você usa o livequery para poder “rastrear” os eventos:
Espero ter ajudado, abraços.
Oi alexandre esse é o meu código na verdade agora me expresando melhor, o que eu gostaria de fazer é ter vários eventos sem reload ná página. Por exemplo, um sub menu como você vai poder ver no código onde ao clicar em biografia aparece informações sobre a pessoa, works aparece informações sobre o que a pessoa já fez e por fim ao clicar em fotos aparecia a galeria smoothgallery no mesmo lugar que os outros eventos tinham sido mostrado antes, que nada mais é doque dentro da div maisinfo que está dentro da div content, seria um lugar que eu achei legal para aparecerem e sumirem os eventos no site. Uma vez que já aparece a galeria quando a página carrega, depois teria que esconde-la para mostrar os outros eventos e perderia a minha imagem de abertura que fiz e quero preserva-la pela riqueza do design em si. Já tentei com Jquery com toogle e outras coisas mais, até com uma tal de Dynamic Content de acordo com esse site site:http://www.dynamicdrive.com/dynamicindex17/index.html e o máximo que consegui foi uma galeria que não funcionava direito e links que não faziam nada com algumas modificações na aparência. Quero que a galeria toda seja um evento acionado por um link pelo usuário sem reload. Aqui está o que tem no head pra você saber e abaixo segue o código. Pra mim tanto faz se ela está na página ou é chamada de outra o que seria primordial seria não ter reload nem barras de rolagem e ela ser acionada pelo meu link fotos, hihihi Tô f zendo tudo como mandam os figurinos inclusive falo inglês fluentemente e até o que consegui de outro desenvolvedores através de forum segui ao pé da risca e nada. Será esse problema uma nova cruzada para o desenvolvimento de páginas? Acho que não e prefiro acreditar que é o meu pouco conhecimento sobre computação, motivo pelo qual vi nesses frameworks uma mão na roda pra que quer mexer com ajax tendo que lidar só com a API e outras coisas mais na camada de cima Alexandre de qualquer forma, conseguindo ou não muito grato pela sua gentileza em mim ajudar. Estudo muito todos esses casos aqui só pra estudar e em meu blog que estou construindo botarei alguma coisa falndo daqui e um link direto, estou no aguardo. Como disse antes, segue o head e depois o resto:
@mavi: Acho que entendi bem o que você quer. Você quer fazer uma navegação em ajax. O problema é que você nesta navegação precisa inserir uma galeria. Para isto você precisa tomar alguns cuidados. Não descobri o por que de ter dado errado. Mas você tem que levar em conta que quando você carregar a galeria, o dom vai ter modificado e os eventos necessários para a galeria funcionar não estarão mais valendo. Acho bom você dar uma olhada no artigo http://www.alexandremagno.net/blog/2007/11/22/por-que-meus-eventos-param-de-funcionar-depois-de-uma-requisicao-ajax/
Espero ter ajudado.
Com certeza Alexandre é exatamente o que eu quero fazer, uma navegação em ajax e porque não usando o Jquery, que me pareceu muito adequado para isso; com toda essas propriedades que tem o framework, de esconder elementos na página com efeitos de slide ou bind…Enfim fico muito grato por sua atenção, claro que vou dar uma olhada nesse post que você me recomendou, e me desculpe pelo calhamaço de informação no post rs, não saberia fazê-lo sem ter explicado dessa forma; no mais, acho que dexistirei e farei uma página só para a smoothgallery.
AxéThanksCarpeDiem!!!
@mavi: A navegação em ajax é um grande desafio e dependendo do projeto pode surgir muitos “empecilhos”. O ideal é você se acostumar com a framework primeiro e num momento posterior começar a arriscar coisas novas como essa. Se desejar alguma ajuda, pode me adicionar. Estarei passando o contato por e-mail. Boa sorte…
Alexandre, fantastico o seu post.
Mas eu não sou um “programador”. Não sei trabalhar muito bem ainda com estrutura de linguagens mais complexas. Então geralmente eu adapto a partir de coisas jah feitas.
O seu exemplo é exatamente o q eu quero fazer.
A diferença eh q eu preciso abrir varios links, ao inves d um (li as suas respostas dos comentarios acima, mas naumm entendi como usar o Ajax/load).
S naum for pedir muito tem como vc postar um exemplo?
Grato,
Rodrigo
@Rodrigo: Estou desenvolvendo um plugin para realizar isto. Simples navegações de página.
Valew Alexandre.
Estou aguardando.
S possivel me mande um email quando vc posta-lo.
@Rodrigo: Pode deixar. Se estiver precisando rápido o raciocínio é usar o seletor do jquer para pegar todos os links que você deseja, então usar o load atribuindo a URL do link clicado usando o contexto this. O servidor pode detectar se a requisição é ajax e assim enviar somente a parte desejada do conteúdo.
Ola alexandre,
tenho uma duvida, quero fazer uma requisição ajax de uma pagina e enviar todos os dados que estão em um formulário dela para o target, sei q posso usar o metodo $.post(url, data, functionCallBack)
minha duvida é como posso atribuir todos os campos e valores do formulario da pagina para a variavel ‘data’ e enviá-los como argumento??? desde ja agradeço
@Renato: Para fazer requisição utilizando dados de formulário, você deve usar o AjaxForm do Malsup que foi abordado aqui no blog no artigo http://www.alexandremagno.net/blog/2008/01/22/ajax-form/. Abraço e boa sorte…
Alexandre, muito bom o post, mas gostaria de saber se ele mostra chamndou uma url externa tipo http://www.siteexterno.com.br? E como poderia fazer?
@Ederson: Teoricamente as requisições ajax não podem ser crossdomain, ou seja, que venha de um domínio externo. Isto varia muito do que você deseja fazer. Se quer ler um Feed externo, por exemplo, você usa uma linguagem de servidor para gerar o arquivo no seu domínio e assim faz a chamada local. Espero ter ajudado e boa sorte.
Olá Alexandre sou iniciante em Ajax, ando lendo bastante e no site que estou criando existe um menu aonde todas as páginas são carregadas certinho numa div que criei chamada conteudo sem a necessidade de carregar o restante do site. Porém tenho uma duvida… Como faço pra que quando o Site seja aberto mesmo sem clicar em nenhum dos itens do menu já esteja mostrando a página home que está dentro da div conteudo já que ela só aparece quando eu clico no botão home do meu menu. Desde de já agradeço!
@Anderson: Cara, você pode carregar o conteúdo normalmente de primeira sem ajax, então quando a requisição for feita irá substituir o conteúdo na div conteúdo. Espero ter ajudado, abraçosn e boa sorte!
obs. Estou fazendo um plugin para realizar o que você está fazendo e uma forma fácil, acho que irá ajudar muito…
Tenho encontrado barreiras desenvolvendo sistemas com AJAX, gostaria de conhecer mais sobre a metodologia de desenvolvimento… Por exemplo, no head da página inicial de um site que usa ajax está declarado um plugin ex:
$(‘input#quantidade’).spinedit({aumentar: 1});
Imagina que o site tenha vários formulários em varias páginas diferentes, neste caso o plugin não funciona na página carregada dentro de um container com AJAX.
Deu pra entender o problema? Qual seria uma solução para esse problema?
Abs
@fernando: Bem fernando, sistemas em ajax não são tão simples e vários aspectos tem que ser levados em consideração. Provavelmente você não leu este post:
http://www.alexandremagno.net/blog/2007/11/22/por-que-meus-eventos-param-de-funcionar-depois-de-uma-requisicao-ajax/
Espero ter ajudado… abraços e boa sorte.
Existe uma maneira ainda mais fácil.
$(document).ready(function(){
$(‘#carregando’).html(”);
$.ajax({
type: “GET”,
url: “chamado.php”,
data: “nome=Alexandre” + “&idade=23”,
dataType: “html”,
success: function(data){
$(‘#alvo’).html(data);
}
});
});
[]s
$(’#carregando’).html(“tag img aqui”);
Olá Alexandre. Caso me possa ajudar, agradecia. A situação é a seguinte, fiz um calendário de eventos em PHP, que é carregado em Jquery através do método load ($(“#calendario table”).load(“calendario.php”) para dentro do meu ficheiro html sempre que o site é aberto. Cada link do calendário(dia), esta apontado para um ficheiro em PHP que trata dos eventos. O meu objectivo passa por o utilizador carregar no calendário num dia em que exista um evento e aparecer esse evento na pagina html(tudo isso em Ajax).
O problema é que quando carrego no link não vai buscar o $(‘#calendario a’).click(function(), porque a Tag ‘a’ simplesmente não existe na pagina principal que é feita em html, mas sim no calendario.php. Tem alguma ideia como posso ir “buscar” a tag ‘a’ a um ficheiro em PHP?
É possível que seja um pouco complicado de entender, caso isso aconteça, eu explico novamente.
Desde já agradeço.
Olá Alexandre!!!
Antes de mais parabéns pelo blog, os posts são muito úteis e fáceis de entender. Contudo tenho uma duvida, já que sou inexperiente em Jquery.
A duvida é a seguinte, tenho uma pagina em html(home page), que quando é aberta, carrega para um div um calendário de eventos que fiz em PHP. Usei o método load em Jquery ($(“#calendario table”).load(“calendario.php”);).
O que pretendo é que quando carrego num link do calendário(dia), possa ir buscar o evento associado a esse mesmo dia que está no arquivo em PHP, evento.php e seja “despejado” na homepage. O problema é que quando carrego no link do calendário é suposto ir buscar isto: $(‘#calendario a’).click(function(), só que a tag ‘a’ não existe na minha homepage em html, mas sim no calendario.php que foi carregado para o arquivo em html, o que faz com que tudo que esteja dentro da .click(function() não funcione.
Tem alguma ideia como posso buscar a tag ‘a’ ao ficheiro calendário.php?
Desde de já agradeço a sua ajuda.
Cumprimentos.
@hugo: Aconselho que leia o post “Por que meus eventos param de funcionar depois de uma requisição ajax” – http://www.alexandremagno.net/blog/2007/11/22/por-que-meus-eventos-param-de-funcionar-depois-de-uma-requisicao-ajax/
Abraços e boa sorte.
Tenho um menu em flash e abaixo uma div conteúdo onde abrem as páginas chamadas, porém uma destas páginas tem uma galeria de fotos jquery que não funciona de maneira alguma quando a página é chamada pelo ajax. Segue a função e o linlk do botão em flash.
O ajax esta assim
function abrirPag(url){
//Obtém o objeto HTML
objetoHTML=document.getElementById(”conteudo”);
//Exibe o loader
objetoHTML.innerHTML=””;
try{
xmlhttp = new ActiveXObject(”Microsoft.XMLHTTP”);
}catch(ee){
try{
xmlhttp = new ActiveXObject(”Msxml2.XMLHTTP”);
}catch(e){
try{
xmlhttp = new XMLHttpRequest();
}catch(E){
xmlhttp = false;
}
}
}
xmlhttp.open(”GET”,url);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4){
retorno=unescape(xmlhttp.responseText.replace(/+/g,” “));
objetoHTML.innerHTML=retorno;
}
}
xmlhttp.send(null);
};
O botão esta assim
on(release){
getURL(’javascript:abrirPag(”produtos.php”);’);
}
@alexandre: não vi o contexto todo para fazer uma melhor análise, mas pelo visto você precisa chamar galeria logo depois da função de retorno do ajax, quando a requisição for completada com sucesso. Espero ter ajudado abraços…
Obrigado pela atenção mais não entendi direito, sou leigo no assunto, poderia ser mais especifico ? Grato
@Alexandre
Aconselho que leia:
http://www.alexandremagno.net/blog/2007/11/22/por-que-meus-eventos-param-de-funcionar-depois-de-uma-requisicao-ajax
Muito bom o material…
Quero fazer, usando ajax ou o que for melhor, um cadastro que tem dois selects, além de outros campos: o segundo select está em função do primeiro, que oferece opções como MARCAS, então, mostro os MODELOS que aquela marca selecionada tem associado.
OBS.: EXISTE UM RELACIONAMENTO ENTRE AS TABELAS MARCA E MODELO (uma marca pode ter vários modelos, mas um modelo só pode pertencer a uma unica marca)
Então imaginamos que ao selecionar a marca devo fazer um consulta ao banco usando o pk da tabela marca, desse forma trago os modelos que estão associados a marca selecionada. (PELO MENOS É ASSIM QUE IMAGINA QUE SEJA…)
Dá pra fazer em Ajax? Ou jQuery?
Como?
@Marcondes: exatamente da forma como voce esta dizendo! 🙂
Seguinte estou com um problema e gostaria de uma orientação pra ver se pode ser feito assim:
Tenho uma função mais ou menos assim:
$(document).ready(function(){
$(“#menuContato > a”).click(function() {
$(“#conteudo”).hide(“slow”);
$(“.menu > li”).attr(“class”, “item”);
$(“#menuContato”).attr(“class”, “item ativo”);
var href = $(this).attr(“href”);
$(“#conteudo”).show(“slow”);
$(“#conteudo”).load(href);
return false;
});
$(“#formulario”).submit(function() {
var nome = $(“#nome”).val();
var email = $(“#email”).val();
var mensagem = $(“#mensagem”).val();
alert(nome);
return false;
});
});
Então é mais ou menos isso, to chamando um form de uma outra página dentro de uma DIV, pra deixar tipo os antigos Iframes, mas a função pra envio de FORM usando AJAX não está funcionando, devo tratar formulário que vem de outra página do mesmo jeito ?? Não sei se fui bem claro na explicação. Agradeço se alguém puder me ajudar.
@Hammel: desculpe, mas não entendi muito bem, talvez alguém possa ajudar…
Muito bom post, ótimo tutorial, muito útil mesmo. Obrigado 🙂
AT+
Tem um plugin que faz isso:
http://eduardo.pacheco.kanema.com.br/plugin-para-incluir-js-e-css-por-jquery/
Alexandre sou desenvolvedor .NET e vi alguns exemplos de menu em jquery sendo que meu maior problema é que minhas permissões de acesso é via banco de dados, estou estudando a possibilidade de fazer isso via webservice(arquivo xml), vc tem algum tutorial que tenha algum exemplo ?
@Junior: a forma de navegar é a mesma pois com acesso a banco o conteúdo retornado geralmente é um XML ou JSON. Aqui no blog tem um exemplo bem simples de navegar em um xml com jquery: http://www.alexandremagno.net/blog/2007/08/22/verificar-login-com-ajax-e-jquery/
Espero que ajude e um abraço…
Olha esse código não funciona com imagens, por exemplo na minha página coloco o carregador só que nem carrega e já aparece a pagina requisitada carregando as imagens lentamente. Preciso que o carregador funcione até a pagina requisitada esteja totalmente carregada com todos os gráficos e isso não acontece.
Interessante. Eu uso o xajax para tratar o ajax. Achei o jquery interessante e estou dando uma olhada no que ele oferece.
Recentemente eu tinha feito o comentário acima. Resolvi vir postar o resultado da minha experiência: substitui o xajax completamente pelo jquery, muito bom mesmo!
Alexandre, estou com um problema na minha função ajax que retorna um json uso um jquery que se chama week calendar. A pesquisa ao banco esta toda funcionando so não esta me devolvendo na tela os resultados. Teria como dar uma olhada? Olhei pelo firebug e a variaval dados esta undefined ele nao pega o metodo ajax passa direto para o return.
var dados = []
$.ajax({
type: ‘POST’,
url: ‘actions_teste.php?acao=pesquisa_agenda&teacher=’+teacherField+’&date=’+Data+’&end=’+timeEnd+’&start=’+timeStart,
dataType: ‘json’,
cache: false,
success: function(result) {
dados = result;
}
});
return {
events : dados
};
Obrigada
@Kamilla: Você não pode fazer desta forma por que a chamada ajax é assíncrona, então o retorno da chamada nem sempre irá guardar na variável no momento que você espera. Você precisa passa os dados para alguma outra função e ela irá tratar o retorno. Isto é um erro bem comum. Outra solução é colocar a chamada ajax síncrona, mas não é recomendado por que enquanto a requisição ajax estiver sendo feita o browser trava. Espero ter ajudado e boa sorte.
Obrigada pelo retorno rapido, mas passei os dados para outra função e mesmo assim não funcionou e tentei o AJAX síncrona também e nada. A variavel dados não pega a função do ajax.
@kamylla: tente verificar se há algum retorno na variável result e da forma como expliquei você não usaria uma variável dados, você chamaria uma função que trataria o result neste caso.
Existe uma discussão a respeito: http://stackoverflow.com/questions/5316697/jquery-return-data-after-ajax-call-success