Creare bottoni dinamici Javascript

[Gogeta Ssj]

Avrei come necessità quella di creare una sorta di bottoni dinamici, ovvero, nella mia finestra di popup, l'utente inserisce le proprie richieste, successivamente dovrei far visualizzare i risultati che sono delle parole singole. Come potrei rappresentarle?? Io avevo in mente di creare dei bottoni uno per ogni voce in modo che poi l'utente sceglie quella che vuole , ma non so come fare. Voi cosa mi suggerite???

[Bl@ck]

se è semplicemente una selezione multipla metti delle checkbox e sotto un bottone per fare una submit della form.

qui c'è un modo veloce per aggiungere più checkbox a runtime con il javascript
http://viralpatel.net/blogs/2009/03/...avascript.html

altrimenti se usi dei linguaggi "server" tipo java o c# la cosa diventa ancora più semplice, li ti basta fare un ciclo for each a runtime ti aggiunge le checkbox aggiuntive.

[Gogeta Ssj]

Devo spulciare un pò il link che mi hai inviato, cmq sto usando solo javascript e html per creare la pagina. Cmq non so se usi firefox come browser ed hai l'estensione per delicious che esiste anche per Internet Explorer. Purtroppo non riesco a trovare, ma credo non lo abbiano rilasciato, il sorgente. Vorrei che i miei risultati si vedessero come la sezione tags di quella estensione, dove ogni parola che rappresenta un tag presente nel link che gli si passa, può essere selezionata o deselezionata e a seconda che la si selezioni, la parola si colora o meno. Tra l'altro vedendola meglio questa estensione credo che le parole vengano messe in una sorta di text area ma non capisco come queste siano selezionabili e cambino a seconda se le si selezioni o meno. Non vorrei facessero uso di ajax perchè li non so proprio nulla.

[leizar]

dovrebbe bastare css e javascript per quello che dici tu. Non dovrebbe essere così difficile...

[Gogeta Ssj]

Se non lo è mi potresti dare una mano io ci sto provando da giorni ma ho notato che la text area prende le parole senza poter far in modo che esse siano selezionabili. Se hai qualke suggerimento è ben accetto.

[leizar]

guarda un pò qui.
Secondo me comunque non è il modo più veloce di fare quello che vuoi fare.
Non sono un esperto di html e js (è da parecchio che non ci lavoro), ma nell'ordine io farei così

1) creo uno stile css per i bottoni che dovrebbero rappresentare le singole parole digitate dall'utente.
2) dovrebbe esistere in js l'evento che scatta alla pressione di un tasto (qualcosa tipo keydown). Bene, controlla quando il carattere premuto corrisponde allo spazio.
3) se corrisponde allo spazio, selezioni l'ultima parola digitata dall'utente (e qui lavora di substring e robe così), e la metti da qualche parte nella pagina, magari come link ipertestuale applicandogli lo stile di cui sopra.

[Gogeta Ssj]

Non so se hai visto l'estensione di delicious per firefox. Cmq spiego meglio quello che vorrei fare. In pratica io ho creato un server che risponde in base a delle richieste. Il server risponde in xml. Ora sto creando il client che non è altro che un popup, nel quale l'utente scrive quella che è la sua richiesta . Successivamente il client interroga il server e traduce il codice xml in modo da farlo leggere comprensibilmente all'utente. Il mio problema ora è:

1. stampare i risultati che ottengo dal server nel popup, i quali li ottengo ma li riesco a stampare solo tramite delle alert di javascript, ma io vorrei invece che venissero stampati come l'estensione di delicious, dove escono come tante parole le quali sono selezionabili e deselezionabili a seconda che l'utente ci clicchi sopra;
2. far in modo che una volta che sono state selezionate, vada a modificare il codice html di un'altra pagina.

Quello che però a me interessa al momento è il primo punto.

[working_mad]

fai un passo alla volta:

1. memorizza le parole in un array
2. crea del codice html con js che sia simile più o meno a questo

<div class="parole_lolle">
  <span class="parola"><a href="Javascript:onclick_event('parola1');"> parola1 </a></span>
  <span class="parola"><a href="Javascript:onclick_event('parola2');"> parola2 </a></span>
  <span class="parola"><a href="Javascript:onclick_event('parola3');"> parola3 </a></span>
...
</div>

<script type="text/javascript">
function onclick_event(parola)
{
  //... roba da fare quando si clicca su una parola
}
</script>

ovviamente la classe "parola" la modifichi via css in modo che sia come vuoi tu

[Gogeta Ssj]

Mi sa che hai afferrato quello che mi serve. Ma hai scoperto anche un problema che ho incontrato ovvero come faccio ad assegnare a parola1 il valore del primo elemento presente nell'array??? Per la modifica in css tu intendo colore stile ecc vero??

[Bl@ck]

Se le parole sono generate dinamicamente basta concatenare al nome dell'oggetto html l'indice e poi quando vai a riprenderle con una substring lo riprendi, oppure salvi in un'array il nome dell'oggetto e come chiave metti l'indice da usare, per esempio, ma ci sono 40 mila modi per farlo.

