[DOM] appendChild non va

**Al_katraz984** · 15-03-2007, 18:55

Ciao raga sono nuovo di questo forum(javascript).. stò studiando le DOM e provo a fare degli esercizietti guuardando la guida di HTML..

Ovviamente lo scriptino non funziona..

Codice PHP:


<script type="text/javascript">

function Sito() {

    if(document.getElementById && document.createElement) {

        sito = document.createElement("DIV")

        sito.setAttribute("id", "sito_toolbar")



        document.getElementById("box_toolbar").appendChild(sito)



        alert("metodo W3C supportato")



        } else {

        alert("metodo W3C non supportato")

    }

}

</script>

</head>



<body>



    <div id="testata">



        <div id="box_toolbar"></div> 



        <div id="logo"></div> 



        <div id="toolbar">

<form><ul>[*][img]images/sito.png[/img]<input type="button" value="Sito" onClick="Sito()" />

Beh ovvio ke tutto il resto della pagina c'è ma non serve.. clikkando sul bottone mi esce correttamente l'alert("metodo W3C supportato") ma non fà il resto.. cioè non crea un tag <div id="sito_toolbar"> all'interno del div "box_toolbar"...

Come mai di grazia???? l'alert l'ho messo a posta x vedere se funzia ma buhhhhh

Gentilissimi come sempre..

**fcaldera** · 15-03-2007, 19:15

veramente su firefox funziona...

ho aggiunto
sito.innerHTML = "ci sono guarda bene :-)";

prima dell'appendchild e il div c'è eccome...

P.s:
in realtà a meno che tu non vada a vederti il DOM con firebug non ti accorgerai in nessun modo della presenza di quel div, visto che non lo riempi in nessun modo né assegni uno stile particolare che lo renda visibile...

**Al_katraz984** · 16-03-2007, 11:28

Grazie mod..

Senti, se io dentro al "box_toolbar" ci devo visualizzare un bel pò di cose.. in base al bottone premuto.. E non mi sembra una soluzione molto performante quella ke stò adottando..

Anche perche dovrei scrivere funzioni lunghe un chilometro.. con aggiunte di elementi e testo..

Esiste un metodo piu semplice?? e poi quello ke stò usando è javascript vero? quindi deve essere abilitato...

Mi illuminiiiii

**emanueledg** · 16-03-2007, 13:09

