Modo listagem | Modo Linear

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

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>

dininis · (Esta mensagem foi modificada pela última vez a: 30-05-2014 10:32 por dininis.)

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?

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');