var originalHeader;
var originalDetail;
function checkChange()
{
var currentHeader = getInnerHTML(‘header’);
var currentDetail = getInnerHTML(‘detail’);
if (currentHeader != originalHeader) alert(‘headerChange’);
if (currentDetail != originalDetail) alert(‘detailChange’);
}

function BodyLoad()
{
originalHeader = getInnerHTML(‘header’);
originalDetail = getInnerHTML(‘detail’);
}

function getInnerHTML(id)
{
var obj=document.getElementById(id);
if(obj!=null)
return obj.innerHTML;
else
return “”;
}

Internet Explorer’s DOM has a few issues regarding whitespace. Whitespace symbols in HTML 4.01 are any of the following symbols:

• ASCII space ( )
• ASCII tab (	)
• ASCII form feed ()
• Zero-width space (​)

Refer to w3’s specifications here.

Querying InnerHTML and outerHTML

Now IE’s innerHTML and outerHTML adds all sorts of whitespaces when querying these properties. For example:

    var container = document.createElement("div");
    container.innerHTML = "<div><ul><li>I <em>like</em> sushi!</li></ul></div>"
    alert(container.innerHTML);

Prints:

<DIV>[][]<UL>[][]<LI>I <EM>like</EM> sushi!</LI></UL></DIV>

Where the “[]” symbols denote whitespace symbols. In this example the added whitespaces causes the alert to break them (probably a newline and carriage return) thus physically displaying:

<DIV>
<UL>
<LI>I <EM>like</EM> sushi!</LI></UL></DIV>

Maybe the implementor was trying to be helpful by adding these mysterious newline symbols before every block-level element for automatic readability. What a damn fool.

Is there a fix? Well, if you really need innerHTML to be precise you could walk the DOM tree yourself and spit out the markup as you traverse. You could bite the bullet can parse the string using regular expressions – and for every opening block-level element tag check for preceding whitespace symbols and eat them.

Creating DOM trees via innerHTML

When creating DOM trees via innerHTML, IE does not always create a DOM tree to reflect the exact HTML contents you pass it. This is because IE automatically collapses whitespace (normalization on the fly). For example:

    var container = document.createElement("div");
    container.innerHTML = "\n Apples \n"
    alert(container.firstChild.nodeValue.length);

All browsers except for IE print “10″, IE collapses the surrounding whitespace and prints “7″.

To over come this: don’t use innerHTML – if you need the DOM tree to be precise, manually create the DOM structures yourself. I tried using “pre” white-space styles but it still normalized. You could use a pre element but if you HTML contains block-level elements the markup will be invalid (pre only allows a select few of inline-level elements).

Note: you may find this useful: JS2HTML

See this bug report at quirksmode for more details.

Hope this article relieves some of your IE headaches… it probably just aggravated you.

You people might be wondering how you could change the contents of an HTML element? like to replace the innerhtml with the one selected from the select box. Its very easy, you’ll be able to change your text and HTML as much as you like with the help of JavaScript innerHTML.

Many HTML elements rather you can say each HTML element have an innerHTML property, and this property allows you to access the text related to an element and modify it.

However, using innerHTML requires some preparation if you want to be able to use it easily and reliably. First, you must give the element you wish to change an id thats very important. With that id in place you will be able to use the getElementById function, which works on all browsers.

For Eample:
here is the JavaScript Code:

<script type=”text/javascript”>
function changeText(){
document.getElementById(‘chngTxt’).innerHTML = ‘the world of Mywebdunia’;
}
</script>
<p>Welcome to <b id=’chngTxt’>mysite</b> </p>
<input type=’button’ onclick=’changeText()’ value=’Change Text’/>

thats it very simple, try it out yourself.

Here an easy way to search and replace each occurrence a group of characters (in this case underscore and minus) with another (in this case a space) on a specified element (in this case each A), using Jquery javascript library.

$("a").each(function() {
   $(this).html($(this).html().replace(/[_-]/g," "));
});

The first argument passed on replace is a regex, if you just pass a single character (like “_” or “-”) only first occurrence for each element.

Real world usage: I use this onto a long page, where a table has long filenames with underscore and minus in place of spaces. This trick allows in my case to show tables nicely, without caring on a mass substitution via server side scripting.

See also:

• Regex in Javascript – an useful guide
• Jquery each – to match all specified elements
• Jquery html() – read and write html content (innerHTML) of an element

Outro dia eu estava tentando criar um elemento numa página que com um click ele disponibilizasse num elemento html logo abaixo os dados coletados de uma consulta SQL. Só que mais uma vez lá vem o IE estragar tudo com o padrão deles que eu não sei porquê eles acham que é o correto e o resto do mundo é errado.

