Denisson Santos 0 Denunciar post Postado Janeiro 5, 2007 Fabyo disse: é o IE deve guardar o cache da página por isso quando você faz alguma atualização nao funciona quando você da f5, mas você pode fazer com que o ajax nao guarde o cache da pagina usando http.open('GET', url, true); http.setRequestHeader('Content-Type', "application/x-www-form-urlencoded; charset=iso-8859-1"); http.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate"); http.setRequestHeader("Cache-Control", "post-check=0, pre-check=0"); http.setRequestHeader("Pragma", "no-cache"); http.send(null); Olá Pessoal, cheguei ao fórum a poucos dias e gostaria de colocar a título de curiosidade o código correspondente a este em outras linguagens:COLOCAR NO TOPO ACIMA DE QUALQUER OUTRO CÓDIGO//JSP<% response.setHeader("Cache-Control","no-cache"); //HTTP 1.1 response.setHeader("Pragma","no-cache"); //HTTP 1.0 response.setDateHeader ("Expires", -1); //evita o caching no servidor proxy%>//ASP<% Response.CacheControl = "no-cache" %><% Response.AddHeader "Pragma", "no-cache" %> <% Response.Expires = -1 %>//HTML<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /><meta http-equiv="Content-Language" content="pt-br" /><meta http-equiv="Expires" content="Thu, 01 Jan 1970 00:00:00 GMT" /><meta http-equiv="Cache-Control" content="no-store" /><meta http-equiv="Pragma" content="no-cache" />//CGI ou PEARL (Retorna: retorna.cgi ou retorna.pl)#!/usr/local/bin/perl<br />print "Content-type: text/html; charset=ISO-8859-1\n\n";<br />print "Pragma: no-cache\n";<br />print "Cache-Control: no-store\n";<br />print "Expires: 1\n\n";No caso do de usar cgi-pearl mude a linha da função do Ajax:De: ajax.open("GET","retorno.cgi",true);Para: ajax.open("GET","/cgi-bin/retorno.cgi",true); // cgi-bin é o nome da pasta de seus arquivos "neste caso"//Could-fusion<cfheader name="Cache-Control" value="private"><cfheader name="Cache-Control" value="no-cache"><cfheader name="Expires" value="#GetHttpTimeString(DateAdd('d', -1, Now()))#"><cfheader name="Pragma" value="no-cache">Valeu...T+ Compartilhar este post Link para o post Compartilhar em outros sites
nvGullit 0 Denunciar post Postado Janeiro 7, 2007 pow meu, baixei e vou testar assim q for possível, só q pelo q eu vi até agora ficou muito show mano. Compartilhar este post Link para o post Compartilhar em outros sites
[ GuTo ] 0 Denunciar post Postado Janeiro 25, 2007 Legal que tem mais gente fazendo JS não obstrusivo! Só tenho uma dica: criem funções para serem acessadas e escutadas por qualquer elemento e não coloquem as funções no elemento. Seria o caso de adicionar o evento ao elemento, onde ele chamaria a função. E no caso aí, vocês setam uma função para cada evento, é diferente. É como se fizessem: <a onclick="function(){ this.innerHTML='MUDOU!'}">0001</a><a onclick="function(){ this.innerHTML='MUDOU!'}">0002</a><a onclick="function(){ this.innerHTML='MUDOU!'}">0001</a>Sacaram? Por isso, fazer usando a função do Scott Andrew, http://onlinetools.org/articles/unobtrusivejavascript/, ou outras genéricas, que façam algo como: function addEvent(elm, evType, fn) {//funcao do SCOTT ANDREW if (!elm) { alert("O elemento passado para a funcao addEvent não é um objeto válido."); return false } if (elm.addEventListener) { elm.addEventListener(evType, fn, true); return true; } if (elm.attachEvent) return elm.attachEvent("on"+evType, fn); alert("Handler could not be added"); return false;}function get_src(e) { var el; return ( ( el=e.target || (w.event && event.srcElement) ) && (el.parentNode==3 && el.parentNode || el) ) || 0; }//funcao minha xDfunction mudar(e) { var li = get_src(e); li.innerHTML = 'MUDOU!'}function init() { var a = document.getElementsByTagName("li"), n = a.length, i=0 for (;i<n; i++) addEvent(a[i],"click",mudar);}addEvent(window,"load",init);Aí, todos elementos chamam uma mesma funcao em comum e lah ela identifica qual elemento esta chamando-a. Espero ter passado minha idéia. Seria mto bom se logo visse sites com JS unobtrusive e CSS, com um HTML limpo, q estejam dentro dos web standards e etc. A web será mto melhor. ;)/> []'s! Compartilhar este post Link para o post Compartilhar em outros sites
bush 1 Denunciar post Postado Fevereiro 22, 2007 Bom eu tenho uma duvida meio que boba pois sou noob no assunto.seguinte pra eu pega um pagina de login de outro serve eu tentei com o iframe e não funcionou no FF dai fui no IE a mesma coisa não funcionou.Esse sistema de abas não é tipo o do FF que você pode entra em qualquer pagina msm que prescise de login? e na hora que você sai dela e volta ela ta fazendo refresh isso é assim msm?bom é que eu to criando um sistema pra que acessara paginas em 3 servidores e eu queria um sistema de abas sem refresh que aceite faze login nas paginas .Se alguen puder dar uma força eu agradeço. Compartilhar este post Link para o post Compartilhar em outros sites
Beto Lima 0 Denunciar post Postado Março 24, 2007 como faz para colocar mais páginas?a primeira abre a página 1, o resto só mostra home...quero colocar página 2, 3 etc..outra coisa, em web server local, tipo o wamp, ele funciona legal...agora em servidor remoto pago ele não mostra a página1.php. mostra somente home... Compartilhar este post Link para o post Compartilhar em outros sites
BIJÜ 0 Denunciar post Postado Maio 5, 2007 Olá!...tenho 5 abas na index, todas com botões com 3 estágios: link, hover e active (usando background-position) e todas as abas (e containers) tem cores diferentes, ou seja, nenhuma é igual a outra!...como uso este seu script nesse caso?!? Ex.: <div id="aba-1"> <ul> <li class="li-1"><a href="#"><span class="selected">link-1</span></a></li> <li class="li-2"><a href="#"><span>link-2</span></a></li> </ul></div><div id="aba-2"> <ul> <li class="li-3"><a href="#"><span class="selected">link-3</span></a></li> <li class="li-4"><a href="#"><span>link-4</span></a></li> </ul></div>#aba-1 {width:370px; height:30px;}#aba-1 ul {width:370px; height:30px; list-style:none; display:inline; overflow:hidden;}#aba-1 li {display:inline; list-style-type:none;}#aba-1 span {overflow:hidden; height:0px !important; height /**/:30px; /* for IE5/Win */ cursor:pointer; float:left; padding:30px 0 0 0;}#aba-1 span:hover, #aba-1 span:active {background-position:0 -30px;}#aba-1 span.selected {background-position:0 -60px; cursor:default;}.li-1 span {width:185px; background:url(../images/imagem-1.gif) top left no-repeat;}.li-2 span {width:185px; background:url(../images/imagem-2.gif) top left no-repeat;}#aba-2 {width:370px; height:30px;}#aba-2 ul {width:370px; height:30px; list-style:none; display:inline; overflow:hidden;}#aba-2 li {display:inline; list-style-type:none;}#aba-2 span {overflow:hidden; height:0px !important; height /**/:30px; /* for IE5/Win */ cursor:pointer; float:left; padding:30px 0 0 0;}#aba-2 span:hover, #aba-2 span:active {background-position:0 -30px;}#aba-2 span.selected {background-position:0 -60px; cursor:default;}.li-3 span {width:185px; background:url(../images/imagem-3.gif) top left no-repeat;}.li-4 span {width:185px; background:url(../images/imagem-4.gif) top left no-repeat;} Obrigado!! Compartilhar este post Link para o post Compartilhar em outros sites
zarathsutra web2 0 Denunciar post Postado Maio 8, 2007 EU BAIXEI O EXEMPLO COMPLETO E AQUI NÃO PEGOU FICA SEMPRE NA PAINA HOME POR QUE ?pagina1.phppagina2.phppagina3.phppagina4.phppagina5.phptenho todos o s arquivos,eu uso o debian etch apache 2 php4 mysql 5firefox, opera, ephifania, etc.. não pego em nem um PARABENS MUITO BOM O SCRIPT..apesar de nao funcionar aqui ! Compartilhar este post Link para o post Compartilhar em outros sites
Candoca 0 Denunciar post Postado Maio 23, 2007 nao funcionou no firefox http://forum.imasters.com.br/public/style_emoticons/default/upset.gif/> alguem tem uma dica pra solucionar o problema?? Compartilhar este post Link para o post Compartilhar em outros sites
denis.galvani 0 Denunciar post Postado Julho 31, 2007 Newerton disse: Parabens Fabyo! So uma duvida, vi que tem uma pagina1.php, quando eu crio a pagina2.php com <?php echo "PAGINA2"; ?> Ele me retorna HOME. Pessoal Vi que o script está passando o argumento com o nome na página em maiúsculo, o que faz a página não ser encontrada em uma máquina Linux. Já que o arquivo paginaX.php está em minúsculo. Endereço solicitado pelo script: http://localhost/~denis/ajax/aba3/receber.php?pagina=Pagina3 Então, para contornar esses problemas com a "caixa" dos nomes, sugiro alterarem a linha no recebe.php: // DE: $pagina = $_GET["pagina"];// PARA:$pagina = strtolower($_GET["pagina"]); Outra coisa..., quando uma página não existe, que é o caso do exemplo que só tem a primeira, faltam as páginas: pagina2.php e etc exibe e o lindo erro "There was a problem with the request." Pra mudar isso, fiz o seguinte, quando for erro 404, especificamente, exibe um alert. Confiram como fica o trecho no funcoes.js: function mostrar_pagina(url, div) { var http = XMLHTTPRequest(); if (http) { http.onreadystatechange = function() { if (http.readyState == 4) { if (http.status == 200) { var retorno = unescape(http.responseText.replace(/\+/g," ")); document.getElementById(div).innerHTML = retorno } else if (http.status == 404) { alert('Página não encontrada!') } else { alert('There was a problem with the request.\n'+ 'http.readyState = '+http.readyState+'\n'+ 'http.status = '+http.status); } } } http.open('GET', url, true); http.setRequestHeader('Content-Type', "application/x-www-form-urlencoded; charset=iso-8859-1"); http.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate"); http.setRequestHeader("Cache-Control", "post-check=0, pre-check=0"); http.setRequestHeader("Pragma", "no-cache"); http.send(null); } else { alert('Erro seu navegador nao suporta ajax'); }} Compartilhar este post Link para o post Compartilhar em outros sites
Rodrigo Borges Marquez 0 Denunciar post Postado Julho 31, 2007 Fabyo, você e bom, hem rapaz...Ficou muito bom, e gostaria de saber de você se pode me ajudar.Estou utilizando o q fez, e me deparei com um problema. Estou mexendo vom varios form que geralmentepreciso navegar entre eles gostaria de saberia de não perder as informações qdo estiver navegando entre os form.Tem como fazer isso?Tipo digitar em pagina 1 e pagina 2 sem perder o que foi digitado.Agradeço desde já...Obrigado.Rodrigo Compartilhar este post Link para o post Compartilhar em outros sites
Amaciel 0 Denunciar post Postado Agosto 29, 2007 charlesschaefer disse: Fabyo, eu dei uma lida no seu script, muito bom.... eu vi num outro post que havia uma dúvida sobre como usar as abas com links, e agora, visitando o post do script, vi que tem mais uma pessoa. Se me permite, fiz uma alteração no script. O que eu alterei foi pra pegar o valor do parâmetro p do href do link, que era a dúvida em outro post. Assim, o script pode ser adaptado para, caso o usuário tenha js habilitado, a troca de páginas seja feita por ajax, caso contrário, ele é direcionado para a página que é apontada pelo link, já que o js não vai cancelar a ação do clik. eu tbm adicionei a função cancelClick(), cuja autoria desconheço, mas assim que descobrir, se descobrir, eu envio. É ela que impede que o user seja direcionado para o link antes de conseguirmos terminar nossa ação. segue o código: function iniciar() { var items = [], allItems = document.getElementById("header").getElementsByTagName("li"); for (var i = 0; i < allItems.length; i++) { allItems[i].getElementsByTagName("a")[0].onclick = function(clickEvent) { cancelClick(clickEvent);//evitamos que vá para a página apontada no href ....Bah pessoal, nao consegui fazer funcionar assim, nao rola aqui pra mim. Tem algum mistério ai? Compartilhar este post Link para o post Compartilhar em outros sites
Fabyo 66 Denunciar post Postado Agosto 29, 2007 Recomendo usar EXTjs é muito melhor e mais facil de usar veja exemplo: http://extjs.com/deploy/ext-1.1/examples/tabs/tabs.html http://extjs.com/deploy/ext-1.1/docs/ Compartilhar este post Link para o post Compartilhar em outros sites
Jean Martins 0 Denunciar post Postado Novembro 19, 2007 Olá! Sou novo por aqui e quando vi esse topico me interessei muito, mas estou com uma dificuldade de entender onde insere as informações. Ex: eu clico num determinado link e vejo as informações na pagina. Alguem poderia me explicar? Compartilhar este post Link para o post Compartilhar em outros sites
alvorac 0 Denunciar post Postado Dezembro 16, 2007 Fabyo disse: Ola pessoal, como ja tinha prometido, vou postar um exemplo de navegação por abas, usando ajax a parte mais interessante desse sistema é que todo funcionamento esta no arquivo js, sem escrever nenhuma linha de js no codigo html, apenas fazendo a referencia normal do arquivo js, mas toda ação onclick, onmouseover, onmouseout e o efeito para imitar um link, tudo é feito pelo arquivo js, como voces podem ver o html fica super limpo, e esse arquivo js quem fez ele foi o Illidan ,fera em javascript que manja tudo, eu apenas juntei com meu sistema ajax e montei esse sistema de abas eu vou postar um exemplo simples e depois deixarei em anexo mais 2 modelos de exemplo e todo layout das abas eu tirei desse site http://alistapart.com/articles/slidingdoors/ e um outro detalhe interessante é que eu nao usei links (<a href>) assim nao precisei cancelar o click de navegação causado quando se clica num link, mas criei um efeito que ficou igual ao link quando passa o mouse em cima muda de cor e quando clica muda de pagina, e aparece no nome da pagina no titulo do navegador, minha intenção é ajudar, quem quiser copiar e usar esse codigo fique a vontade, se tem algo a acrescentar sera bem-vindo, bom chega de papo e vamos aos codigosindex.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br"> <head> <title>Sistema em ABA AJAX</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="screen"> @import url("css/aba.css"); </style> <meta http-equiv="generator" content="notepad++" /> <meta http-equiv="author" content="Fabyo" /> <script type="text/javascript" src="js/funcoes.js"></script> </head> <body> <div id="header"> <ul> <li><span class="normal">Pagina1</span></li> <li><span class="normal">Pagina2</span></li> <li><span class="normal">Pagina3</span></li> <li><span class="normal">Pagina4</span></li> <li><span class="normal">Pagina5</span></li> </ul> </div> <div id="conteudo"> </div> </body> </html> funcoes.js criado por Illidan function XMLHTTPRequest() { var http = 0; if (window.XMLHttpRequest) { http = new XMLHttpRequest(); } else { try { http = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { http = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { http = false; } } } return http; } function mostrar_pagina(url, div) { var http = XMLHTTPRequest(); if (http) { http.onreadystatechange = function() { if (http.readyState == 4) { if (http.status == 200) { var retorno = unescape(http.responseText.replace(/\+/g," ")); document.getElementById(div).innerHTML = retorno } else { alert('There was a problem with the request.'); } } } http.open('GET', url, true); http.send(null); } else { alert('Erro seu navegador nao suporta ajax'); } } function addEvent(obj, evType, fn) { if (typeof obj == "string") { if (null == (obj = $(obj))) { throw new Error("Cannot add event listener: HTML Element not found."); } } if (obj.attachEvent) { return obj.attachEvent(("on" + evType), fn); } else if (obj.addEventListener) { return obj.addEventListener(evType, fn, true); } else { throw new Error("Your browser doesn't support event listeners."); } } function iniciar() { var items = [], allItems = document.getElementsByTagName("li"); for (var i = 0; i < allItems.length; i++) { allItems[i].onclick = function() { for (var item = this.parentNode.firstChild; item; item = item.nextSibling) { item.className = 'normal'; } this.className = 'current'; var padrao = /(<span(.*?)>(.*?)<\/span>)/i; var pagina = this.innerHTML.replace(padrao, "$3"); var url = 'receber.php?pagina=' + pagina; mostrar_pagina(url, 'conteudo'); document.title = pagina; } } var aba = document.getElementsByTagName("span"); for (var j = 0; j < aba.length; j++) { aba[j].onmouseover = function() { if(this.className != 'link'){ this.className = 'link'; } } aba[j].onmouseout = function() { if(this.className != 'normal'){ this.className = 'normal'; } } } } // quando terminar o carregamento da página, executa a "iniciarMudancaDeEnterPorTab" addEvent(window, "load", iniciar); obs: esse sistema foi testado nos navegadores: IE, FF e Opera e funcionou perfeitamente em todos outra coisa se a pagina nao existir ele mostrara uma pagina padrao no caso a home.php todo o resto do sistema, imagens e css estao em anexo exemplos das abas: aba1 = aba2 = aba3 = anexos: aba.zip aba2.zip aba3.zip não consigo baixar os fontes, alguem que os tenha poderia me enviar por mail??? alvorac@gmail.com. grato Compartilhar este post Link para o post Compartilhar em outros sites
Flavio Vasconcelos 0 Denunciar post Postado Agosto 20, 2008 Olá pessoal, estou com um probleminha aqui... Estou com um formulário de cadastro que é bem extenso e quero dividir nas abas... como faço para cadastrar tudo de uma vez, visto que quando vou passando de aba o conteúdo digitado é perdido??? Desde já agradeço! Compartilhar este post Link para o post Compartilhar em outros sites
tety 0 Denunciar post Postado Abril 20, 2010 Olá pessoal, não sei se posso postar aqui dado que o tópico é antigo, desculpem se não puder... Fabyo, qria saber como faço um formulario de contato dentro de uma das abas, tentei várias coisas e não consegui enviar o email, será que pode me ajudar? Obrigada Compartilhar este post Link para o post Compartilhar em outros sites