sexta-feira, 28 de setembro de 2007

Abrir paginas com Ajax

Navegação em uma pagina JSF, onde um componente ira receber dentro dele a pagina de se deseja abrir:


<af:commandLink actionListener="#{backing.funcao}"
styleClass="textoSubMenu"
id="LinkTeste"
partialSubmit="true"
onclick= "javascript:setaValor('../site/paginaTeste.jspx',
'descricao');">
<h:outputText value="#{msg.subMenuControladoria}"/>
</af:commandLink>


Nesse link(Componente do ADF), foi utilizado um actionListener para realizar umas funções na pagina, e a propriedade partialSubmit="true" , para evitar que toda a pagina fosse atualizada ao clicar (O funcionamento disso esta em um outro post).

Quando a ação de clique é disparada, então o javascript a seguir entra em ação para buscar a nova pagina e carrega-la dentro de um componente já definido.


function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest(); //Not IE
} else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP"); //IE
} else {
alert("Seu navegador não suporta essa navegação. Por favor Atualize!");
}
}
var receiveReq = getXmlHttpRequestObject();
var idcomp;
//Initiate the asyncronous request.

function setaValor(pagina , id ) {
//Deixa visivel a imagem e esconde o componente até ser carregado
document.getElementById(id).style.visibility = "hidden";
document.getElementById("loading").style.visibility = "visible";
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
receiveReq.open("GET", pagina, true);
idcomp = id;
receiveReq.onreadystatechange = setar;
receiveReq.send(null);
}
}

function setar() {
if (receiveReq.readyState == 4) {
//esconde a imagem
document.getElementById("loading").style.visibility = "hidden";
//Joga a pagina requisitada para dentro do componente
document.getElementById(idcomp).innerHTML =
receiveReq.responseText;
//Deixa visivel o componente carregado
document.getElementById(idcomp).style.visibility = "visible";
}
}


Esse javascript ainda altera a propriedade visibility de um componente de id = loading:


<h:graphicImage url="/Imagens/loading.gif" id="loading" styleClass="figLoading"/>


Esse componente é apenas uma imagem do tipo gif, que usei para dar uma resposta ao usuário enquanto a pagina é carregada.(implementação bem simples).

Depois de carregado e mostrado pelo JavaScript, este é o componente que recebe a pagina que foi carregada:


<h:form styleClass="formDescSMenu" id="descricao"></h:form>

2 comentários:

Anônimo disse...

Hello. This post is likeable, and your blog is very interesting, congratulations :-). I will add in my blogroll =). If possible gives a last there on my blog, it is about the OLED, I hope you enjoy. The address is http://oled-brasil.blogspot.com. A hug.

ed disse...

aaaahhh dude.. os fins justificam os meios....