O IE não deixa você disponibilizar um innerHTML em um elemento já criado dentro da HTML, por alguma razão eu não estava conseguindo. Até que pesquisando através do nosso amigo google eu encontrei uma solução em um blog que infelizmente não to lembrando aqui pra referênciar mas o importante é dizer que a idéia é boa e não é minha. Eis o código:

   1:  function updatePage(){

   2:     ...

   3:      if(request.readyState == 4){

   4:          clearText(resultEl);

   5:          if(request.status == 200){

   6:              //var txtEl = request.responseText;

   7:              var auxdiv = document.createElement("div");

   8:              auxdiv.innerHTML = request.responseText;

   9:              resultEl.appendChild(auxdiv);

  10:          }

  11:      }

  12:  }

Ou seja, para resolver o problema no IE e fazer com que o código funcione nos outros browsers (Firefox e Chrome testados). A solução simples foi criar um elemeno div auxiliar e colocar o innerHTM contendo a resposta do servidor dentro dele. O resultado para o meu código pode ser visto nesse link na parte Atos e Decretos. Qualquer sugestão ou crítica ou pergunta, comentários abertos! Abraços.

Ajax (aquela maneira genial de atualizar conteúdo em uma página) tem sido a sensação nos últimos anos de desenvolvimento WEB. Lembro das minhas primeiras investidas na área em 2005, naquela época ainda um terreno desconhecido (pra mim) e bastante pedregoso. Anos mais tarde temos diversas ferramentas prontas e gratuitas para desenvolver tarefas em Ajax.
Mas nem só para atualizar conteúdo na página serve o famigerado recurso, pois Ajax é como um portal na quarta dimensão que pode ser aberto no browser e que permite tráfego de dados nas duas direções [servidor > cliente] e [cliente > servidor]. No presente artigo vamos tratar do último caso: “como enviar dados de um formulário para o servidor sem recarregar a página toda após o envio?”

Nas minhas primeiras empreitadas nesta área vi que o terreno era árduo e acabei desistindo, mas a biblioteca dojo oferece uma solução com estilo.

Se vc ainda não conhece a biblioteca Javascript Dojo, recomendo uma olhada no artigo “Como funciona a biblioteca Javascript Dojo”, será de grande valia

Um pouco de Teoria

Vejamos o que ocorre em uma situação de envio tradicional. Na figura 1, podemos identificar 2 arquivos principais, o da página index, ao qual foi incluso um formulário, e o arquivo que recebe os dados. Nestas circunstâncias o envio dos dados é definido simplesmente pelo atributo “action” da tag <form> e o método de envio (geralmente ”post”) é definido no atributo “method” da mesma tag. A tarefa é acionada quando o usuário clicar no botão definido pela tag <submit>.

No protocolo HTTP, o browser envia alguma informação ao servidor, e este precisa retornar uma resposta ao browser.

No momento do envio, a página toda sai de cena, e o browser envia uma requisição via HTTP ao servidor, para que o arquivo recebe_dados.php entre em ação.

Figura 1 - Envio de dados via post pelo método tradicional

Este arquivo efetua as tarefas subseqüentes como gravar as informações no Banco de Dados, e após envia um cabeçalho (header) ao browser, com uma diretiva para que o browser peça ao servidor novamente o carregamento de index.php. A URL desta diretiva pode conter uma variável com a resposta dizendo “Ok tudo ocorreu bem!”, ou “Heitaaa, deu problema!”.

Ex do código:

<?
//tarefas
…
//retorno
header(“location:index.php?resposta=”.$resposta);
?>

Bom, este é o cenário tradicional que todo WEB designer com experiência de formulários conhece.

A proposta deste post (aqui post significa artigo do blog hahaha), como dito anteriormente, é utilizar Ajax para que a página não saia de cena enquanto os dados são enviados para recebe_dados.php.

Tenha em mente que Ajax é um método de transferência de dados todo manipulado via Javascript.

A figura 2 ilustra o esquema que vamos utilizar com a API do Dojo, o xhrPost.

Figura 2 - Envio de dados com dojo xhrPost

Nesta figura procurei deixar claro que os dados contidos no Formulário agora pegam outro trajeto. Veja que agora, o xhrPost, dentro da própria página index.php é quem captura os dados contidos no formulário, e os envia para recebe_dados.php. Ele é uma espécie de agente atravessador que negocia a transferência dos dados, digamos… por debaixo dos panos, e ninguém vê que algo está indo para o servidor, pois index.php não sai de cena.

