[Resolvido] Limitação do innerHTML?

Willian Vieira · Setembro 30, 2009

Srs,

Estou com um probleminha e preciso da orientação dos senhores,

Segue:

HTML (Camada de Visão - VIEW)

<h1>Escola sua atividade</h1>
<select name="atividade" onchange="escolher(this.value)">
 <option value="atividade1">Atividade 1</option>
 <option value="atividade2">Atividade 2</option>
 <option value="atividade3">Atividade 3</option>
 <option value="atividade4">Atividade 4</option>
 <option value="atividade5">Atividade 5</option>
</select>
<br>
<div id="atividade">
</div>

Ajax:

function escolher(atividade) { 
 requestObject = getRequestObject();
 if (requestObject) {
 var url="consulta.php?atividade="+ atividade;
 requestObject.onreadystatechange = requestObjectStateChanged;
 requestObject.open("GET", url, true);
 requestObject.send(null);
 } else {
 alert('Seu navegador não tem suporte para essa tecnologia.');
 }
}

PHP:

<?php
$atividade = $_GET['atividade'];
echo $atividade;
?>

O código assima funciona beleza, mas não consigo formatar a saída HTML na VIEW.

Gostaria que o código funcionasse mais ou menos assim:

PHP:

<?php
$atividade = $_GET['atividade'];
return $atividade;
?>

Ex.:

<div id="atividade">

<h1><?php ?></h1> // Assim consigo formatar do jeito que eu quiser.

</div>

Nas diversas tentativas que fiz, parece que se tratar de alguma limitação do document.getElementById('').innerHTML

Alguém tem alguma idéia?

Thiago Retondar · Setembro 30, 2009

Tópico movido:

Webstandards: CSS / XML / XHTML / HTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif JavaScript / DHTML

Não entendi qual sua dúvida. =/

Pode reexplicar?

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

William Bruno · Setembro 30, 2009

É a mesma coisa. Como está a função

requestObjectStateChanged ?

não existe essa limitação. Não entendi o teu exemplo. você colocou tags php vazias.

Faça a formatação com CSS. O oque vier, vai 'pegar' o estilo do CSS que já está carregado

Willian Vieira · Setembro 30, 2009

Srs,

Desculpas, realmente tenho um pouco de dificuldade para me expressar escrevendo...

Vou tentar com um exemplo mais simples:

index.html

<html>
<head>
<title>Exemplo simples do uso de AJAX</title>
<script>
function getRequestObject() {
 // Função que retorna o objeto que será usado para fazer requisições.
 // Caso o navegador não tenha suporte, a função retorna falso.
 if (window.XMLHttpRequest) {
 xmlhttp = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
 } else {
 return false;
 }
 return xmlhttp;
}

function loadData(url) {
 // Função que recebe uma URL e dá um GET nessa URL, ou seja, faz uma requisição.
 requestObject = getRequestObject();
 if (requestObject) {
 requestObject.onreadystatechange = requestObjectStateChanged;
 requestObject.open("GET", url, true);
 requestObject.send(null);
 } else {
 alert('Seu navegador não tem suporte para essa tecnologia.');
 }
}

function requestObjectStateChanged() {
 // Essa função é acionada pela função acima. Na verdade é um evento (onreadystatechange) do
 // objeto que faz a requisição que a aciona toda vez que seu estado altera.
 // Quando a requisição termina com sucesso, coloco o resultado dentro do div que está no
 // body da página.
 if (requestObject.readyState==4) {
 if (requestObject.status==200) {
 document.getElementById('codigo').innerHTML = requestObject.responseText.toUpperCase();
 } else {
 alert('Erro ao carregar os dados.');
 }
 }
}
</script>
</head>
<body>
<input type="button" value="Carregar" onclick="loadData('exemplo.html');" />
<div id="codigo"> </div>
</body>
</html>

exemplo.html

<ul>
 <li>Os 11 sites mais interessantes da nova internet</li>
 <li>Notebooks de 2015</li>
 <li>Microsoft confirma softwares vendidos por assinatura</li>
 <li>Excesso de downloads punidos por provedores</li>
</ul>

Veja que ao clicar no botão da página index.html é carregado o conteúdo de exemplo.html, mas antes é é TRANSFORMADO para caixa ALTA

// Aqui é transformado todo o conteúdo para caixa alta.
document.getElementById('codigo').innerHTML = requestObject.responseText.toUpperCase();

