creare id univoci

[alex]

<div id="giu"></div>
<p id="su"></p>
<div id="cane2"></div>
<div id="cane3" />

come vedete ogni tag ha il suo id.
Adesso però tramite javascript devo creare altri tag dinamicamente, e
voglio che anche in questo caso, venisse assegnato a ognuno di essi un
id univoco (non già utilizzato da altri oggetti).

Esiste ad esempio una funzione javascript che genera id pseudo-casuali,
tipo: id1847, id65877, maria2, paolo66...

Insomma l'importante è che l'id generato non sia già usato!!!
Avete capito?

[Fred]

Il giorno sabato 26 maggio 2012 17:27:34 UTC+2, alex ha scritto:
> Adesso però tramite javascript devo creare altri tag dinamicamente, e
> voglio che anche in questo caso, venisse assegnato a ognuno di essi un
> id univoco (non già utilizzato da altri oggetti).
>
> Esiste ad esempio una funzione javascript che genera id pseudo-casuali,
> tipo: id1847, id65877, maria2, paolo66...
>
> Insomma l'importante è che l'id generato non sia già usato!!!
> Avete capito?

un ciclo con un contatore (es. i) che userai per creare il nome del tag... il prefisso sarà fisso (es. 'testid') e il contatore completerà l'id del tag ('testid' + i), il risultato finale saranno dei tag chiamati 'testid1', 'testid2' ... 'testid<n>'.

[alex]

On 26/05/2012 17:33, Fred wrote:
> un ciclo con un contatore (es. i) che userai per creare il nome del tag... il prefisso sarà fisso (es. 'testid') e il contatore completerà l'id del tag ('testid' + i), il risultato finale saranno dei tag chiamati 'testid1', 'testid2' ... 'testid<n>'.

ok, metodo manuale

[leonardo.1+++]

Quando ho dovuto fare qualcosa del genere ho usato PHP
Questo crea 100 div con 100 id diversi Mio0 - Mio1 .... Mio99
<?php
for($x = 0; $x<100; $x++)
{
?>
<div id="Mio"<?php echo $x; ?>></div>
<?php
}
?>

Leonardo

[Cristiano Larghi]

Il Sat, 26 May 2012 17:27:34 +0200, alex ha scritto:

> Esiste ad esempio una funzione javascript che genera id pseudo-casuali,
> tipo: id1847, id65877, maria2, paolo66...

Random?

<https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/
Math/random>

Generi il numero nell'intervallo a-z, e poi crei la stringa con
fromCharCode:

<https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/
String/fromCharCode>

[Fred]

:O beh, è un ciclo semplicissimo... puoi farti una funzione se vuoi farlo sembrare meno "manuale"... ma poi che sognifica manuale?! :D

[alex]

On 27/05/2012 08:56, Fred wrote:
> :O beh, è un ciclo semplicissimo... puoi farti una funzione se vuoi farlo sembrare meno "manuale"... ma poi che sognifica manuale?! :D

no niente, pensavo ci fosse una funzione ad hoc

[alex]

On 26/05/2012 19:36, leonardo.1+++ wrote:
>
> Quando ho dovuto fare qualcosa del genere ho usato PHP
> Questo crea 100 div con 100 id diversi Mio0 - Mio1 .... Mio99
> <?php
> for($x = 0; $x<100; $x++)
> {
> ?>
> <div id="Mio"<?php echo $x; ?>></div>
> <?php
> }
> ?>

????
a parte il fatto che questa cosa si può fare anche in js... comunque se
ad es. mio10 esiste già?
Viene fatto qualche controllo?
Non mi sembra...

[alex]

On 26/05/2012 21:32, Cristiano Larghi wrote:
>
> <https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/
> String/fromCharCode>

ok, l'importante però è controllare che l'id non sia già usato

[Cristiano Larghi]

getElementById restituisce null se non trova l'oggetto con l'id indicato:
<https://developer.mozilla.org/en/DOM/document.getElementById>

[leonardo.1+++]

In javascript può essere fatta in modo leggermente diverso.
Per i controlli non lo avevi chiesto, comunque se nella pagina sappiamo
già cosa c'è prima di fare i nuovi div, possiamo partire con un prefisso
al numero non esistente e non sono necessari.
Leonardo

[ZER0]

Premetto che non rispondo direttamente a te, ma più in generale al NG,
dato le risposte che hai ricevuto e che è un problema già sollevato in
passato. Inoltre non sapendo la tua casistica specifica, ignoro se
ricada in uno dei casi eccezionali che menziono sotto.