Assim, se faz necessário também uma modificação na forma do envio da resposta que recebe_dados.php deseja devolver a index.php. Veja que quem está em contado com o servidor neste momento não é o browser todo, mas apenas o objeto xhrPost, ele mesmo fica aguardando a resposta, a qual pode ser um outro HTML, ou um TEXTO qualquer. Mas não desejamos um simples texto, porém uma variável contendo um texto de resposta. Quando vc quer codificar variáveis com valores em um meio textual, geralmente se utiliza XML, JSON, CSV ou coisa parecida. Neste caso, o dojo oferece uma ferramenta simples para codificar as variáveis em JSON.

Quando o xhrPost recebe a resposta, ele a pode entregar para funções Javascript específicas que vão decodificar o resultado em JSON e por fim apresentar a mensagem na tela do usuário.

Enfim este é o efeito que desejamos. Vamos ás instruções?

Material necessário:

Básico:

1. Arquivo HTML com formulário básico ( index.php )
2. Arquivo para receber os dados e devolver uma resposta (recebe_dados.php)
3. Biblioteca Javascript Dojo (veja como instalar aqui mesmo no Ahã… Programando…:  instalacao-da-biblioteca-dojo)

Ferramentas pertencentes ao dojo:

1. dijit.dijit (layouts dojo)

2. dijit.form.Button (widget button)

3. dojo.parser (farejador que procura widgets no meio do HTML para ativar)

4. xhrPost (Api dojo para envio de dados via Ajax pelo método Post)

5. tundra.css (folha padrão da biblioteca dojo)

6. classe de conversão Json PHP (já vem de brinde com o Dojo)

7. alguns scripts adicionais pra organizar as coisas

Mãos á obra:

Nosso maior trabalho será com o arquivo index.php no qual precisamos adicionar as devidas funcionalidades do dojo.

Abaixo o código de index.php, desculpem a endentação que não é das melhores, por que foi adequada à largura disponível de área para textos do blog.

<?php
//charset
header(“Content-Type: text/html; charset=ISO-8859-1″,true);

//modifique aqui o caminho da url do dojo
//em seu servidor
$DOJO_URL=“http://localhost/dojo-release-1.3.0-src/”;

?>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
_<title>TESTE xhrPost</title>
_<link
__id=“themeStyles”
__rel=“stylesheet”
__href=“<?=$DOJO_URL;?>dijit/themes/tundra/tundra.css”>
_<script type=“text/javascript”
_________src=“<?=$DOJO_URL; ?>dojo/dojo.js”
_________djConfig=“isDebug:false, parseOnLoad: true”
_________charset=“utf-8″></script>
_<script type=“text/javascript” charset=“utf-8″>

__//carrega layer dijit para interfaces
__dojo.require(“dijit.dijit”);

__//botao do dojo p engatilhar o xhrPost
__dojo.require(“dijit.form.Button”);

__//varre o HTML em busca de widgets dojo__
__dojo.require(“dojo.parser”);

__//função [sendForm] para estabelecer o envio
__//dos dados via xhrPost. Esta função é executada
__//uma única vez quando a página é carregada, para
__//que seja estabelecida a comunicação entre o
__//FORM e o xhrPost, bem como colocar o gatilho
__//do xhrPost no botão “botao_submit_dojo” que é um
__//widget Dojo. Não funfa com botões tradicionais.

__function sendForm() {
___var button = dijit.byId(“botao_submit_dojo”);
___dojo.connect(
____button,
____“onClick”,
____function(event){
_____//para (stop) o evento submit original
_____event.preventDefault();
_____event.stopPropagation();
_____var deferred = dojo.xhrPost({
______//”form_teste” – id do formulário HTML
______//por este id o dojo localiza o FORM
______form: dojo.byId(“form_teste”),
______handleAs: “text”,
______load:resJsonOk,
______error:resJsonError
_____});//xhrPost
____});//function(event)
__}//function sendForm()

__//mensagem erro de comunicação com o servidor
__function resJsonError(data,ioArgs){
___var msg = ‘Nenhuma resposta do servidor.’;
___if(data)
____msg += ‘Ocorreram os seguintes erros em ‘;
____msg += ‘<b>recebe_dados.php:</b><br> ‘ + data;
___dojo.byId(“ct_msgs”).innerHTML = msg;

__}//function resJsonError(…)
__//recepção da MSG de retorno OK, recebe o conteúdo
__//JSON devolvido do recebe_dados.php, e extrai as
__//variáveis (status e msg) com seus respectivos valores

__function resJsonOk(data,ioArgs) {
___if(data){
____var d = dojo.fromJson(data),
____conteudo_msg = “STATUS: ["+d.status+"] <br>”;
____conteudo_msg += d.msg + “<br>”;
____dojo.byId(“ct_msgs”).innerHTML = conteudo_msg;
___}//if
__}//function resJsonOk(…)

