Newsgroup: it.comp.lang.javascript
Titolo: Aggiungere codice html

Salve a tutti,
innanzi tutto volevo specificare il fatto che io di javascript ne so
veramente ben poco.
Per esercitarmi un po sto facendo un form di una ipotetica pizzeria a
domicilio.
Le pizze ordinabili sono presenti in un database Mysql.
Per prendere i dati e poi utilizzarli li ho prima presi normalmente con
php e li ho poi messi in un array javascript, cosi:
<select name="selectpizza">
       <script language="JavaScript" type="text/javascript">
        var ArraySelectPizza = new Array()
         ArraySelectPizza = [
          <?php
           $query = mysql_query("SELECT * FROM pizza ORDER BY
pizza_nome");
           while ($pizza = mysql_fetch_row($query)) {
            echo "['<option value=\"$pizza[0]\">$pizza[1]</option>'] ,
\n";
           }
          ?>
         ]
        for  (i = 0; i < ArraySelectPizza.length; i++) {
         document.write (ArraySelectPizza[i]);
         }
       </script>
    </select>
ho copiato il contenuto in un array javascript perche' vorrei fare
questa cosa: alla pressione di un pulsante vicino, qualcosa tipo
"Aggiungi nuova pizza" vorrei che comparisse una nuova riga nella
tabella che mi ristampa nuovamente la select con tutti il contenuto. Se
non lo avessi copiato in un array sarebbe stato impossibile con php (a
meno di non ricaricare la pagina)
Ho provato ad aggiungere nuovo codice usando semplicemente una
document.write, ma ovviamente non funziona.
Potrei fare tutto in php, ma evito per due motivi:
1 - voglio prendere pratica con javascript;
2 - non vorrei caricare ogni volta la pagina...
Qualcuno sa aiutarmi?
Un saluto e grazie,
Dario

 ha scritto nel messaggio 
news:gpm4p0$qq6$1...@news.motzarella.org...

presumo tu sia nella parte admin del sito. dove il pizzaiolo deve inserire 
un nuovo tipo di pizza.
se vuoi evitare di ricaricare la pagina( non si capisce che fastidio dia la 
cosa) devi utilizzare ajax(un mix di javascript e di html). Solo in questo 
modo puoi ottenere quello che vuoi. se cerchi con google trovi molto su cui 
studiare
ciao 

 ciao 
Innanzi tutto grazie delle risposta.
io mi riferisco all'inserimento dell'ordine:
la persona al telefono seleziona dalla select il tipo di pizza da
ordinare e la quantita. Se, per esempio l'ordine e' di due margherite e
una boscaiola, una volta inserite le due margherite, cliccando su
aggiungi deve comparire un nuova select...
si lo so che nn e' un fastidio ma lo vorrei fare in javascript giusto
per esercizio, visto che in php gia lo so fare.
Credevo che in javascript fosse gia possibile, senza ricorrere ad ajax.
Iniziero' a guardarmi la doc di ajax....
grazie dell'aiuto!

 ciao 
Innanzi tutto grazie delle risposta.


 grazie dell'aiuto!


non proprio...
questo [1] e' uno screenshot della pagina...cliccando su quel pulsante
aggiungi pizza deve comparire una nuova riga identica a quella sopra
(tranne per il pulsante rimuovi, che deve essere acceso)

 (tranne per il pulsante rimuovi, che deve essere acceso)
ehm...scusate il doppio post...ho scordato di linkare l'immagine...
[1] 
http://g.imagehost.org/view/0672/Schermata

 wrote in news:gpod00$ak9$1
@
news.motzarella.org
:


On 17 mar 2009, you wrote in it.comp.lang.javascript:
scusate x l'aggiunta vuota!!! 
Listruzione x aggiugnere html da javascript è document.getelementbyid
('div_name').innerHtml="<a href='#'>link</a>";<==devi inserire qui il 
codice html che ti crea i controlli(textbox bottoni ecc..) che ti servono
div_name è l'id del div nel quale vuoi aggiungere html
ciao!!


On 17 mar 2009, you wrote in it.comp.lang.javascript:
Listruzione x aggiugnere html da javascript è document.getelementbyid
('div_name').innerHtml="<a href='#'>link</a>";<==devi inserire qui il 
codice html che ti crea i controlli(textbox bottoni ecc..) che ti servono
div_name è l'id del div nel quale vuoi aggiungere html
ciao!!


 [1]
http://g.imagehost.org/view/0672/Schermata
Puoi farlo benissimo in javascript, ti segnalo un plugin di jquery che
ti permette di realizzarlo velocemente:
http://www.texotela.co.uk/code/jquery/select/

 ciao!!
Scusami, non sono sicuro di aver capito:
devo mettere il blocco di istruzioni subito dopo </a> ?

Oreste wrote:

mi sono spulciato il sorgente del plugin che mi hai linkato, leggendo i
commenti di ogni funzione non ne trovo una proprio che aggiunge una
riga a una tabella, pero' ne ho trovate veramente molte altre
interessanti tipo quella di aggiungere campi all'interno di una select o
ci copiare il contenuto da una select all'altra...
su 
html.it
 ho trovato questo [1] script. Il contenuto della cella
l'autore lo mette in questo modo:
 td1.appendChild(document.createTextNode("colonna 1"))
ho provato a mettere li dentro l'array con le select non mi interpreta
l'html...se provo con una document.write invece mi sovrascrive la pagina
[1]
http://javascript.html.it/script/vedi/665/aggiungere-riga-ad-una-tabella/


[cut]
Ciao, scusa, ti copio un po' di codice solo da valutare per le select e le 
tabelle. Naturalmente puoi mettere tutti i controlli che ti servono, come 
cancellare una riga dalla tabella, giusto per esempio. Questa potrebbe 
essere solo una base di studio.
Qualche commento, soprattutto le critiche, sono molto ben accette, grazie.
Felice programmazione a tutti
Max
Ecco il codice:
-------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
">
<head>
  <title>PIZZE!!!</title>
 <script type="text/javascript">
  function mx_newEl(tipo,par,style){
   var x=document.createElement(tipo);
   for(var c in par){x[c]=par[c];}
   for(var c in style){x.style[c]=style[c];}
   return(x);
  }
  function mx_insertCell(tbRow,par,style){
   var cell=tbRow.insertCell(tbRow.cells.length);
   for(var c in par){cell[c]=par[c];}
   for(var c in style){cell.style[c]=style[c];}
  }
  //
  function myPage(){
   document.body.style.textAlign="center";
   document.body.style.fontFamily="Arial";
   document.body.stylefontSize="12px";
   document.body.style.background="#353739";
   var 
divMain=mx_newEl("div",{},{position:"relative",width:"800px",height:"450px",background:"#dddddd",color:"darkblue",border:"3px 
outset #aaaaaa"});
   document.body.appendChild(divMain);
   var 
selPizza=mx_newEl("select",{name:"tipopizza"},{position:"absolute",top:"50px",left:"50px",width:"180px"});
   divMain.appendChild(selPizza);
   var aPizze=[["Margherita",4.50],["Napoli",5.00],["Prosciutto",5.50],["4 
Stagioni",6.50]];
   var aOpts=[];
   for(pizza in aPizze){
    aOpts[pizza]=mx_newEl("option",{text:aPizze[pizza][0],value:aPizze[pizza][1]},{});
    try {selPizza.add(aOpts[pizza],null); // standards compliant
    }
    catch(ex) {selPizza.add(aOpts[pizza]); // IE only
    }
   }
   var 
inpQta=mx_newEl("input",{type:"text",value:"1"},{position:"absolute",top:"50px",left:"300px",width:"40px",textAlign:"right"});
   divMain.appendChild(inpQta);
   var 
btAdd=mx_newEl("input",{type:"button",value:"Aggiungi",onclick:addRow},{position:"absolute",top:"50px",left:"400px",width:"70px",textAlign:"center",fontFamily:"Arial,Verdana",fontSize:"12px"});
   divMain.appendChild(btAdd);
   function addRow(){
    var newRow=tbOrd.insertRow(tbOrd.rows.length);
    mx_insertCell(newRow,{innerHTML:selPizza.options[selPizza.selectedIndex].text},{textAlign:"left"});
    mx_insertCell(newRow,{innerHTML:selPizza.options[selPizza.selectedIndex].value+" 
?"},{textAlign:"right"});
    mx_insertCell(newRow,{innerHTML:inpQta.value},{textAlign:"right"});
    mx_insertCell(newRow,{innerHTML:(selPizza.options[selPizza.selectedIndex].value*inpQta.value)+" 
?"},{textAlign:"right"});
   }
   divMain.appendChild(mx_newEl("hr",{},{position:"relative",top:"100px"}));
   var 
tbOrd=mx_newEl("table",{},{position:"relative",top:"110px",width:"800px",border:"1px 
solid #969696"});
   divMain.appendChild(tbOrd);
  }
 </script>
</head>
<body onload="myPage()">
</body>
</html> 

No mi sono spiegato male ...:
dopo il .innerHtml= devi racchiudere tra doppi apici l'html che genera la 
riga di cui hai bisogno , nell'esempio che ti ho mostrato prima aggiungi 
semplicemente un link ti ho scritto un esempio in cui aggiungi una textbox 
e un button ogni volta che clicchi su Aggiungi
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
" >
<head>
    <title>Untitled Page</title>
    <script type ="text/javascript" >
    function AddRow()
 
    {
        var n= document.getElementById("cont").value;
		var ToWrite="<table>";
 
 
        for(i=0;i<=n;i++)
        {
 
			ToWrite = ToWrite + "<tr><td><input id='Text" + i + "' 
type='text' /><input id='Button" + i + "' type='button' value='button' />
</td></tr>"
		}
 
		ToWrite=ToWrite + "</table>";
		document.getElementById("Contenitore").innerHTML=ToWrite;
		var tmp=parseInt(n);
 
		tmp=tmp+1;
        document.getElementById("cont").value= tmp;
    }
    </script>
</head>
<body>
<a href ="#"  onclick ="javascript:AddRow();">Aggiungi</a>
<br />
<input id="cont" type="text"  value ="1"/>
<div id="Contenitore">
</div>
</body>
</html>


ringrazio TheBest e MaxDragstar per il codice che mi avete passato!!
Stasera li provo e vi faccio sapere...
grazie ancora!!