Eu quero que essa transformação seja feita na VIEW. ou seja, no arquivo index.html

Algo assim:

index.html

<div id="codigo"><h1>CONTEÚDO DE exemplo.html</h1></div>

E aí consegui explicar?

Thiago Retondar · Setembro 30, 2009

Uhhnn, pelo o que eu entendi, é só fazer assim no CSS.

#codigo h1{
text-transform: uppercase;
}

Só não entendi onde entra sua dúvida com innerHTML.

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

Willian Vieira · Setembro 30, 2009

Uhhnn, pelo o que eu entendi, é só fazer assim no CSS.
#codigo h1{
text-transform: uppercase;
}
Só não entendi onde entra sua dúvida com innerHTML.

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

http://forum.imasters.com.br/public/style_emoticons/default/yay.gif Obrigado pela paciência comigo....rs

e se em vez de transformar em caixa alta, quisesse colocar dentro da tag <pre>

Algo assim:

<div id="codigo">
<pre>
// CONTEÚDO AQUI!!!!!....
</pre>
</div>

E se em vez de um simples exemplo.html, fosse um teste.php

<?php
$variavel1 = "Willian Vieira";
$variavel2 = "Willian Vieira";
$variavel3 = "Willian Vieira";
$variavel4 = "Willian Vieira";
return $variavel1;
return $variavel2;
return $variavel3;
return $variavel4;
?>

Agora quero colocar o conteúdo dessas variáveis na view

<div id="codigo">
 <table>
<tr>
 <td><?php echo $variavel1;?></td>
 <td><?php echo $variavel2;?></td>
</tr>
<tr>
 <td><?php echo $variavel3;?></td>
 <td><?php echo $variavel4;?></td>
</tr>
</table>
</div>

Veja,

quero atráves do Ajax, carregar algum conteúdo dentro de uma div qualquer e FORMATAR na view ( e não o CSS, Javascript, etc) esse conteúdo como eu quiser.

É aí que parece que o innerHTML não me permite isso.

Ele permite:

Formatar e enviar

e não

Enviar e para depois formatar.

E aí Imagem Postada

Willian Vieira · Setembro 30, 2009

Mais um exemplo:

exemplo

Nesse exemplo a saída é uma tabela bonitinha, com <th> e tudo mais. Porém esse código está no arquivo getuser.php.

No meu caso, eu quero que essa formatação, tabela bonitinha e tudo mais, fique na VIEW e ñ no Model.

William Bruno · Outubro 1, 2009

Você precisa informar onde cada variável entra.. não dá para atribuir valores à variáveis php com o Javascript dessa maneira.

Veja, o correto é:

<html>
<head>
<title>Exemplo simples do uso de AJAX</title>
<script>
function getRequestObject() {
	// Função que retorna o objeto que será usado para fazer requisições.
	// Caso o navegador não tenha suporte, a função retorna falso.
	if (window.XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
	} else {
		return false;
	}
	return xmlhttp;
}

function loadData(url) {
	// Função que recebe uma URL e dá um GET nessa URL, ou seja, faz uma requisição.
	requestObject = getRequestObject();
	if (requestObject) {
		requestObject.onreadystatechange = requestObjectStateChanged;
		requestObject.open("GET", url, true);
		requestObject.send(null);
	} else {
		alert('Seu navegador não tem suporte para essa tecnologia.');
	}
}

function requestObjectStateChanged() {
	// Essa função é acionada pela função acima. Na verdade é um evento (onreadystatechange) do
	// objeto que faz a requisição que a aciona toda vez que seu estado altera.
	// Quando a requisição termina com sucesso, coloco o resultado dentro do div que está no
	// body da página.
	if (requestObject.readyState==4) {
		if (requestObject.status==200) {
			var table = document.getElementById('codigo');
			var td = table.getElementsByTagName('td');
			
			var cada = requestObject.responseText.split('|');
			for( var i=0; i < td.length; i++ ){
			
				td[i].childNodes[0].nodeValue = cada[i];
			}
		} else {
			alert('Erro ao carregar os dados.');
		}
	}
}
</script>
</head>
<body>
	<input type="button" value="Carregar" onclick="loadData('teste.php');" />

	<table id="codigo">
		<tr>
			<td>Lugar 1</td>
			<td>Lugar 2</td>
		</tr>
		<tr>
			<td>Lugar 3</td>
			<td>Lugar 4</td>
		</tr>
	</table>