__//executa sendForm quando a página for carregada
___dojo.addOnLoad(sendForm);
_</script>
</head>
<body class=“tundra”>
_<div id=“ct_msgs”></div>
_<div id=“ct_geral”>
__<!–Abaixo um formulário simplório com… –>
__<!–as configurações tradicionais –>
__<form id=“form_teste” method=“post”
___action=“recebe_dados.php”>
__ <!–Tags de entrada de dados… –>
__ <!–também tradicionais –>
___<label>Nome:</label>&nbsp;
___<input type=“text” name=“txt_nome” />&nbsp;
___<label>Endere&ccedil;o:</label>&nbsp;
___<input type=“text” name=“txt_endereco” />&nbsp;
___<!–botão especial, que é um WIDGET dojo –>
___<button dojoType=“dijit.form.Button”
____id=“submitButton”>Enviar</button>
__</form>
_</div>
</body>
</html>

Abaixo o código para recebe_dados.php que será utilizado em nosso teste. O código está bem comentado, dispensando maiores… comentários hehehe.

<?php

//endereço dojo no File System
$DFS=“c:/apache2.2/htdocs/dojo-release-1.3.0-src”;

//classe JSON PHP do dojo
require($DFS.“/dojo/tests/resources/JSON.php”);

/*
* Neste espaço poderiam haver tarefas para
* salvar os dados em BD
*
*/

//monta uma string com os dados recebidos
$dr =“Dados recebidos:”;
$dr.=” ['nome': ".$_POST["txt_nome"].“, “;
$dr.=“‘endere&ccedil;o’: “.$_POST["txt_endereco"];
$dr.=“]<br>”;

//Prepara a resposta de retorno em JSON, para
//cada variável a + adicionar um item no array
//com o nome da variável e seu respectivo valor

$ar = array(’status’ => “ok”,
____________‘msg’ => $dr);

//cria o objeto manipulador de JSON
$json = new Services_JSON();

//gera uma string com o conteúdo do vetor
//codificado em JSON
echo $json->encode($ar);
?>

Podemos observar que recebe_dados.php, efetua a simples tarefa de receber os dados enviados, e devolvê-los através de variáveis codificadas em Json. É claro que recebe_dados.php poderia efetuar muitas outras tarefas, como por exemplo: verificar a validade dos dados recebidos, gravá-los no banco de dados, analisar o status da gravação no banco e gerar uma resposta e devolver. Porém vamos primar pela simplicidade por que o foco de nosso estudo é o funcionamento do xhrPost. Uma vez efetuadas as tarefas, o array PHP com as variáveis de resposta é lançado para o método encode do objeto $json, o qual retorna uma string JSON. Sempre que um browser roda um arquivo no servidor, e este possui um echo ou equivalente, uma strig de texto é devolvida para o browser automaticamente, e esta é exibida na tela. Porém em nosso caso o solicitante não foi diretamente o browser, porém o agente xhrPost que o fez enviando dados para o arquivo recebe_dados.php, naturalmente xhrPost aguarda alguma string de retorno vinda deste arquivo, pelo protocolo HTTP (veja novamente a figura 2). Juntando tudo isto, a resposta recebida virá em JSON, como no exemplo abaixo:

Variáveis:

“status” = ok,
“msg” = Dados recebidos: ['nome': Leonir, 'endereço': Rua Ah\u002e002e. Programando...!]

String Json:

{“status”:”ok”,”msg”:”Dados recebidos: ['nome': Leonir, 'endereço': Rua Ah\u002e002e. Programando...!]“}

Salve index.php, e recebe_dados.php na mesma pasta, de forma que vc possa acessar index.php através de seu servidor local. Aí é só colocar para rodar, estes códigos estão funcionando perfeitamente, foram testados, e copiados diretamente do editor PHP e Javascript que utilizo o APTANA.

Observação Importante: Ao copiar o código, e colar em seu editor substitua todas as aspas redigitando-as, ou através do search replace do editor. Isto devido ao fato que o wordpress substitui as aspas normais por umas mais bonitinhas porém inúteis, os interpretadores de código PHP e Javascript não as reconhecem.

É isto, experimente e deixe seu comentário.

Abraço e até o próximo post.

During all my working years with coldfusion, I have never dealt much with cfform because I thought it has been hard to integrate javascript functions. cfform is supposed to make our lives easier by generating the javascript that we may want.

Currently, the company is moving into cfform for more convenience. Some colleagues are happy to hear that they are going to do lesser javascript than last time. But none of us are experienced in cfform. We all have to learn from scratch and use cfform.

Cfform suddenly got new problems coming up and we need to spend time to solve one by one to ensure that cfform is working and no other errors coming up. Cfform generates script which contains <!– –> which causes problem to our current ajax custom script.

Javascript cannot be evaluated when using xmlhttprequest and innerhtml to load the results, so that’s why my ex-colleague came up with a script function which will search for the script tags inside the called page and evaluate them. It was cool but it needs to ensure that there is no <!– –> tags!

Let me try prototype’s update function instead of innerhtml because the update function will run the scripts inside. Cool… let me try and hope it will blow the problem away.

No.. not working.. the update could not work for scripts no matter what haiz… back to the custom evaluate script function that we have… now looking for ways to trim off the <!– and –> from the scripts. Managed to remove <!– and –> by using substr and replace for extracted scripts.

Url: http://www.webdeveloper.com/forum/showthread.php?t=136331
Url: http://www.simpltry.com/2006/11/04/goodbye-innerhtml-hello-update/

Sorry about the long time between posts. Hope to start posting again soon

Anyhow,

I was working on a web application that is updating the details of a <map> HTML element using the innerHTML, the new innerHTML value is being processed in the server side using AJAX function

I was using the following JavaScript function to do that

function jvUpdateImageMap(ImageMapHTML) 

{

    try

    {

          document.getElementById(“MyImageMap”).innerHTML= ImageMapHTML;

           

     }

catch(err)

          {

          }

          finally

          {

          }

}

That was working fine for all the browser including Firefox 3.0 but not for Firefox 2.0

After debugging this I found that for FireFox 3.0 the result of updating the InnerHTML is this

  <map id=”MyImageMap” >

          <area SHAPE=”rect” id=”0_30″ usemap=”MyImageMap” Border=”0″ href=”#” COORDS=”538,420,550,408″ />

 </map>

This is the correct expected result

But for FIreFox 2.0 the result was this

<map id=”MyImageMap” >

<map id=”MyImageMap” >

          <area SHAPE=”rect” id=”0_30″ usemap=”MyImageMap” Border=”0″ href=”#” COORDS=”538,420,550,408″ />

</map>

</map>

So to fix this I had to add those lines to the server side function that generate the new <map> HTML code  

If Context.Request.Browser.Browser = “Firefox” Then

       If Context.Request.Browser.MajorVersion = “2″ Then

               ImageMapHTML = ImageMapHTML.Replace(“<map id=”"MyImageMap”" >”, “”)

                ImageMapHTML = ImageMapHTML.Replace(“</map>”, “”)

        End If

End If

For those who are working with multiple programming or scripting languages, the differences between them can be frustrating at times. One of the main concerns when comparing PHP to JavaScript is the interaction with the DOM. We can also see that PHP actually does support DOM functionality, however the documentation isn’t all that specific and we are mostly left to interpertation of which API does what. The most noteable loss was the absence of the famous (or infamous, depending on the developers views) innerHTML.Since the DOM handle functions are all neatly organized in classes, we can create our own classes on top of them and extend the possibilities of the original classes. My intention was to actually “intercept” the DOMDocument function getElementById which usually returns a DOMElement. See the following code snippet…

	class __DOMDocument extends DOMDocument
	{
		public function getElementById( $zName )
		{
			return new __DOMElement( $this, parent::getElementById( $zName ));
		}
	}

Notice how the new DOMElement is created. This is not the default one, this is a custom implementation of such – hence the prefixed name (__DOMElement). For convenience inside this new class, we also pass the pointer to the DOMDocument containing this element. Now, all we need to do is actually create the functions to parse the innerHTML! The code snippet is as followed…

	class __DOMElement /*extends DOMElement*/
	{
		private $pDocument;
		private $pElement;

		public function __construct( $pDocument, $pElement )
		{
			$this->pDocument = $pDocument;
			$this->pElement = $pElement;
		}

		public function __call( $zFunction, $aArguments )
		{
			if ( is_callable( array( $this->pElement, $zFunction )))
			{
				return call_user_func_array( array( $this->pElement, $zFunction ), $aArguments );
			}
		}

		public function __get( $zKey )
		{
			if ( $zKey == "innerHTML" )
			{
				return $this->getInnerHTML();
			}

			return false;
		}

		public function __set( $zKey, $zValue )
		{
			if ( $zKey == "innerHTML" )
			{
				$this->flushChilderen();
				$this->setInnerHTML( $zValue );
				return true;
			}

			return false;
		}

		public function flushChilderen()
		{
			if ( $this->pElement->hasChildNodes())
			{
				for ( $i = 0; $i <  $this->pElement->childNodes->length; $i++ )
				{
					 $this->pElement->removeChild(  $this->pElement->childNodes->item( $i ));
				}
			}
		}

		public function getInnerHTML()
		{
			@$pObject = new DOMDocument( 1.0, 'UTF8' );
			@$pObject->appendChild( $pObject->importNode( $this->pElement, true ));
			return $pObject->saveHTML();
		}

		public function setInnerHTML( $zValue )
		{
			@$pObject = new DOMDocument( 1.0, 'UTF8' );
			@$pObject->loadHTML( $zValue );

			$pAttach = $pObject->getElementsByTagName( 'body' );

			if ( $pAttach->length )
			{
				for ( $i = 0; $i < $pAttach->item( 0 )->childNodes->length; $i++ )
				{
					$this->pElement->appendChild( $this->pDocument->importNode( $pAttach->item( 0 )->childNodes->item( $i ), true ));
				}
			}
		}
	}

