Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Lab Design

Textarea e AJAX

Por , em Javascript

Recommended Posts

Lab Design    0

Lab Design
Postado

Acho que pra quem ja iniciando em AJAX vai se deparar com um grande problema que editar um texto dentro do textarea. Não a primeira vez claro, mas quando se tem por exemplo uma tabela e precisa de edição, ainda não encontrei uma forma satisfatória pra disponibilizar a edição no textarea. Fiz algumas mutretas pra contornar o problema até descobrir uma solução definitiva e se alguem souber eu agradeço, pois tem sido o meu calcanhar de aquiles. abaixo descrevo de que maneira estou conseguindo contornar:

 

No arquivo em php que traz os dados da database:

Não estranhem a chamada é que uso mais MySQLI em vez do MySQL convencional.

O trecho abaixo recupera da base de dados todos os campos da tabela "X".

$query=$conn->query("select * from $tbl_agenda where agd_id=$agd");

$rsQuery = $query->fetch_assoc();

$pdt = $rsQuery['pdt'];

$pgm = $rsQuery['pgm'];

$programa= $rsQuery['programa'];

$atv = $rsQuery['atv'];

$atividade= $rsQuery['atividade'];

$org = $rsQuery['org'];

$obs = $rsQuery['obs'];

Agora para o FF essa dica funciona legal não dá qualquer tipo de erro:

O teste sobre o $agd é pra verificar se o form está no modo insert ou no modo de edição. O $agd é o ID da tabela na base de dados. Note que coloco um texto informado para o usuario clicar dentro da caixa para trazer o texto que não está aparecendo. Uma vez clicado, chama uma função em javascript pra colocar o texto de volta no textarea.

Até ai nenhum problema exceto o aviso acima da caixa que não acho nada agradável, mas de outra forma o usuário ficaria perdido quando for editar o seu cadastro por exemplo e ver que nocampo de obs não tem nada.

<? if ($agd)

echo "

<tr><td><td class=label style=\"text-align:center; color:#c40000\">

<b style=\"font-weight:bolder; font-size:8pt\">Clique na caixa abaixo para carregar o texto</td></tr>" ?>

<tr>

<td class="label" valign="top">Descreva:</td>

<td colspan="2">

<textarea name="obs" id="obs" style="width:260px; height:50px" onfocus="java script:setObs('<?= $obs ?>')"/></textarea>

</td>

</tr>

A dica para o FF (que poderia até suprimir o aviso acima da caixa seria forçar o onFocus sobre o textarea, colocando no final da pagina:

<script>

document.agenda.obs.focus();

</script>

abaixo a função setObs:

function setObs(texto) {

target = document.getElementById('obs');

target.setAttribute('value',texto);

target.innerHTML=texto;

}

Agora vem o problema:

No FF tudo beleza abro o console e checo que não tem nenhum erro em javascript e o texto ta lá no textarea pra edição.

No IE dá um erro assim:

 

Linha 282836682

Caractere: 2

Erro: 'document.agenda.obs' é nulo ou não é um objeto.

Código: 0

 

Decisão: Como 90% dos usuários utilizam o IE eu não tenho opção senão remover o script nofinal da página pra eliminar o erro do IE e fazer com que todos cliquem na caixa de texto pra poder entrar em edição....

 

Se alguem já passou por esse problema e achou uma solução que funcione nos dois navegadores e puder me dar uma dica eu agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hamilcar    1

Hamilcar
Postado

Lab Design, não sei se entendi bem, mas vê aí se é isto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script language="JavaScript" type="text/javascript">function setFocus(id){	document.getElementById(id).focus()}function setText(texto, id){	target = document.getElementById(id);	target.setAttribute('value',texto);	target.innerHTML=texto;}</script></head><body><?php$obs = 'Testando se vai para textarea';?><textarea name="obs" id="obs" style="width:260px; height:50px" onfocus='setText("<? echo($obs); ?>", this.id);'/></textarea> </body><script>	setFocus('obs');</script></html>

Testei no IE e FF, e deu certo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lab Design    0

Lab Design
Postado

Vou testar não sei se é essa a solução porque no carregamento normal da pagina funciona bem colocando um document.nomeform.nomecampo.value=tal coisa agora quando se carrega a pagina por ajax nem tudo age da mesma maneira certo.Eu agradeço pela ajuda.Lauro

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lab Design    0

Lab Design
Postado

o que eu não consigo entender é funciona até com o mouseover.

<textarea name="obs" id="obs" style="width:260px; height:50px" onmouseover="java script:setObs('<?= $obs ?>')"/></textarea>

Mas qualquer tentativa de forçar o carregamento do texto dá um erro no IE. o navegador mardito.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lab Design    0

Lab Design
Postado

Caso resolvido:Já que o form vem do php, a solução foi criar um campo hidden com o valor do textarea.

<input type="hidden" name="oObs" id="oObs" value="<?= $obs ?>"/>

abaixo o textarea sem qualquer alteração.

<textarea name="obs" id="obs" style="width:260px; height:50px"/></textarea>

No modulo de carga em ajax:

open: function(param) {/* mostra o layer */url='mws_agenda.php?'+param;div = document.getElementById('dvAgenda');div.className="visivel";var alerta="<br><br><br><center><img src='images/clocks.gif'><br><b>Carregando.</b></center>"; xmlhttp.open('GET', url, true);xmlhttp.onreadystatechange = function() {if (xmlhttp.readyState==0 || xmlhttp.readyState < 3)div.innerHTML=alerta; // aguarde if(xmlhttp.readyState == 4) { if(xmlhttp.status == 200) { conteudo=xmlhttp.responseText;ExtraiScript(conteudo); div.innerHTML = conteudo;var ta=document.getElementById('obs'); var tn=document.getElementById('oObs');ta.innerHTML=tn.value;alert('novo valor='+ta.value);}} } // function xmlhttp.send(null);},

Ta lá no IE e no FF o conteudo do textarea pronto pra edição.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito