Forum Pplware
[JavaScript] Problema com validações ao adicionar algo ao documento. - Versão de Impressão

+- Forum Pplware (http://forum.pplware.com)
+-- Fórum: Mais Tech (/forumdisplay.php?fid=11)
+--- Fórum: Programação e Web (/forumdisplay.php?fid=16)
+--- Tópico: [JavaScript] Problema com validações ao adicionar algo ao documento. (/showthread.php?tid=19367)



[JavaScript] Problema com validações ao adicionar algo ao documento. - dininis - 29-05-2014 15:08

tenho um problema que não consigo arranjar forma de dar a volta...
No sistema que estou a desenvolver, utilizo AJAX para pedir informação ao servidor que que, para tal, tenha que recarregar a página (validação de dados e formulários).

Quando o servidor devolver um erro, a forma que me é mais simples de fazer é através da criação de um bloco (fixed) ao canto da página com o devido erro. Aqui é que aparece o problema.


Quando isso acontece, utilizo "document.getElementsByTagName('body')[0].innerHTML += Error;" para tal efeito... Mas tudo o que é input, os seus valores vão à vida...

Está aqui um exemplo:
Código:
<html>
<head>
<script>
function addSomethingToBody(obj){
document.getElementsByTagName('body')[0].innerHTML += obj.value;
}
function addSomethingToElement_ID(obj,elemID){
document.getElementById(elemID).innerHTML += obj.value;
}
function addSomethingToElement_Name(obj,elemName){
document.getElementsByName(elemName)[0].innerHTML += obj.value;
}
function addSomethingToElement_TagName(obj,TagName,index){
document.getElementsByTagName(TagName)[index].innerHTML += obj.value;
}
</script>
</head>
<body id='body'>
<h3>Add to body</h3>
<input type="text" onblur="addSomethingToBody(this)" ></input>


<h3>Add to Element - ID</h3>
<input type="text" onblur="addSomethingToElement_ID(this,'spanExampleID')" ></input>
<span id='spanExampleID'></span><br>
<b>This doesn't work either...</b> <input type="text" onblur="addSomethingToElement_ID(this,'body')" ></input>

<h3>Add to Element - Name</h3>
<input type="text" onblur="addSomethingToElement_Name(this,'spanExampleID')" ></input>
<span name='spanExampleID'></span>

<h3>Add to Element - TagName</h3>
<input type="text" onblur="addSomethingToElement_TagName(this,'span',2)" ></input>
<span></span>
<br>
<br>
Body Extra content: 
</body>
</html>

É só copiar-colar para um ficheiro .html e abrir com o browser.

A forma de contornar o problema, seria criar um elemento específico para tal função, o que não daria trabalho nenhum, de todo. Mas isso implica eu continuar sem saber o porquê deste comportamento Smile


RE: [JavaScript] Problema com validações ao adicionar algo ao documento. - eSkiSo - 29-05-2014 19:36

Essas modificações ao 'body' é que estragam tudo, sem isso funciona sem problemas:
Código:
<html>
<head>
<script>
function addSomethingToBody(obj){
document.getElementsByTagName('body')[0].innerHTML += obj.value;
}
function addSomethingToElement_ID(obj,elemID){
document.getElementById(elemID).innerHTML += obj.value;
}
function addSomethingToElement_Name(obj,elemName){
document.getElementsByName(elemName)[0].innerHTML += obj.value;
}
function addSomethingToElement_TagName(obj,TagName,index){
document.getElementsByTagName(TagName)[index].innerHTML += obj.value;
}
</script>
</head>
<body id='body'>
<h3>Add to body</h3>
<input type="text"></input>


<h3>Add to Element - ID</h3>
<input type="text" onblur="addSomethingToElement_ID(this,'spanExampleID')" ></input>
<span id='spanExampleID'></span><br>
<b>This doesn't work either...</b> <input type="text"></input>

<h3>Add to Element - Name</h3>
<input type="text" onblur="addSomethingToElement_Name(this,'spanExampleID')" ></input>
<span name='spanExampleID'></span>

<h3>Add to Element - TagName</h3>
<input type="text" onblur="addSomethingToElement_TagName(this,'span',2)" ></input>
<span></span>
<br>
<br>
Body Extra content: 
</body>
</html>



RE: [JavaScript] Problema com validações ao adicionar algo ao documento. - dininis - 30-05-2014 10:31

o objetivo é mesmo colocar no body. Como disse, a solução seria criar um elemento para essa função em específico. o valor que vai para o body, não está dentro de um input, é vindo de um pedido, via AJAX, ao servidor e só então vai para o documento.
a única coisa que faz isso é um div com um aviso ou observação. O resto ou serve para informar que tal função teve sucesso ou, em caso contrário, vai para a console do JS Smile

Alguém me sabe dizer porque é que isso acontece?

OBS: Encontrei uma solução que funciona... onkeyup -> colocar todo o conteúdo num outro elemento; onblur Voltar a meter no input após a tal validação ser feita. A explicação que tenho para isto seria que ao inserir algo, tudo o que esse "algo" tem é carregado de volta, ou seja, seria o mesmo que apagar e adicionar denovo com o tal extra... Será isso?


RE: [JavaScript] Problema com validações ao adicionar algo ao documento. - eSkiSo - 30-05-2014 19:59

Sim, mas o que estas a fazer é a substituir o body todo, ou seja estás a "recriar" o form com os valores de origem (neste caso vazios).
Se o objectivo é simplesmente mostrar um erro devolvido pelo servidor porque nao criares uma zona só para o erro onde podes mostrar o erro que der, do genero:
Código:
<html>
<head>
<script>
erro_msg = 'Erro dado por servidor n ';
count = 1;
function showError(erro){
    document.getElementById('erros').innerHTML = erro + count;
    count += 1;
}
</script>
</head>
<body id='body'>
<h3>Add to body</h3>
<input type="text"></input>
<h3>Add to Element - ID</h3>
<input type="text"></input>
<span id='spanExampleID'></span><br>
<b>This doesn't work either...</b> <input type="text"></input>
<h3>Add to Element - Name</h3>
<input type="text"></input>
<span name='spanExampleID'></span>

<h3>Add to Element - TagName</h3>
<input type="text"></input><br><br>
<a href="#" onclick="showError(erro_msg);">Submit</a>

<br>
<br>
Body Extra content: 
<p><font color=red><span id='erros'></span></font></p>
</body>
</html>

Ao clicares em Submit ele vai colocar um erro no sitio especificado.
Ao receberes o erro do servidor simplesmente chamas a função: showError('Text do erro');