To walk you through these new functions, i will explain briefly what is doing where, and why. The constructor function accepts the DOMDocument and the real DOMElement for future reference, we will really need these both to simulate the actions of the DOMElement. The next magic function is __call, which will check if the incoming call is something which is call-able inside the DOMElement, and if so will perform the actual call. The following functions, __get and __set are the magic functions to either set or retrieve the innerHTML of the element. These forward the calls to the actual functions which will parse the element childeren.

The function “flushChilderen” is an utility function, which will make sure the element will have no more childeren attached. We will need this when we are setting the new innerHTML, otherwise we’d get an append effect instead – we do not want that. The getInnerHTML retrieves the innerHTML in a really simple fashion, a new DOMDocument is created and this node is imported – after which we simply have to save the HTML and we will have all the childerens HTML! Now that was easy, the last function is the most complicated function (its not that hard, anyway).

This function is “setInnerHTML”, where we will also create a new DOMDocument and load up the parsed HTML. This one will automatically generate the body tag because of the loadHTML function, so everything in that is what we have passed to the function. We will retrieve this tag and run through its child elements, which are imported to the real DOMDocument and appended to our element! Thats all there is to it!

I hope this comes in useful!

一圖勝萬字解釋

Hi,

I have a problem with inner html when i i have a lash object embedded in my html page. When i am trying to display a layer with the help of innerhtml then the layer is getting hidden beneath the embedded flash object. can nebdy help me out in sorting this issue???

O termo AJAX não provém do latim “Acessarium Javascriptum Atloren Xmelum”, não, mas da expressão da língua inglesa “Asynchronous JavaScript And XML” ou Javascript e XML assíncronos.

Um parêntesis teórico:

Esta questão de atividade assíncrona está para Javascript assim com THREAD’S estão para JAVA. Ou seja, a execução assíncrona ocorre em um tempo diferente da execução do script original. De modo que, se no meio de um looping for chamada a execução de uma tarefa assíncrona, o programa não irá aguardar a conclusão desta tarefa para então passar ao próximo passo do looping. Assim ao concluir a execução de um looping de 10 iterações, em que todas executam uma nova tarefa assíncrona, a nona tarefa pode estar sendo aberta e a primeira não ter sido concluída ainda, mas a terceira tarefa já pode ter retornado um resultado.

O que realmente interessa, prática!

Vamos partir de um layour HTML ultra básico:

<div id=“geral”>
<div id=“coluna_menu”></div>
<div id=“coluna_principal”></div>
</div>

Para incluir dados dinamicamente via PHP poderíamos proceder da maneira tradicional:

<div id=“geral”>
<div id=“coluna_menu”>
<a href=“index.php?arquivo=lista.php”>
</div>
<div id=“coluna_principal”>
<!– assim ao clicar no menu recarrega a página incluindo o arquivo que deve ser mostrado –>
<?php include($_GET['arquivo']); ?>
</div>
</div>

Tudo certo até aqui?

Bom, existe uma maneira de se carregar um conteúdo para dentro da div “coluna_principal”, sem usar frames ou recarregar a página utilizando includes.

Trata-se da técnica entitulada de AJAX (Asynchronous JavaScript And XML). Serve basicamente para carregar dados (xml, html, texto) em uma página, abrindo um portal no “espaço tempo” do browser e indo buscar novo conteúdo no servidor, sem desfazer todo o HTML  que já tinha sido previamente carregado no browser, ao acessar a página.

Um parêntesis de programação javascript:

Em primeiro lugar, gostaria de explicar como funciona o atributo innerHTML do javascript. Atenção innerHTML não é AJAX. Serve apenas para alterar dinamicamente o HTML contido dentro de uma tag. É preciso ter em mente que o Javascript vê as tags do browser de uma maneira diferente do PHP. Em Javascript, todas as tags HTML podem ser referenciadas como um objeto (com métodos e atributos), ligado ao objeto principal document. Em PHP, porém, todas as tag’s são tratadas puramente como texto, basta fazer echo de alguma coisa no meio do html e tá realizado. Claro, isto por que o PHP faz a sua parte lá no servidor, e o servidor apenas tem interesse em fornecer TAG’s HTML, e não em interpretá-las. Já o Javascript, é  executado no browser, juntamente com o HTML. Logo, estando o HTML interpretado pelo browser, este HTML fica na memória do computador, e o browser não mais o enxerga como um texto, mas como objetos que tem propriedades e comportamentos. Por exemplo, um botão não pode ser visto como um texto, mas deve ser visto como um programa, um objeto que reage ao click do usuário. Continuando:

