onClick sostituire elemento in textarea scegliendolo per ID

**essezeta** · 23-01-2009, 21:16

Buona serata a tutti...
vorrei sapere se è possibile fare quanto segue:

ho miofile.html composto così:

<div id="PRIMO">contenuto</div>
<div id="SECONDO">contenuto</div>

Poi in un'altra pagina lo richiamo in una textarea includendolo con php:

<textarea><? include ("miofile.html"); ?></textarea>

Mi chiedevo se posso scegliere un elemento per ID tra quelli della textarea e sostituirlo con un contenuto predeterminato... insomma una cosa del tipo:

<a href="#" onClick="sostituisciElemento();
che fa lavorare uno script del genere:

codice:

<script>
function sostituisciElemento()
{
var stringa = "";
stringa += "<div id=\"SECONDO\">";
stringa += "

ciao</p>";
stringa += "

mondo</p>";
stringa += "</div>";

document.getElementById('SECONDO');
newBoxDiv.innerHTML = stringa;    //NEL SENSO: SostituisciConValoreDiStringa

Grazie dell'attenzione...

buon appetito a chi va a mangiare...
buona digestione a chi come me ha già mangiato...

**dottwatson** · 24-01-2009, 00:59

non sei stato molto chiaro per 2 cose:

1- vuoi inserire codice html in una textarea?

2- vuoi sosituire TUTTO il contenuto della textarea con un nuovo contenuto oppure fare un parsing del contenuto della textarea come se fosse VERO html?

**essezeta** · 24-01-2009, 01:12

cerco di spiegare meglio...
tagliando il mio esempio...

ho questa textarea:

<textarea>
<div id="PRIMO">contenuto</div>
<div id="SECONDO">contenuto</div>
</textarea>

vorrei prendere
<div id="PRIMO">contenuto</div>

e sostituire il suo contenuto con quello di questo div
<div id="TERZO">NUOVO contenuto</div>

:::::::::::::::::::::::::::::::::::::::::::::::::: ::::

però forse ho trovato una soluzione...
questa:

codice:

<div id="div1"> contenuto 1 </div>
<div id="div2"> contenuto 2 </div>

<script type='text/javascript'>

var div1 = document.getElementById('div1')
var div2 = document.getElementById('div2')

function swapdDivs(){
var temp = div2.innerHTML
div2.innerHTML = div1.innerHTML
div1.innerHTML = temp
}


</script>
cambia

Il problema è ora questo:
se <div id="div2"> contenuto 2 </div> è all'interno di una textarea la funzione non lavora...
vorrei che mi funzionasse anche così:

codice:

<div id="div1"> contenuto 1 </div>
<TEXTAREA><div id="div2"> contenuto 2 </div></TEXTAREA>

<script type='text/javascript'>

var div1 = document.getElementById('div1')
var div2 = document.getElementById('div2')

function swapdDivs(){
var temp = div2.innerHTML
div2.innerHTML = div1.innerHTML
div1.innerHTML = temp
}


</script>
cambia

**dottwatson** · 24-01-2009, 18:57

non puoi pretendere di parsare il contenuto di una textarea come se fosse il DOM html

al max puoi utilizzare un div nascosto che riempirai con il contenuto della textarea da modificare tramite js (uan sorta di cache nella pagina stessa)

ecco un esempio

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
<script>
function updateTextarea()
  {
  var cache=document.getElementById('tmp_cache');
  var TxtArea=document.getElementById('contenitore');
  var newContent='ciao universo';
  cache.innerHTML=TxtArea.value;
  document.getElementById('div2').innerHTML=newContent;
  TxtArea.value=cache.innerHTML;
  cache.innerHTML="";
  }
</script>

  </head>
  <body>
<textarea id="contenitore" cols="20" rows="10">
<div id="div1">ciao mondo</div>
<div id="div2">ciao vialattea</div>
</textarea>
<input type="button" value="aggiorna" onClick="updateTextarea()">

<div id="tmp_cache" style="display: none"></div>
  </body>
</html>

**essezeta** · 24-01-2009, 21:20

grazie mille, dottwatson!!!

non puoi pretendere di parsare il contenuto di una textarea come se fosse il DOM html
al max puoi utilizzare un div...

eh già... infatti ecco come avevo risolto (facevo tutto in due div e poi con .js facevo getElementById e lo "spedivo" nuovamente nella textarea con cui poi lavoravo di POST):

codice:

<div id="divPrima"> CONTENUTI A CONTENUTI A </div>
<div id="divDopo"> CONTENUTI B CONTENUTI B </div>

<script type='text/javascript'>

var divPrima = document.getElementById('divPrima')
var divDopo = document.getElementById('divDopo')

function sostituisci(){
var temp = divDopo.innerHTML
divDopo.innerHTML = divPrima.innerHTML
divPrima.innerHTML = temp
}

</script>
sostituisci

Ma ora con il tuo metodo faccio tutto molto più in fretta...

Solo una cosa però non mi è chiara:
nel tuo script come faccio a mettere dentro newContent del markup complesso?
così sono costretto a lavorare su un'unica riga: var newContent='ciao universo';

Sarebbe corretto fare così come mostro di seguito o esiste un metodo più "ortodosso"?
Sto provando ma non ottengo risultati...

codice:

//INVECE DI    var newContent='ciao universo';
//METTO QUANTO SEGUE

var stringa = "";

stringa += "RIGA DI MARKUP";
stringa += "RIGA DI MARKUP";
stringa += "RIGA DI MARKUP";

[...]

newContent.innerHTML = stringa;

document.getElementById('div2').innerHTML=newContent;

Grazie ancora...
buona serata...

**dottwatson** · 24-01-2009, 22:39

purtroppo con js non ci sono alternative.. questo perchè il linguaggio considera terminatore di riga il ritorno a capo....

a menochè no utilizzi un altro elemento nella pagina (es. un'altra textarea) e poi ne penschi il contenuto e lo passi alla funzione...

**essezeta** · 25-01-2009, 01:28

capisco...

mi viene però da ipotizzare...

...sempre in riferimento al tuo script...

se faccio così
var newContent='<? include("miofile.html");?>';
lo script non lavora perché l'include mi genera più righe di codice...

però potrei fare così
var newContent='<? include("miofile.html"?>';
e poi al momento in cui spedisco il contenuto alla textarea gli faccio interpretare una sorta di htmlentities...

Non so dirla correttamente... ma spero di aver fatto capire l'ipotesi...
giusto per valutare insieme a chi è moolto più competente di me la fattibilità...

grazie ancora dell'attenzione...
Buona notte a chi va a letto

e buona bevuta a chi va fuori...

- birraaaaa

**dottwatson** · 25-01-2009, 04:39

se puoi utilizzare un div come cache transitoria, potrai utilizzare anche un div per metterci dentro il contenuto nuovo....

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

  <meta http-equiv="content-type" content="text/html; charset=windows-1250">

  <meta name="generator" content="PSPad editor,[url]www.pspad.com[/url]">

  <title></title>

<script>

function updateTextarea()

  {

  var cache=document.getElementById('tmp_cache');

  var TxtArea=document.getElementById('contenitore');

  var newContent=document.getElementById('newcontent').innerHTML;

  cache.innerHTML=TxtArea.value;

  document.getElementById('div2').innerHTML=newContent;

  TxtArea.value=cache.innerHTML;

  cache.innerHTML="";

  }

</script>



  </head>

  <body>

<textarea id="contenitore" cols="20" rows="10">

<div id="div1">ciao mondo</div>

<div id="div2">ciao vialattea</div>

</textarea>

<input type="button" value="aggiorna" onClick="updateTextarea()">



<div id="tmp_cache" style="display: none"></div>

<div id="newcontent" style="display: none">// qui ci metti l'include php //</div>

  </body>

</html>

**essezeta** · 25-01-2009, 23:45

se puoi utilizzare un div come cache transitoria, potrai utilizzare anche un div per metterci dentro il contenuto nuovo....

e già... proprio come mi ero ridotto a fare... ma con il tuo metodo salto un passaggio... e poi evito l'"effetto-toggle" che rimaneva nel mio...

doveroso ringraziamento al dottwatson...

chiudo...
buona serata

Discussione: onClick sostituire elemento in textarea scegliendolo per ID

Strumenti discussione

Ricerca discussione

Visualizza

onClick sostituire elemento in textarea scegliendolo per ID

Permessi di invio