</body>
</html>

teste.php

<?php
	$variavel1 = "Willian Vieira";
	$variavel2 = "Vieira_Willian";
	$variavel3 = "William Bruno";
	$variavel4 = "Bruno_William";


	echo $variavel1.'|'.$variavel2.'|'.$variavel3.'|'.$variavel4;
?>

veja que usei o | como separador da string, por ser um caracter bem estranho.. e achar que as minhas variáveis não terão ele como valor.

AJAX só lê retorno simples.. um echo. Se você trabalhar com responseText.

Willian Vieira · Outubro 1, 2009

...

AJAX só lê retorno simples.. um echo. Se você trabalhar com responseText.

Minha dúvida era nisso.

Então o AJAX só lê retorno simples... Eu que pensei que ele fosse o meu salvador!!!!... Tô brincando!

Pensei que fosse uma limitação do innerHTML então é o responseText.

beleza. Obrigado pelo esclarecimento!

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

William Bruno · Outubro 1, 2009

É então, ele lê retorno simples, XML, jSON..

mas é com Javascript q você vai ter que resolver onde vai jogar cada dado.

Se você receber por exemplo um responseXML dá pra tratar mais fácil, ai não precisa desse split que fiz... e tal.

kakaroto753 · Setembro 4, 2014

Olá galera, bom dia.

Eu sei que já faz tempo este tópico mas ele é exatamente o que estou precisando e o meu tem algumas mudanças que não consigo fazer, já tentei várias vezes e nada.

este é o meu código javascript:

function checkAjaxMultiple(action, resp_1, resp_2, resp_3, resp_4, resp_5, p_1, p_2, p_3, p_4, p_5) {

 if(p_1){pr_1 = document.getElementById(p_1).value;}
 if(p_2){pr_2 = document.getElementById(p_2).value;}
 if(p_3){pr_3 = document.getElementById(p_3).value;}
 if(p_4){pr_4 = document.getElementById(p_4).value;}
 if(p_5){pr_5 = document.getElementById(p_5).value;}

 var div = document.getElementById(resp_1).id;// se não pego o id da div ele dá um outro erro
 if(resp_2){div += '|' + document.getElementById(resp_2).id;}
 if(resp_3){div += '|' + document.getElementById(resp_3).id;}
 if(resp_4){div += '|' + document.getElementById(resp_4).id;}
 if(resp_5){div += '|' + document.getElementById(resp_5).id;}

 var url = "teste.php?action=" + action;
 if(p_1){url += "&pr_1=" + pr_1;}
 if(p_2){url += "&pr_2=" + pr_2;}
 if(p_3){url += "&pr_3=" + pr_3;}
 if(p_4){url += "&pr_4=" + pr_4;}
 if(p_5){url += "&pr_5=" + pr_5;}

 ajax = ajaxInit();
 if(ajax) {
	ajax.open("GET", url, true);
	ajax.onreadystatechange = function(){
		if (ajax.readyState==1){
			for(var i=0; i < div.length; i++){
				div[i].innerHTML = "<img src='images/ajax-loader.gif' />";
			}
		}
		
		if(ajax.readyState == 4){
			var ich = ajax.responseText.split('|');
			var div_ich = div.split('|');
			for(var i = 0; i < div.length; i++){
				div_ich[i].innerHTML = ich[i];
			}
       	}
	}
	ajax.send(null);
 }
}

Eu preciso clicar em um botão e atualizar vários campos diferentes com nomes diferentes pois usarei o mesmo em várias páginas, no código acima o erro é o seguinte:

"Uncaught TypeError: Cannot set property 'innerHTML' of undefined "

Se alguém puder me ajudar.

Obrigado.

William Bruno · Setembro 4, 2014

seu Loop tá errado cara, vc tem q iterar nos objetos, e não em strings.

abra outro tópico. O split não faz sentido para vc.

vc vai ter q usar .querySelectorAll

Arquivado

[Resolvido] Limitação do innerHTML?

Recommended Posts

Willian Vieira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Willian Vieira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Willian Vieira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Willian Vieira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Willian Vieira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

kakaroto753 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeginiter - Orientação para Impressão

Ajuda com Extends e envio para o banco

Fixar div até atingir uma certa altura

Fóruns

Tempo Real

Informação importante