var container = document.getElementById(‘coluna_principal’);
//getElementById localiza um objeto no meio do html,
//pelo seu ID, e retorna uma referência para este objeto.

Agora, a variável container se tornou um objeto com referência para a tag “coluna_principal”. E ele tem propriedades que podem ser acessadas a partir desta variável. Tipo, poderíamos descobrir que tag é esta:

alert(container.tagName); //isto mostraria “div” , pois div é o nome da tag

//que é identificada pelo id “coluna_principal”.

Aqui é que entra o innerHTML.

container.innerHTML = “<br> oi <br><br><br><br> bla bla bla”;

//com isto o texto e o HTML entre aspas foram adicionados dentro da tag div com id “coluna_principal”.

Bom esta é a maneira de escrever um HTML novo dentro de uma tag já existente, de forma dinâmica (DHTML – Dynamic HTML).

Então… como o Ajax funciona?

Ajax nada mais é do que a técnica para carregar conteúdo no browser, que utiliza funções javascript para buscar dados de um arquivo presente no servidor. Esta tarefa é executada por um componente do browser (XMLHttpRequest), que pode ser acessado através de funções Javascript para buscar no servidor um novo HTML ou XML.

<script>
//Tenta criar o objeto xmlhttp responsável por buscar os dados no servidor, são necessárias
// 3 tentativas de criação do objeto por conta das discrepâncias de browsers microsoft
try {
xmlhttp = new XMLHttpRequest();
} catch(ee) {
try{
xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch(e) {
try{
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch(E) {
xmlhttp = false;
}
}
}


//a função de carregamento, recebe como parâmetro
//_idConainer – id da tag onde será escrito o novo HTML que será buscado no servidor
//_endereco – endereço da página que será buscada no servidor
function carrega(_idContainer, _endereco){

xmlhttp.open(“GET”,_endereco,true);
xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState==4){

//pega o resultado e filtra alguns caracteres absurdos
retorno=xmlhttp.responseText;
//tag_container contem a referencia da tag que vai receber
var tag_container = document.getElementById(_idContainer);
//escreve dentro da tag o novo HTML
tag_container.innerHTML=retorno; //olha o inner html aí

}
}
//Executa
xmlhttp.send(null)
}
</script>

Pronto! Lembra daquele trecho básico de html?

<div id=“geral”>
<div id=“coluna_menu”></div>
<div id=“coluna_principal”></div>
</div>
Para inserir um conteúdo HTML, no div de id “coluna_principal”, basta invocar a função carrega passando como parâmetro o id da div, e o endereço da página que contém os dados que devem ser carregados via AJAX. Ex:

<script>
carrega(‘coluna_principal’, ‘dados.php’);