Fatta tale premessa, in JavaScript non c'è una funzione ad hoc perché né
in JS né in DOM si ha bisogno di creare id univoci. C'è stato un lungo
thread recentemente su questo NG che ha parlato anche di questo argomento.
Creare un ID univoco a runtime ha raramente senso (ovviamente ci sono
casi limite), per almeno due importanti ragioni:

1. Non puoi usarlo nei fogli di stile (è creato a runtime, non lo
conosci a priori).

2. Non puoi usarlo in JS per recuperare un elemento (è creato a runtime,
non lo conosci a priori).

Per quanto riguarda la prima ed eventualmente la seconda, potresti usare
un CSS selector che ti fa il match a livello di attributo id di uno
specifico prefisso, tipo `*[id^=myprefix]`. Ma è un operazione "costosa"
in termini di performance e puoi ottenere la stessa cosa usando una
classe CSS: `.myprefix` che è molto più performante e non ha bisogno di
incrementali a seguito; inoltre per recuperare in JS tali elementi
dovresti avere i browser che supportano tutti correttamente
`querySelectorAll`, o utilizzare librerie come Sizzle o jQuery (che usa
Sizzle) per emulare tale capacità. Ancora, le performance non sarebbero
il massimo.

Nel caso della seconda ovviamente potresti tenerti un riferimento agli
ID che stai creando a runtime in JS, in modo da usarlo poi come "indice"
per recuperare l'ID che ti serve, o scorrerli tutti. Tranne qualche
caso, anche questo ha poco senso in quanto in JS puoi tranquillamente
salvare direttamente il riferimento al nodo, esattamente come faresti
con la stringa dell'ID.

[alex]

On 27/05/2012 16:15, leonardo.1+++ wrote:
> In javascript può essere fatta in modo leggermente diverso.
> Per i controlli non lo avevi chiesto, comunque se nella pagina sappiamo
> già cosa c'è prima di fare i nuovi div, possiamo partire con un prefisso
> al numero non esistente e non sono necessari.

lo script automatizzato nn può sapere cosa c'è prima,
A limite posso specificargli l'id manualmente, passandolo ad esempio
come argomento di una function, ma è proprio questo che voglio evitare.

Voglio quindi che lo script, se lo generi da solo, e che se lo utilizzi
per gestire (in base a determinati criteri) i vari tag creati: cambio
colore, cambio testo, spostamento, ecc.

Insomma quando io, o un altro programmatore, vado ad usare quello
script, voglio solo specificare alcune cose che deve fare, senza
preoccuparmi (almeno per quanto possibile) di gestire alcune
problematiche di "basso livello" (se la deve vedere la "macchina").

Chiaro?

[alex]

On 27/05/2012 16:08, Cristiano Larghi wrote:
> getElementById restituisce null se non trova l'oggetto con l'id indicato:
> <https://developer.mozilla.org/en/DOM/document.getElementById>

e infatti, la funzione che mi sono costruito è questa

function getAvailableTagId() {
i = 1;

do {
id = 'id' + i;
if (document.getElementById(id) == null) return id;
i++;
} while (true)
}

[ZER0]

On 05/27/12 20:57 PM, alex wrote:

> Voglio quindi che lo script, se lo generi da solo, e che se lo utilizzi
> per gestire (in base a determinati criteri) i vari tag creati: cambio
> colore, cambio testo, spostamento, ecc.

In tal caso non dovresti aver bisogno di aver alcun ID. Per fare un
esempio concreto, metti caso che crei uno script di date picker, ovvero
un calendario che si apre per specificare una data, associato a un
textbox già presente, e che tu voglia che questo "componente" sia
riusabile non solo da te ma da chiunque. In questo caso lo script dovrà
creare una serie di elementi HTML che internamente sfrutterà per
comporre il calendario. Ma nessuno di questi elementi avrà un ID, il tuo
script si terrà solo un riferimento agli elementi creati, sfruttando quelli.
In questo modo non hai eventuali collisioni tra ID, puoi avere quante
istanze vuoi del date picker nella stessa pagina, eccetera.

In questo genere di cose, ovviamente, si tende a dare la possibilità
allo sviluppatore di associare un ID custom, all'elemento "contenitore",
in modo da poterci usare i CSS sopra (solitamente a livello di JS si fa
tornare un oggetto, invece).

[ZER0]