La cosa più semplice è attingere agli elementi che vuoi inserire nel box dinamico da un box statico, opportunamente inserito nel documento e non visualizzato (per esempio impostando la proprietà CSS display: none;").

Poi dai a JavaScript il compito di inserire il contenuto al verificarsi dell'evento desiderato:

codice:

<html>
<head>
<title>JS labz</title>
<script language="javascript" type="text/javascript">
<!--
function insertContent() {
document.getElementById('target').innerHTML = document.getElementById('source').innerHTML;

}
//-->
</script>
</head>
<body>

<div id="target">Questo è il layer "target", in cui visualizzare il 
contenuto nascosto del layer "source".</div>

Insert content

<div id="source" style="display: none;">
Contenuto del layer "source", pieno di codice da far visualizzare nel layer "target"...

etc etc etc...</div>

</body>
</html>

Nota: la proprietà innerHTML è una proprietà di lettura e scrittura; l'ho usata per brevità ed è molto comoda ma non è conforme agli standard W3C; inizialmente era una feature proprietaria inventata da Microsoft, poi però la sua implementazione si è rapidamente estesa anche agli altri browsers.
Qui hai una accesa discussione sull'utilizzo della proprietà innerHTML invece dei metodi corretti del DOM.

**Al_katraz984** · 16-03-2007, 17:10

ma metti caso ke il div "target" debba mostrare molti, diciamo, "figli".. xke i bottoni sono 8.. e ogni bottone mostrera delle funzionalità diverse, sempre all'interno dello stesso layer o div "target"..

La soluzione più pratica quale sarebbe?? xke con il php di solito uso gli include ma di javascript ne conosco poco..

Grazie x le risp..

**emanueledg** · 16-03-2007, 18:08

Scusa qual è il problema? Dentro al layer "source" ce ne puoi mettere 100 di bottoni e di qualsiasi altra cosa tu voglia, con o senza PHP...
Il layer source è un normalissimo layer html che può contenere tutti gli oggetti che vuoi.

Codice PHP:


<div id="source" style="display: none;">

Contenuto del layer "source", pieno di codice da far visualizzare nel layer "target"...


etc etc etc...

<?php



for ($i = 1; $i <= 100; $i++) {

    echo '<input type="button" id="input_$i" value="Button #$i">
\n';

}

?>

</div>

La proprietà innerHTML accede a tutto il contenuto del layer.

**Al_katraz984** · 16-03-2007, 19:40

:master: non ci siamo capiti..

allora metti caso.. io ho un layer con 8 pulsanti in base al pulsante premuto, nel layer "schermo" devo far vedere del codice abbastanza complicato.. es:

pagina principale:

Codice PHP:


<div id="pulsanti">

<input type="button"  onClick="blocco1"> 

<input type="button"  onClick="blocco2"> 

</div>





<div id="schermo">

</div>

blocco1:

Codice PHP:




qualcosa</p>

[url="qualcosa"][/url]

<h1>titolo</h1>

blocco2:

Codice PHP:


<h3>titolo</h3>

<form>

</form>



nota</p>

Vediamo se mi spiego.. allora io devo far apparire all'interno di "schermo" in base alla chiamata il blocco di pertinenza.. Ora qui i blocchi sono ridotti al minimo, metti conto ke sono molto più complessi, come faccio ad inserirli?? è possibile richiamarli da file.. mmh se sei cosi gentile da spiegarmi il meccanismo.. o magari indicarmi qlche link utile..

Thankss

**emanueledg** · 16-03-2007, 19:48

codice:

<html>
<head>
<title>JS labz</title>
<script language="javascript" type="text/javascript">
<!--
function insertContent(source) {
document.getElementById('target').innerHTML = document.getElementById(source).innerHTML;

}
//-->
</script>
</head>
<body>

<div id="target">Questo è il layer "target", in cui visualizzare il 
contenuto nascosto del layer sorgente passato alla funzione.</div>

Visualizza blocco 1

Visualizza blocco 2



<div id="blocco_1" style="display: none;">
Ciao, io sono il blocco 1!
</div>

<div id="blocco_2" style="display: none;">
Ciao, io sono il blocco 2!
</div>



</body>
</html>

**Al_katraz984** · 16-03-2007, 20:48

Ok ora ci siamo..

:master: ci sono problemi se utilizzo un CSS esterno?? e sarebbe possibile mettere i blocchi in un file esterno?? la cosa funziona meglio con xml e ajax??

Scusa le domande magari inutili ma proprio di ste cose nn capisco niet..

Grrazzzieee

**emanueledg** · 16-03-2007, 21:06

Se metti le dichiarazioni dei fogli di stile di quei blocchi in un css esterno Javascript non le legge.
In questo caso però non credo sarebbe un problema, perché il valore di display verrebbe sovrascritto (== riassegnato) anche se non precedentemente letto da Javascript, comunque provare non costa nulla.

Mettere i blocchi in un file esterno? Se per file esterno intendi un file incluso con inlcude() o require_once() di php, a Javascript non interessa, perché il documento finale compilato dal modulo PHP è un unico documento.
Se intendi un file txt (o altre estensioni) allora lo puoi aprire e leggere con Javascript senza Ajax (tutto in una volta), ma solo se il file da leggere è nello stesso dominio del documento che richiama l'operazione (la cosiddetta norma "della stessa origine"), altrimenti Javascript non lo apre (vedi privilegi UniversalBrowserRead e UniversalBrowserWrite).

Ajax serve per lanciare chiamate asincrone, ovvero chiamate http successive al caricamento del documento, e questo potrebbe essere utile se la mole di tutti i dati da inserire nel target layer è alta e decidi di differire il caricamento dei dati, richiamando volta per volta solo quelli che ti interessano. Chiaramente a tutto questo aggiungi i rischi di usare Ajax, visto che le chiamate http possono essere intercettate, e con Ajax queste chiamate tra un client e il server aumenta rispetto al metodo classico delle pagine statiche.

Discussione: [DOM] appendChild non va

Strumenti discussione

Ricerca discussione

Visualizza

[DOM] appendChild non va

Permessi di invio