Sistema de Abas com AJAX

[mestre fyoda 1]

There was a problem with the request

 

esse problema escrito acima so aparece quando eu dexo na minha maquina , quando eu coloco na pasta do meu servidor ai funfa legal , pq ?

 

uma duvida , como eu faria que abra uma pagina chamada teste e que fique assim :

<li><span class="normal">Meu Carrinho</span></li>

[newboxters 0]

Olá, estou começando a me "interar" no ajax e por isso estou buscando umas fontes, tutoriais, etc.

 

Só uma coisa que eu fui acessar, mas não deu certo, foi neste post: http://forum.imasters.com.br/index.php?showtopic=148569

o link para demonstração funcionou, mas para baixar o sisteminha deu erro, então queria apenas saber que trecho no javascript foi feito para ao alternar entre as abas, apareça a mensagem "carregando".

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif/>

[Sadjow 1]

simplismente show.

[diogombb 0]

Oi Fabyo, muito boa suas "abas".A minha pergunta seria:---Não tem como deixar o nome da ABA diferente da página que quero abrir????EXEMPLO:nome na aba: Matériasnome da página a abrir: ultimas_materias.phpTem como??Abraços

[Fabyo 66]

sim, de varios modos um exemplo é usar href, se viu que eu nao usei

 

outro jeito é na pagina receber.php você usar um switch e incluir as paginas

[diogombb 0]

Ai como seria com HREF?

 

flw

 

 

PS.: a minha pergunta é a mesma que o newboxters .. hehehe

[charlesschaefer 1]

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						for (var e = 0; e < allItems.length; e++) {						allItems[e].className = 'normal';				}				var link = this.getAttribute("href");			var args = link.split("?")[1].split("&");//pega os parametros da url			var pagina = null;			for(var n = 0; n < args.length; n++){				args[n].match(/^(P|p)=.*/) ? pagina = args[n].split("=")[1] : "";				if(pagina != null)					break;			}						this.parentNode.className = 'current';			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';					}			}	}}function cancelClick(e){	if (window.event){		try{			window.event.cancelBubble = true;			window.event.returnValue = false;			return;		}catch(a){			return false;		}	}	if (e){		try{			e.stopPropagation();			e.preventDefault();		}catch(a){			return false;		}	}}

então é isso,

 

diogombb, acho que isso resolve sua dúvida, ou pelo menos ja dá uma idéia....

 

fabyo, desculpa pela invasão ...

 

t+

[danilow 0]

O Que é o javascript não obstrutivo?gostaria de saber, pois, creio eu, que é o javascript que funciona com o javascript do navegador habilitado ou não. Alguém poderia me confirmar essa informação, ou me corrigir?Obrigado, Danilo

[Fabyo 66]

charlesschaefer valeu

 

danilow

 

javascript nao obstruviso é usar o javascript num site sem mecher no codigo html ou seja nao escreve nada de javascript no codigo html

 

exemplo nao coloca onclick, onblur etc..., dai o site funciona normal mas nao escreve em nenhuma tag html

[danilow 0]

ah sim...

seria utilizar o javascript em um arquivo externo?

e não usar ele inline?

 

No próprio curso de AJAX do imasters tem essa definição:

 

 

JavaScript não-obstrutivo, ou seja, se o cliente desabilitar o funcionamento dessa linguagem ou se ele não tiver suporte a ela, ele utilizará nosso sistema normalmente, mas sem os recursos desenvolvidos com a referida linguagem.

[Fabyo 66]

nao exatamente, é usar as funções do javascript sem escrevelas nas tags

 

exemplo você ja deve ter usado onsubmit="" onclick="", dai nao se usa mais essas funções no codigo html

[diogombb 0]

Bem...isso que é código limpo ein!Mas aquele JS que charlesschaefer fez queria como ficaria no HTML em HREF.se não for pedir demais!Abraços!

[danilow 0]

hum..então entendi!

[charlesschaefer 1]

Danilow, antigamente, quando queríamos que algo acontecesse com um link na hora que a pessoa clicasse, escrevíamos assim:

<a href="java script:;" onclick="alert('Você clicou')">	Clique aqui</a>

Isso é ruim, pois imagina um site com uns 200 links, e ai você vai e muda o nome da função que esses links vão chamar......Pra corrigir seria horrível....

Com javascript não-obstrusivo, teríamos assim:

html

<a href="java script:;" id="clica_alerta">	Clique aqui</a>

java script:

window.onload = function(){ 	document.getElementById("clica_alerta").onclick = function(){ alert("você clicou"); }}

O que fizemos? Temos um código que espera até que todo o site tenha carregado para então colocar naquele link a função que vai fazer abrir o alert escrito "você clicou".

Note que para um link apenas chega a ser até mais difícil do que se fosse direto no html, mas imagine em um site com os tais 200 links que eu tinha te falado.....

 

diogombb, seria algo assim o html:

<ul>	<li><a href="index.php?p=principal">Principal</a></li>	....</ul>

Note que dessa forma, caso o usuário tenha js habilitado, ele vai usar ajax, que manda o parâmetro pagina como "principal" para a pagina receber.php. Se ele não tiver js habilitado, ele vai para a página index.php?p=principal, que vai abrir a mesma página pra ele, mas dessa vez dando refresh na página...

 

t+

[danilow 0]

<a href="java script:;" id="clica_alerta">só mais uma dúvida...esse id1, poderia ser utilizado num estilo css?#clica_alertaou apenas para o javascript (nesse caso) ?

[charlesschaefer 1]

pode usar no css tbm...flw

[Hanover 0]

Olá pessoal.Antes de mais nada...Fabyo, parabens pelo script.Muito bom!Funcionou perfeitamente.Mas acontece que devido a necessidade da minha aplicação surgiu uma duvida.Estou carregando o fckeditor via seu script.Acontece que ele so o carrega uma unica vez!Se eu carrego uma aba qualquer e depois clico na aba que contem o fckeditor, o ajax carrega apenas o html da aba e deixa o conteudo do fck de fora.Mas a aba do fckeditor chega a funcionar apenas quando ela é a primeira aba a ser carregada pelo ajax.Eu vi um outro post explicando como carregar javascript via ajax.Mas se esse script do fabyo ta conseguindo carregar ao menos uma vez o fckeditor, é porque o javascript também ta sendo carregado!Acredito que seja alguma bobagem, mas não to conseguindo identifica-la.Se alguém poder me dar uma luz eu fico grato!

[Márcio T. 0]

 

Fabyo, muito show esse código http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif/> Gostaria de saber se tem como utiliza-lo em uma lista proveniente de um Banco de Dados.Ex.:

<tr>	<td>22/01</td>	<td><a href="noticia.php?id='$id'">Notícia</a></td>	<td>São Paulo</td>	<td>SP</td>  </tr>

Aguardo resposta.

[Fabyo 66]

tem sim do mesmo jeito que voce faria sem ajax, na pagina de noticias voce pega a noticia pelo id

[Márcio T. 0]

tem sim do mesmo jeito que voce faria sem ajax, na pagina de noticias voce pega a noticia pelo id

Não entendi :huh:/> Você pode me mostrar como se faz?Ficarei muito grato.