Questo non ti salva da "collisioni" future, ma solo da quelle "passate".
Se qualche elemento viene creato dinamicamente in modo successivo (o
fragment interi di HTML vengono recuperati dal server e poi "sparati" su
un elemento tramite `innerHTML`) rischi comunque di avere collisioni.
Una delle ragioni per cui non si usano tecniche del genere, non puoi mai
essere sicuro al 100% che non avrai problemi.

Inoltre, il tuo codice fa accessi al DOM inutili, e la prima regola
quando sviluppi su web è "limitare gli accessi al DOM", motivo per cui
si tende sempre a fare caching – durante lo sviluppo di pdf.js è stato
detto che "al momento l'unico modo per velocizzare gli accessi al DOM da
JavaScript, è non fare accessi al DOM".

Se con quella funzione creo quattro elementi finisco per fare un'accesso
al DOM la prima volta, due la seconda, tre la terza, quattro la
quarta... Praticamente le chiamate totali per quattro elementi sono 4!
ovvero dieci.

[alex]

On 27/05/2012 21:32, ZER0 wrote:
> riusabile non solo da te ma da chiunque. In questo caso lo script dovrà
> creare una serie di elementi HTML che internamente sfrutterà per
> comporre il calendario. Ma nessuno di questi elementi avrà un ID, il tuo
> script si terrà solo un riferimento agli elementi creati, sfruttando quelli.

aspetta, aspetta...
Dunque voglio che ad esempio venga generato questo elemento:

<div>oggi ricorda di inviare l'email</div>

Tale elemento deve sparire dopo alcuni secondi, e riapparire dopo
qualche minuto.
Non avendo un id di riferimento, come si fa ad applicare i vari metodi
per modificare la modalità di visualizzazione?
In rete ci sono molti esempi di come visualizzare/nascondere un div (o
qualunque oggetto), e mi sembra che come riferimento usino sempre
getElementById('test'); quindi secondo te c'è un altro sistema?
Quale?

[alex]

On 27/05/2012 21:44, ZER0 wrote:
> Questo non ti salva da "collisioni" future, ma solo da quelle "passate".
> Se qualche elemento viene creato dinamicamente in modo successivo (o
> fragment interi di HTML vengono recuperati dal server e poi "sparati" su
> un elemento tramite `innerHTML`) rischi comunque di avere collisioni.
> Una delle ragioni per cui non si usano tecniche del genere, non puoi mai
> essere sicuro al 100% che non avrai problemi.

vero, sto riflettendo...

[alex]

On 28/05/2012 04:24, alex wrote:
> aspetta, aspetta...
> Dunque voglio che ad esempio venga generato questo elemento:
>
> <div>oggi ricorda di inviare l'email</div>
>
> Tale elemento deve sparire dopo alcuni secondi, e riapparire dopo
> qualche minuto.
> Non avendo un id di riferimento, come si fa ad applicare i vari metodi
> per modificare la modalità di visualizzazione?
> In rete ci sono molti esempi di come visualizzare/nascondere un div (o
> qualunque oggetto), e mi sembra che come riferimento usino sempre
> getElementById('test'); quindi secondo te c'è un altro sistema?
> Quale?

aspetta, forse ci sono...
miooOgg = document.createElement()

quindi posso usare l'istanza miooOgg per applicare i vari metodi (devo
un po' studiare), giusto?

[ZER0]

On 05/28/12 5:12 AM, alex wrote:

>> <div>oggi ricorda di inviare l'email</div>

>> Tale elemento deve sparire dopo alcuni secondi, e riapparire dopo
>> qualche minuto.
>> Non avendo un id di riferimento, come si fa ad applicare i vari metodi

>> per modificare la modalit� di visualizzazione?

>> In rete ci sono molti esempi di come visualizzare/nascondere un div (o
>> qualunque oggetto), e mi sembra che come riferimento usino sempre

>> getElementById('test'); quindi secondo te c'� un altro sistema?

>> Quale?

> aspetta, forse ci sono...
> miooOgg = document.createElement()

Si, esattamente cos�.
Per lavorare sui nodi ti basta un qualsiasi metodo che ti restituisca un
riferimento al nodo, e di metodi ve ne sono diversi: `getElementById` �
solo uno dei tanti � il pi� noto, forse � ma a volte hai bisogno di
lavorare su un elemento "anonimo" che non ha ID, oppure che non puoi
saperlo a priori, oppure che dipende dalla struttura stessa dell'HTML
sul quale stai lavorando, o magari che hai appena creato � nell'esempio
sopra riportato, `createElement`.