// ou se for o caso, a url completa:
carrega(‘coluna_principal’, ‘http://www.minhapagina.com/dados.php’);
</script>

Quando carrega for chamado com os devidos parâmetros é que ocorre a tarefa de carregamento que se dá assincronamente, ou seja, não há como prever o tempo que levará para ela ser concluída, uma vez que este tempo depende de diversos fatores como: a velocidade da conexão de rede naquele momento, a quantidade de dados que serão carregados, a disponibilidade do servidor de atender etc…

E como fazer para um link ativar o carregamento de uma página usando AJAX?

<div id=“geral”>
<div id=“coluna_menu”><a href=“javascript:carrega(‘coluna_principal’, ‘dados.php’);”>acessar dados</a></div>
<div id=“coluna_principal”></div>
</div>
Bom, como podemos ver, AJAX nada mais é do que uma técnica de carregamento de dados. O exemplo acima funciona, porém por tratar-se de um código exemplar de extrema simplicidade, não pode ser utilizado para aplicações sérias. Nele faltam diversos recursos, que talvez em outra análise sobre AJAX possamos aprofundar.

[15/01/2009 - Edição problema grave no wordpress]  - Ao copiar trechos de código, dos posts do Ahã Programando, substitua todas as aspas redigitando-as. Pois o WordPress substitui as aspas originais por algumas que são inúteis em programação. E os testes acabam não funcionando, deixando os entusiastas da programação web frustrados.  Não desista! Tente novamente

Por hoje é só! E como prometido, quero dedicar este pequeno artigo à minha amiga Web Designer Cristina Otto, abração Cris!!

Ok, let’s imagine the use case: I have an iframe somewhere on my page, and when I click a link or a button I need to get the content of it (could be a textarea e.g.), and then do some stuff with it.

It was easy to do this in IE, but for Firefox I struggled more, as I kept getting the “frame has no properties” error message in the console. And when I solved this I couldn’t get to the content.

There is a lot of references out there claiming that you could use document.frames['nameOfMyIframe'] or window.frames['nameOfMyIframe'] to get the frame, and then use the .innerHTML to get the content, but both are wrong.

I came up with the following function that seems to do the job in both Firefox (tested on version 2.0.0.11 and 3.03 ) and in IE (6 and 7):

function getContentFromIframe(iFrameName)
{

    var myIFrame = document.getElementById(iFrameName);
    var content = myIFrame.contentWindow.document.body.innerHTML;

    //Do whatever you need with the content    

}

This wasn’t my biggest contribution, but I spent some time trying to find this solution, and for some of you it might be helpful saving you frome some heavy googling.

Because of some postings about people struggling to get this to work, I now include an example using this script. The example consist of two files, main.html and frame.html. If you want to try it locally, put both of them in the same folder and open main.html.

Main.html:

<html>
<head>

</head>
<body>
<script type="text/javascript">
function getContentFromIframe(iFrameName)
{

    var myIFrame = document.getElementById(iFrameName);
    var content = myIFrame.contentWindow.document.body.innerHTML;

    alert('content: ' + content);    

    content = 'The inside of my frame has now changed';
    myIFrame.contentWindow.document.body.innerHTML = content;

}

</script>

<iframe id="myIframe" src="frame.html">

</iframe>

<a href="#" onclick="getContentFromIframe('myIframe')">Get the content</a>

</body>

</html>

Frame.html:

<html>
<head>

</head>
<body>

This is inside my frame
</body>

</html>

If its a textarea or textbox then try using innerText instead of innerHTML

So, once again, IE has tested my patience … and lost.

Here’s the scoop:

I have a div styled with a width, height and an overflow set to hidden [so it qualifies for IE's oh-so-crucial "hasLayout" attribute]. In essence this div will be populated with content dynamically with JS using the inner HTML property via an ajax call. I have some custom scrollbars I built to scroll the div [hence hiding the overflow content -- therefore hiding and chrome scrollbars] … Simple enough, right? I’ve seen this done about a dozen times….

This works flawlessly in Firefox [as expected] … In IE, however, the inner content of the div would spill out into the layout as if it were on a different z-index. I tried manually setting the height and overflow CSS properties every time the script would populate the div, I even went as far as adding the inner content piece by piece [in this case the content is an unsorted list [ul] with one or many [li] children] … that didn’t work.

Then I remembered that IE was written by retards and tried something that really makes no sense: I changed the position to relative. Now, this property pertains to the element’s position within the DOM, not how the overflow functions within the element.

So, position == outside, overflow == inside…..

Me – 1
IE – 0

I frequently find myself wanting to refer to the contents of an element on a web page, having got hold of that element in the DOM. However, I equally frequently forget how to access this content.

The confusion arises because there are various ways to get hold of the content of an element: nodeValue, value, data, textContent, innerText and innerHTML all seem to do the job in different circumstances. In the hope that I’m not the only one with this problem, I looked into the matter…

In a nutshell:

• nodeValue returns attributes or text (read/write)
• value returns the text content of an attribute (read)
• data is used to access text content of a node (read/write)
• textContent returns the text content of a node and its descendents (read/write)
• innerText returns the text content of a node and its descendents (read/write)
• innerHTML returns the HTML contained by an element (read/write)

nodeValue, counter-intuitively, does not return the text content of a node such as a paragraph i.e. it is not a W3C analogue of innerHTML. nodeValue is in the DOM Core specification and is well supported by browers. It is a read/write attribute.

This table from developer.mozilla.org shows the return value of accessing nodeValue on various nodes:

value returns the text value of a node’s attribute. This does not work with text nodes. value is in the DOM Core Specification and it is very poorly supported in Windows IE, although Firefox does support it. It is a read-only attribute.

data is used to address the content of a text node. It is the same as nodeValue for that node. data is in the DOM Core Specification and it is well supported by browsers. It is a read/write attribute.

textContent/innerText returns the text contained in a node and its descendants, ignoring any contained tags. Whilst textContent is in the DOM Level 3 Core Specification and it is not really supported at all except in Firefox, innerText is well supported by browsers, the exception being buggy support in Mozilla 1.75. Both are read/write attributes.

innerHTML returns the markup contained in a node and its descendants. Whilst innerHTML is not in a W3C specification, most browsers support it and it is often faster than W3C DOM methods. It is a read/write attribute.

I’m heavily indebted to quirksmode.org and the W3C DOM specifications for this information.