Problema con document.createElement()

**maggy** · 10-08-2007, 11:43

Buongiorno a tutti.
Innanzitutto premetto di essere parecchio incapace per quanto riguarda js...

Il problema.
Sto creando un form in HTML e vorrei inserire un bottone che abbia un evento onclick abbinato in modo da inserire un campo input. Mi serve perchè non conosco a priori il numero di input necessari.

Io ho risolto così:

Codice PHP:


<html>

<head>

</head>

<script type="text/javascript">

var my_div = null;

var newInput = null;

var i = 1;



function addData()

{

 

  newInput = document.createElement("input");

  newInput.setAttribute('name','data'+i);

  newInput.setAttribute('type', 'text');



  my_div = document.getElementById("org_div");

  document.body.insertBefore(newInput, my_div);

  

  document.getElementById('numero').value=i;

  i++; 

  

}





    

</script>



<body>

<input type="button" onclick="addData()" />

<input type="hidden" value="1" name="numerodidate" id="numero" />

<div id='org_div'> I nuovi input si creano SOPRA questo div..</div>

</body>

</html>

Bene.
Questo codice COSI' COM'E' funziona come vorrei.
Se lo incollo nella pagina del sito in cui effettivamente mi serve, bhe smette di funzionare.

Ho pensato subito che andasse in conflitto con altri script (ho tiny_mce.js ed un altro fatto in casa per i menu a tendina...), ma anche togliendoli, nulla.
Se vi serve, vi posto il codice della pagina "più complessa"...
Qualcuno ha qualche idea?

Grazie mille in anticipo!!

mag

**Xinod** · 10-08-2007, 12:04

il problema e' in realta' l' insertBefore:

finche' hai questo xhtml funziona, perche' org_div/my_div e' figlio diretto del body
basta un div a contenere il tutto e gia' my_div non e' piu' figlio di body

quindi se non vuoi usare appendChild e aggiungere i nuovi campi prima di org_div diventa
my_div.parentNode.insertBefore(newInput, my_div);

ciao

**Xinod** · 10-08-2007, 12:06

ah, in xhtml gli input esistono solo in un <form>
quindi mantieni correttezza formale anche se aggiungi i campi dinamicamente, raccogliendo tutti gli elementi di un form in un <form>

**maggy** · 10-08-2007, 13:04

Grazie mille!!!

Aggiungendo piccole parti di html una alla volta avevo capito che riguardava qualche div, ma essendo completamente impedita in js, mi mancava la soluzione!!
Ora ho risolto!
Grazie ancora.

Sìsì, quella è solo una pag di prova, non ho messo il tag form per semplificare al massimo e vedere se funzionava

**maggy** · 18-08-2007, 19:24

Ri-uppo il thread perche ho di nuovo problemi...

Alla fine ho "prodotto" questo script:

codice:

var my_div = null;
var newInput = null;
var newImg = null;
var newDiv = null;
var i = 2;

function addData()
{
 
  newInput = document.createElement("input");
  newInput.setAttribute('name','data'+i);
  newInput.setAttribute('class', 'datechooser');
  newInput.setAttribute('id','datetime'+i);
  newInput.setAttribute('type', 'text');
  
  
  newImg = document.createElement("img");
  newImg.setAttribute('src','calendar.gif');
  newImg.setAttribute('onclick','showChooser(this, \'datetime'+ i +'\', \'chooserSpan'+ i +'\', 1950, 2010, Date.patterns.ISO8601LongPattern, true);');
  newImg.setAttribute('class','calendaricon');
  
  newDiv = document.createElement("div");
  newDiv.setAttribute('id','chooserSpan'+i);
  newDiv.setAttribute('class','dateChooser select-free')
  newDiv.setAttribute('style', 'display: none; visibility: hidden; width: 160px;');

  my_div = document.getElementById("org_div1");
 	
  my_div.parentNode.insertBefore(newInput, my_div); 
  my_div.parentNode.insertBefore(newImg, my_div); 
   my_div.parentNode.insertBefore(newDiv, my_div); 
  document.getElementById('numero').value=i;
  i++; 
  
};

Funziona alla perfezione. Su firefox, però.
Oggi stavo testando il sito su IE e sembrano esserci dei problemi... Il DOM Inspector vede un codice che non è quello che vorrei: su firefox il DOM vede:

codice:

<input id="datetime2" name="data2" type="text" class="datechooser" />
	[img]calendar.gif[/img] 
	<div id="chooserSpan2" class="dateChooser select-free" style="display: none; visibility: hidden; width: 160px;"></div>

Menrte su IE7:

codice:

<input id=datetime2 class="datechooser">
[img]calendar.gif[/img]
<div id=chooserSpan2 class="dateChooser select-free"></div>