> quindi posso usare l'istanza miooOgg per applicare i vari metodi (devo
> un po' studiare), giusto?

Esatto. Il modo in cui recuperi il riferimento al nodo HTML �
irrilevante ai fini di applicarci i vari metodi, usa quello che pi�
torna comodo in base alla tua situazione. L'importante per il browser �
avere un riferimento su cui lavorare.

[ZER0]

On 05/28/12 5:12 AM, alex wrote:

> aspetta, forse ci sono...
> miooOgg = document.createElement()

L'ho dato per scontato, ma giusto nel caso, visto che hai detto che devi
ancora studiare: ovviamente a `createElement` devi passare il tipo di
tag che vuoi creare, quindi nel caso di un `div` avresti:

var div = document.createElement("div");

E poi devi aggiungerlo al document tree, altrimenti rimane solo in
memoria. I metodi per farlo sono principalmente `appendChild`,
`insertBefore` e `replaceChild`. Nel caso tu volessi aggiungerlo in
fondo al body nel momento della creazione, sarebbe semplicemente:

document.body.appendChild(div);

Puoi trovare maggiori informazioni in merito qui:

<https://developer.mozilla.org/en/DOM/Node.appendChild>
<https://developer.mozilla.org/en/DOM/Node.insertBefore>
<https://developer.mozilla.org/en/DOM/Node.replaceChild>

[alex]

On 28/05/2012 08:22, ZER0 wrote:
> Puoi trovare maggiori informazioni in merito qui:
>
> <https://developer.mozilla.org/en/DOM/Node.appendChild>
> <https://developer.mozilla.org/en/DOM/Node.insertBefore>
> <https://developer.mozilla.org/en/DOM/Node.replaceChild>

perfetto, ma se volessi nascondere un elemento creato in precedenza, mi
conviene farlo impostando i relativi attributi (display:none) oppure si
pu� rimuovere completamente dalla struttura del documento.

Io opterei per il secondo metodo: meglio eliminare del tutto invece di
lasciare elementi invisibili/inutilizzati (zoombie, fantasmi).
Sei d'accordo?
Se si, dovrei usare il metodo document.body.removeChild(div). Non so se
tale metodo esiste, adesso mi documento ;)

[ZER0]

On 05/28/12 13:16 PM, alex wrote:

> perfetto, ma se volessi nascondere un elemento creato in precedenza, mi
> conviene farlo impostando i relativi attributi (display:none) oppure si

> può rimuovere completamente dalla struttura del documento.

Puoi fare entrambe le cose, ma se vuoi "nasconderlo" è bene optare per
la prima. Se invece vuoi "eliminarlo" allora è bene optare per la seconda.

Nasconderlo, significa che probabilmente avrai ancora bisogno di tale
elemento, e quindi li andrai a visualizzare poi successivamente.

Eliminarlo, significa che ha svolto il suo compito e non ne avrai più
bisogno finché non ricarichi la pagina o giù di lì.

Queste come linee guida, ovviamente come sempre ci sono eccezioni.
Qualche esempio? Un elemento che contiene un messaggio che appare quando
certe condizioni si verificano, lo nasconderai e visualizzerai in base a
tali condizioni.
Mentre invece, se visualizzi uno stream di informazioni uniche – ad
esempio, messaggi da Twitter – aggiungerai elementi fino a che non
inizierai a rimuovere gli elementi più vecchi (onde evitare che la
pagina si sovraffolli: ovviamente più elementi in una pagina ci sono più
è lenta).

> Io opterei per il secondo metodo: meglio eliminare del tutto invece di
> lasciare elementi invisibili/inutilizzati (zoombie, fantasmi).
> Sei d'accordo?

Leggi su. Dipende dalle casistiche, a volte è corretto fare così a volte
meno.

> Se si, dovrei usare il metodo document.body.removeChild(div). Non so se
> tale metodo esiste, adesso mi documento ;)

Si, esiste:

<https://developer.mozilla.org/En/DOM/Node.removeChild>

Attenzione che il metodo, così come i precedenti, lavora sul nodo
parente, quindi devi sempre usare il medesimo. Se per qualche motivo non
sai a priori qual'è il nodo parente, puoi usare la proprietà `parentNode`:

<https://developer.mozilla.org/En/DOM/Node.parentNode>

Vi è un chiaro esempio proprio su `removeChild` nella pagina.