[Gogeta Ssj]

Allora io so le parole in base alla richiesta fatta dall'utente. Poi queste parole le vado a salvare in un array. Le domande adesso sono due. La prima è che

<div class="parole_lolle">
  <span class="parola"><a href="Javascript:onclick_event('parola1');"> parola1 </a></span>
  <span class="parola"><a href="Javascript:onclick_event('parola2');"> parola2 </a></span>
  <span class="parola"><a href="Javascript:onclick_event('parola3');"> parola3 </a></span>
...
</div>

questi elementi che rappresenteranno le parole nel documento html, devono essere create sin dall'inizio????

La seconda domanda è se non è cosi come faccio a crearle dinamicamente all'interno del codice java script e come faccio ad assegnare a <a>parola1</a> il valore della mia parola presente nel primo elemento del mio array???

Forse il problema che rilevo io è che una pagina html così com'è all'inizio dove l'utente fa la ricerca, non riesce ad aggiornarsi ed inserire nella stessa pagina le parole trovate a meno che non si ricarica o sbaglio??? O cmq a meno che l'elemento all'interno della pagina già esista e quindi lo si vada a modificare. Ma creare un elemento in una pagina già esistente non so perché non mi riesce.

[Gogeta Ssj]

Sono riuscito a fare questa operazione finalmente. Adesso però chiedo come si possano rimuovere i campi aggiunti, poichè rifacendo un'altra ricerca i risultati precedenti devono sparire. Come si può fare?

[Gogeta Ssj]

fai un passo alla volta:

1. memorizza le parole in un array
2. crea del codice html con js che sia simile più o meno a questo

<div class="parole_lolle">
  <span class="parola"><a href="Javascript:onclick_event('parola1');"> parola1 </a></span>
  <span class="parola"><a href="Javascript:onclick_event('parola2');"> parola2 </a></span>
  <span class="parola"><a href="Javascript:onclick_event('parola3');"> parola3 </a></span>
...
</div>

<script type="text/javascript">
function onclick_event(parola)
{
  //... roba da fare quando si clicca su una parola
}
</script>

ovviamente la classe "parola" la modifichi via css in modo che sia come vuoi tu

Sono riuscito a creare i vari campi span dinamicamente, ma quando li creo posso impostare i campi id, name, value, ma come posso associare <a href="Javascriptnclick_event('parola3');"> ?

le istruzioni usate per creare lo span in javascript sono queste :

nuovo_elemento=document.createElement("span");
nuovo_elemento.setAttribute("id","rombo"+parseInt(document.getElementById("container1").childNodes.length+1));
nuovo_elemento.setAttribute("class","quadrato");
nuovo_elemento.innerHTML=test;
document.getElementById("container1").appendChild(nuovo_elemento);

[leizar]

scrivendo tra le virgolette il codice javascript che ti serve. Lo so, è strano all'inizio, però funziona (almeno credo ).
Devi scrivere del codice dentro al codice (Yo dawg i head you like code so...)

[Gogeta Ssj]

Ma io uso nuovoelemento.setAttribute per settare i vari campi id, name, value. Questo come lo inserisco dato che non è un campo....

cioè :

<a href="Javascriptonclick_event('parola3');"> ?

come lo inserisco e lo associo alla classe parola 3. Che attributo dovrei settare???

[leizar]

Sta nel campo href, no? Allora potresti provare qualcosa del genere:

...setAttribute("href","Javascriptonclick_event('parola3')")

[Gogeta Ssj]

Però l'href è preceduto da <a e quando e per <span ho usato createElement...

[leizar]

Il fatto che sia preceduto da <a non credo sia un problema. Set Attribute dovrebbe per l'appunto settare un attributo ad un dato valore.
Se poi riesca ad impostarlo ad un elemento appena creato via codice non so dirti, fai qualche prova...

[Gogeta Ssj]

Sono riuscito a creare il tag <a>. Ora starei gestendo la pressione ed il cambio di colore e del background-color. Vorrei però fare in modo che una volta selezionato l'elemento questo colore rimanga per indicare che l'elemento è stato selezionato. Come potrei fare?? E nel caso in cui si decida di deselezionarlo togliere quel colore ovviamente

[leizar]

Crea due stili css. Uno per il tag a premuto e uno per il tag a non premuto, a quel punto cambi la classe (se non ricordo male si chiama così) del tag al volo tramite js. Non so se sono stato chiaro...

[Gogeta Ssj]

Ecco ma come stile css tu quale suggerisci. Io ho trovato hover, ma serve quando si passa sopra al tag, active quando lo si preme, solo che una volta premuto subito dopo scompare e torna col colore originale.

[leizar]

Nono, crei due (o più) classi di stile, non per forza legati via css agli eventi hover e active del link (che sono grosso modo delle scorciatoie per gestire il cambio dei fogli di stile senza js, per i casi più semplici).
Gli eventi li gestirai tu tramite JS (su onclick tipicamente), controllando quando un link deve avere lo stile "selezionato" e quando non deve averlo più.