Qualche idea del perche non appaiano gli attributi?
In più, non sono certa sia collegato, ma non saprei trovarne altre ragioni, lo script showChooser NON funziona su IE.

Ringrazio in anticipo che mi dedicherà qualche minutino aiutandomi...

ciaociao

mag

edit: sto uploadando su un server, così potrò passarvi il link, se serve...

**Xinod** · 18-08-2007, 21:36

quando appendi elementi via DOM, ma anche se li inietti via innerHTML, non puoi aspettarti che il browser scriva precisamente quello che tu dici, il browser si intromette per rendere la parte inserita il piu' accettabile possibile, dal proprio punto di vista ovviamente...

il DOM non e' il markup XHTML

tu comunque sbagli settando come attributi l' onclick, il class e lo style

se setti class, devi settare anche className per IE

per lo style: devi settare una per una le proprieta'
newDiv.style.display='none';
newDiv.style.visibility='hidden';
newDiv.style.width='160px';
solo in IE potresti evitare con
newDiv.style.cssText="{display: none; visibility: hidden; width: 160px;}"
ma dal momento che non ci sono alternative cross-browser ti e' di poca utilita'

per i gestori eventi il discorso e' un po' piu' complesso...

**Xinod** · 18-08-2007, 21:52

ti faccio un esempio il piu' semplice possibile, non dovresti trovare difficile ricondurlo alla tua situazione

primo caso: basta passare "this"

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/JavaScript">
/*<![CDATA[*/
var n=0;
window.onload=aggiungi;
function aggiungi(){
	var inp=document.createElement('input')
	inp.setAttribute('type','button');
	inp.setAttribute('name','butt_'+n);
	inp.setAttribute('value',n);
	inp.onclick=function(){allerta(this)};
	document.forms[0].appendChild(inp);
	n++
}
function allerta(el){
	alert('name:'+el.name);
}
/*]]>*/
</script>
</head>
<body>
aggiungi
<form>
</form>
</body>
</html>

secondo caso: ti serve passare anche "n"

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/JavaScript">
/*<![CDATA[*/
var n=0;
window.onload=aggiungi;
function aggiungi(){
	var inp=document.createElement('input')
	inp.setAttribute('type','button');
	inp.setAttribute('name','butt_'+n);
	inp.setAttribute('value',n);
	inp.onclick=function(){allerta(this,n)};
	document.forms[0].appendChild(inp);
	n++
}
function allerta(el,n){
	alert('name:'+el.name+' num:'+n);
}
/*]]>*/
</script>
</head>
<body>
aggiungi
<form>
</form>
</body>
</html>

provalo e il risultato non sara' quello che ti aspetti

quando richiami la funzione anonima onclick n e' fuori scope, e' una variabile globale che oramai ha come valore l' ultimo ad essa attribuito
e quello verra' riportato nella funzione
per mantenerla in scope io conosco questo sistema

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/JavaScript">
/*<![CDATA[*/
var n=0;
window.onload=aggiungi;
function aggiungi(){
	var inp=document.createElement('input')
	inp.setAttribute('type','button');
	inp.setAttribute('name','butt_'+n);
	inp.setAttribute('value',n);
	keepRef(inp,n);
	document.forms[0].appendChild(inp);
	n++
}
function keepRef(el,n){
	el.onclick=function(){allerta(el,n)};
}
function allerta(el,n){
	alert('name:'+el.name+' num:'+n);
}
/*]]>*/
</script>
</head>
<body>
aggiungi
<form>
</form>
</body>
</html>

ciao

**maggy** · 19-08-2007, 16:32

Innanzitutto grazie mille della tua pazienza e disponibilità!!

Ho capito perfettamento ciò che dici, ma il mio problema è differente.
Mi son spiegata male.

Per prima cosa, riguardo ad "n" la variabile, a me serve appunto che venga trasferito l'ultimo valore ad essa attribuito, quindi, il mio script, a quel proposito funziona correttamente.

Andando per gradi, la prima cosa che mi servirebbe risolvere, riguarda il setAttribute.
Nonostante io voglia che un determinato campo input abbia vari attributi (primo fra tutti quello di type, e quello name, che sono essenziali), IE (6 oppure 7) attribuisce SOLO id e class, nessuno degli altri....

la pagina è questa:
http://www.afpa.it/flag/admin/page.p...&action=insert
(il sito è mooolto in beta)

Posso approfittare della tua disponibilità e chiederti se pensi che io possa risolvere in qualche modo?
Su firefox funziona, e mi sembrava fosse una soluzione adatta.
Grazie ancora!!!

Discussione: Problema con document.createElement()

Strumenti discussione

Ricerca discussione

Visualizza

Problema con document.createElement()

Permessi di invio