[Resolvido] Atualização via AJAX

gapaiva44 · Dezembro 31, 2008

E ai pessoal blza.

To com uma duvida aqui e gostaria que vcs me ajudassem, eu estou carregando as minhas paginas via AJAX com o seguinte codigo

MENU

INCLUDE.php

<?

$pagina =$_GET['variavel'];

if(file_exists($pagina.'.php'))

{

include($pagina.'.php');

}

else {

include("principal.php");

}

?>

AJAX.JS

/*INICIANDO O AJAX*/

function openAjax() {

var ajax;

try {

ajax = new XMLHttpRequest();

} catch(ee) {

try {

ajax = new ActiveXObject("Msxml2.XMLHTTP");

} catch(e) {

try {

ajax = new ActiveXObject("Microsoft.XMLHTTP");

} catch(E) {

ajax = false;

}

return ajax;

}

// Chama a função loadFunctions ao carregar a página

window.onload = loadFunctions;

// Função que chama outras funções

function loadFunctions() {

focusNome();

}

// Utilizado para evitar de digitar: document.getElementById toda hora, tornando o processo mais prático

function gE(ID) {

return document.getElementById(ID);

}

// Utilizado para evitar de digitar: document.getElementsByTagName toda hora, tornando o processo mais prático

function gEs(tag) {

return document.getElementsByTagName(tag);

}

// Esta função seta o focus ao campo nome do formulário

function focusNome() {

// Se hão houver o campo nome aborta a função

if (!gE('nome')) return false;

// Concede o focus ao campo nome do cadastro

gE('nome').focus();

}

// Utilizado para criar o fundo sobre a página (wiewport), body.

function exibirBgBody() {

// Seleciona a tag body. item(0) por que só existe uma tag body

var tagBody = gEs('body').item(0);

// Pega os tamanhos atuais da página, como largura, altura, ...

var sizesPage = getPageSize();

// Vamos criar uma tag div

var bgBody = document.createElement('div');

// Setar o atributo ID a div criada

bgBody.setAttribute('id','bgBody');

// Essa div terá o tamanho exato da página

bgBody.style.height = arrayPageSize[1] + 'px';

// Essa div terá a largura exata da página

bgBody.style.width = arrayPageSize[0] + 'px';

// Evita criar a div novamente

if (!gE('bgBody')) {

tagBody.insertBefore(bgBody, tagBody.firstChild);

}

function exibirBgBodyy() {

// Seleciona a tag body. item(0) por que só existe uma tag body

var tagBody = gEs('body').item(0);

// Pega os tamanhos atuais da página, como largura, altura, ...

var sizesPage = getPageSize();

// Vamos criar uma tag div

var bgBody = document.createElement('div');

// Setar o atributo ID a div criada

bgBody.setAttribute('id','bgBodyy');

// Essa div terá o tamanho exato da página

bgBody.style.height = arrayPageSize[1] + 'px';

// Essa div terá a largura exata da página

bgBody.style.width = arrayPageSize[0] + 'px';

// Evita criar a div novamente

if (!gE('bgBodyy')) {

tagBody.insertBefore(bgBody, tagBody.firstChild);

}

// Cria a div denominada como boxCad, a qual conterá o formulário de cadastro

function boxCad() {

// Cria um 'container' que comportará o formulário de cadastro.

var objBody = gEs('body').item(0);

var sizesPage = getPageSize();

var boxCad = document.createElement('div');

boxCad.setAttribute('id','boxCad');

var wPage = arrayPageSize[0]; // Largura total da página

var hPage = arrayPageSize[1]; // tamanho total da página

/*boxCad.style.width = (wPage / 2) + 'px'; // metade da largura da página*/

boxCad.style.height = (wPage / 2) + 'px'; // metada da altura da página

boxCad.style.marginTop = -(wPage / 4) + 'px'; // 1 quarto da largura

//boxCad.style.marginLeft = -(wPage / 4) + 'px'; // 1 quarto da altura

objBody.insertBefore(boxCad, objBody.lastChild);

}

// Utilizado para criar o efeito de loading

function loading(opt) {

if (opt == true) {

// A tag que receberá a img de loading

var refer = gE('bgBodyy');

// O tamanho da referida tag

var referHeight = refer.offsetHeight;

// Dizemos que os elementos dentro dela será alinhado ao centro

refer.style.textAlign = 'center';

// Criamos uma imagem, img.

var img = document.createElement('img');

// Informamos o caminho da img

img.setAttribute('src','images/loading.gif');

// Setamos um atributo ID na img criada

img.setAttribute('id','loading');

// Definimos seu tamanho

img.setAttribute('width','220');

// Dizemos que o margin-top será a metada do tamanho da div

img.style.marginTop = (referHeight /2) + 'px';

// Evita que seja criada duas ou mais img de loading

if (!document.getElementById('loading')) {

// Insere a img na tag informada na variável refer

refer.insertBefore(img, refer.firstChild);

}

} else if (opt == false) {

// Referenciamos a img de login através de seu ID

var imgLoading = gE('loading');

// Removemos a img de loading

if (imgLoading) {

imgLoading.parentNode.removeChild(imgLoading);

}

//iniciando a função de carregamento das páginas

function incluir(url) {

// Inicia o Ajax, através da variável Ajax

var ajax = openAjax();

//div que recebe o cinteudo

var recipiente = gE('conteudo');

//chamando a pagina

ajax.open('GET', 'include.php?variavel=' + url);

//chamando o loading

ajax.onreadystatechange = function() {

if (ajax.readyState == 1) {

// Cria o efeito de loading

exibirBgBodyy();

loading(true);

} // if->readyState->1

if (ajax.readyState == 4) {

if (ajax.status == 200) {

// Remove o efeito de loading

loading(false);

// Pega o conteúdo - HTML - da página requisitada: formulario.php?ajax=true e coloca dentra da div definida na variável recipiente

recipiente.innerHTML = ajax.responseText;

//remove as div

removerDivs();

} // if-status->200

} // if->readyState->4

} // ajax->onreadystatechange

// Envia a requisição

ajax.send(null);

// Evita o reload da página

return false;

/*fim da função*/}

function atualizaIndex() {

var ajax = openAjax();

ajax.open('GET', 'relatorio.php?ajax=true', true);

ajax.onreadystatechange = function() {

var conteudo = gE('conteudo');

if (ajax.readyState == 1) {

loading(true);

}

if (ajax.readyState == 4) {

if (ajax.status == 200) {

loading(false);

removerDivs();

conteudo.innerHTML = ajax.responseText;

ativarBtnEditarBtnExcluir();

}

ajax.send(null);

}

function removerDivs() {

var bgBody = gE('bgBody');

var bgBody = gE('bgBodyy');

var boxCad = gE('boxCad');

bgBody.parentNode.removeChild(bgBody);

if (boxCad) { // Por que ao clicar X (para deletar um registro) cria-se somente o encobridor e não o boxCad

boxCad.parentNode.removeChild(boxCad);

}

/* Funções de terceiros */

// getPageSize()

// Returns array with page width, height and window width, height

// Core code from - quirksmode.org

// Edit for Firefox by pHaez

//

function getPageSize(){

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {

xScroll = document.body.scrollWidth;

yScroll = window.innerHeight + window.scrollMaxY;

} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac

xScroll = document.body.scrollWidth;

yScroll = document.body.scrollHeight;

} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari

xScroll = document.body.offsetWidth;

yScroll = document.body.offsetHeight;

}

var windowWidth, windowHeight;

if (self.innerHeight) { // all except Explorer

windowWidth = self.innerWidth;

windowHeight = self.innerHeight;

} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode

windowWidth = document.documentElement.clientWidth;

windowHeight = document.documentElement.clientHeight;

} else if (document.body) { // other Explorers

windowWidth = document.body.clientWidth;

windowHeight = document.body.clientHeight;

}

// for small pages with total height less then height of the viewport

if(yScroll < windowHeight){

pageHeight = windowHeight;

} else {

pageHeight = yScroll;

}

// for small pages with total width less then width of the viewport

if(xScroll < windowWidth){

pageWidth = windowWidth;

} else {

pageWidth = xScroll;

}

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)

}

Esta tudo funcionando corretamente mais eu gostaria que o sistema tivesse um detalhe importante, quando o visitante estiver visitando a pagina HOME.PHP (Principal), fosse incluido em as divs Topo e Navegação uma nova div ficando mais ou mesmo assim:

<div id='principal_topo'></div> => Nova DIV

</div>

E quando o mesmo estiver nas demais paginas esta div esteja desabilitada ex:

</div>

Otata · Dezembro 31, 2008

eae,fiz um exemplo de como de adiciona um elemento antes do outro, ai acho que jah da para você conseguir fazer o que quer...

<script>


//<div id='principal_topo'></div> => Nova DIV

function teste(){
	
	var nDiv = document.createElement("div");
	nDiv.setAttribute("id","principa_topo");
	nDiv.innerHTML = "aa";
	
	var divNavegacao = document.getElementById("navegacao");
	document.getElementById("base").insertBefore(nDiv,divNavegacao);
	
}


</script>
<div id="base">
	<div id='topo'></div>
	<div id="navegacao"></div>
</div>
<input type="button" value="inserirDiv" onclick="teste()"/>

basicamente é isso, ai você deve colocar um condiçãopara saber quando eh a home.php e fazer isso

qualquer coisa posta ai

t+

gapaiva44 · Janeiro 2, 2009

eae,fiz um exemplo de como de adiciona um elemento antes do outro, ai acho que jah da para você conseguir fazer o que quer...
<script>


//<div id='principal_topo'></div> => Nova DIV

function teste(){
	
	var nDiv = document.createElement("div");
	nDiv.setAttribute("id","principa_topo");
	nDiv.innerHTML = "aa";
	
	var divNavegacao = document.getElementById("navegacao");
	document.getElementById("base").insertBefore(nDiv,divNavegacao);
	
}


</script>
<div id="base">
	<div id='topo'></div>
	<div id="navegacao"></div>
</div>
<input type="button" value="inserirDiv" onclick="teste()"/>
basicamente é isso, ai você deve colocar um condiçãopara saber quando eh a home.php e fazer isso

qualquer coisa posta ai

t+

Caro otata,

A sua função funcionou com perfeição, muito obrigado mesmo.

Agora estou usando ela de 2 formas no onload da pagina:

// Chama a função loadFunctions ao carregar a página

window.onload = loadFunctions;

// Função que chama outras funções

function loadFunctions() {

focusNome();

carregaDiv();=> alteri o nome da função

}

e no link home da forma que você postou, agora so mais uma coisa eu gostaria de saber se você me ajuda em uma função para deletar esta DIV pq ele vais er usada somente na pagina home eu estou usando esta mais não esta dando certo:

function removerDivs() {

var bgBody = gE('bgBody');

var bgBody = gE('bgBodyy');

var boxCad = gE('boxCad');

bgBody.parentNode.removeChild(bgBody);

if (boxCad) { // Por que ao clicar X (para deletar um registro) cria-se somente o encobridor e não o boxCad

boxCad.parentNode.removeChild(boxCad);

}

e que esta função eu uso para remover aquelas divs que crianmos por cima de todo o browser.

gapaiva44 · Janeiro 2, 2009

eae,fiz um exemplo de como de adiciona um elemento antes do outro, ai acho que jah da para você conseguir fazer o que quer...
<script>


//<div id='principal_topo'></div> => Nova DIV

function teste(){
	
	var nDiv = document.createElement("div");
	nDiv.setAttribute("id","principa_topo");
	nDiv.innerHTML = "aa";
	
	var divNavegacao = document.getElementById("navegacao");
	document.getElementById("base").insertBefore(nDiv,divNavegacao);
	
}


</script>
<div id="base">
	<div id='topo'></div>
	<div id="navegacao"></div>
</div>
<input type="button" value="inserirDiv" onclick="teste()"/>
basicamente é isso, ai você deve colocar um condiçãopara saber quando eh a home.php e fazer isso

qualquer coisa posta ai

t+

Otata, como postei agora a pouco eu coloquei sua função dentro do onload da pagina, assim eu crio a DIV:

// Chama a função loadFunctions ao carregar a página

window.onload = loadFunctions;

// Função que chama outras funções

function loadFunctions() {

focusNome();

carregaDiv();=> Mudei o nome da função

}

Ai minha duvida era como sumir com esta div quando o visitante estiver fora da pagina home?

Resolvi aqui com a ajuda do css, como ja criei a DIV usando sua função , então tirei ela do menu para não ser criada novamente, fiz uma função que muda a classe da div segue exemplo

css

.topoPrincipalOn{display:block;}

.topoPrincipalOff{display:none;}

menu

<a class="dock-item" href="#" onclick="incluir('contato'); changeClass('topoPrincipalOff')"><img src="images/servicos.png"/><span>Serviços</span></a>

Função

/*função que carreda o bloco*/

function changeClass(nomeClasse) {

var obj = document.getElementById("principal_topo");

obj.className = nomeClasse;

}

Esta ai a solução por mim encontrado, muito obrigado pela sua ajuda pq ela foi fundamental para o meu projeto, valeu mesmo ate a proxima.

Entrar

Arquivado

[Resolvido] Atualização via AJAX

Recommended Posts

gapaiva44 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Otata 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

gapaiva44 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gapaiva44 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante