Pagina di ricerca

**drakend** · 09-08-2007, 17:58

Salve,
sto realizzando una pagina di ricerca per un'applicazione web scritta in php... sto incontrando un po' di problemi con Javascript però. Ho pensato di realizzare una pagina che visualizzi dinamicamente i vari campi da usare così che l'utente possa perfezionare la ricerca come crede. Il problema è che questo script funziona PERFETTAMENTE dentro Firefox, mentre non va affatto dentro IE ( :rollo: ).
Il codice della pagina è questo:

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ricerca</title>
<script type="text/javascript">
<!--

function addEvent(Parametro)
{
    var ni = document.getElementById('myDiv');
    var numi = document.getElementById('theValue');
    var num = parseInt(numi.value) + 1;
    numi.value = num;
    var divIdName = "my" + num + "Div";
    var newdiv = document.createElement('div');
    newdiv.setAttribute("id",divIdName);
    var TipoRicercaParte1 = "<select id=\"TipoRicerca";
    var TipoRicercaParte2 = "\"><option value=\"FraseEsatta\" selected>Frase esatta</option><option value=\"FraseParziale\">Frase parziale</option><option value=\"NOT\">NOT</option></select>";
    var OperatoreParte1 = "<select id=\"Operatore";
    var OperatoreParte2 = "\"><option value=\"AND\" selected>AND</option><option value=\"OR\">OR</option></select>";
    
    if(Parametro == "Cognome")
        var CodiceHTML = "<div style=\"position:relative;width:600px;float:left;\"><div style=\"position:relative;width:100px;float:left;\">Cognome:</div><div style=\"position:relative;left:100px;width:500px;float:left;\"> " + TipoRicercaParte1 + "Cognome" + num + TipoRicercaParte2 + "<input type=\"text\" id=\"Cognome" + num + "\" />" + OperatoreParte1 + "Cognome" + num + OperatoreParte2 + "<a href=\"javascript:;\" onclick=\"removeEvent(\'" + divIdName + "\')\"><img src=\"images/delete.png\" alt=\"Cancella campo\" border=\"0\"/></a></div></div>

";
    else if(Parametro == "Nome")
        var CodiceHTML = "<div style=\"position:relative;width:600px;float:left;\"><div style=\"position:relative;width:100px;float:left;\">Nome:</div><div style=\"position:relative;left:100px;width:500px;float:left;\"> " + TipoRicercaParte1 + "Nome" + num + TipoRicercaParte2 + "<input type=\"text\" id=\"Nome" + num + "\" />" + OperatoreParte1 + "Nome" + num + OperatoreParte2 + "<a href=\"javascript:;\" onclick=\"removeEvent(\'" + divIdName + "\')\"><img src=\"images/delete.png\" alt=\"Cancella campo\" border=\"0\"/></a></div></div>

";
        
    newdiv.innerHTML = CodiceHTML;
    ni.appendChild(newdiv);
}

function removeEvent(divNum)
{
    var d = document.getElementById('myDiv');
    var olddiv = document.getElementById(divNum);
    d.removeChild(olddiv);
}

//-->
</script>
</head>

<body>
	<div style="position:absolute;top:50px;left:50px;">
	    <input type="hidden" value="0" id="theValue" />
        Campo da aggiungere:
        <select id="CreaElemento">
            <option selected>Scegli un'opzione</option>
            <option onClick="addEvent('Cognome');">Cognome di un autore</option>
            <option onClick="addEvent('Nome');">Nome di un autore</option>
        </select>
    </div>
    <form action="ricerca2.php" method="post" name="thisform">
	    <div id="myDiv" style="position:absolute;top:100px;left:50px;width:600px;"> </div>
    </form>
</body>
</html>

Qualcuno mi può indicare una soluzione?

**cavicchiandrea** · 09-08-2007, 18:10

Premesso che do per scontato che la funzione vada bene, a prima vista l'errore potrebbe essere qui:

codice:

<select id="CreaElemento">
            <option selected>Scegli un'opzione</option>
            <option onClick="addEvent('Cognome');">Cognome di un autore</option>
            <option onClick="addEvent('Nome');">Nome di un autore</option>
        </select>

Nel senso che le option non "gestiscono" l'evento onclick prova cosi:

codice:

<select id="CreaElemento" onchange="if(this.selectedIndex!=0)addEvent(this.options[this.selectedIndex].value)">
            <option selected>Scegli un'opzione</option>
            <option value="Cognome">Cognome di un autore</option>
            <option value="Nome">Nome di un autore</option>
        </select>

**drakend** · 09-08-2007, 18:30

Come non lo gestiscono? Ho implementato lo stesso evento in altre parti dell'applicazione sulle option di una select e va senza problemi sia in IE che in Firefox.
Tutto il codice ho postato sopra, comunque, l'ho appena finito di provare in Firefox e va... in IE no, anche se gli dico di avviare il "contenuto pericoloso".

Ah comunque ecco una fonte autorevole che contraddice quanto dici:
http://www.w3schools.com/tags/tag_option.asp
In fondo alla pagina, nella tabella event attributes, c'è anche l'evento onclick.

Grazie comunque per la risposta, ovviamente!

**cavicchiandrea** · 09-08-2007, 21:47

Non si finisce mai d'imparare, credevo che le opion non gestissero onclick ma il link autorevole da te segnalato lo afferma, l'unica cosa che potrebbe lasciare nel dubbio è se un evento supportato da tutti i browser (cross-browser) e versioni.
Tu asserisci che funziona anche con IE probabilmente la versione 7 e in questo caso non lo discuto, ma posso affermare con certezza (vedi esempio) che con la versione 6 non funziona Link di prova
Ora lascio a te la scelta o utilizzi onchange sulla select che dovrebbe (non vorrei essere smentito nuovamente) essere cross-browser oppure prosegui la ricerca per risolvere il problema.

**Xinod** · 09-08-2007, 23:05

Originariamente inviato da cavicchiandrea
credevo che le opion non gestissero onclick ma il link autorevole da te segnalato lo afferma

mah, sono molto dubbioso anch'io

**drakend** · 10-08-2007, 08:32

Originariamente inviato da Xinod
mah, sono molto dubbioso anch'io

Scusa ma provalo no?

Non ho mica detto che ho realizzato la fusione fredda in casa ed il procedimento è segreto!

**cavicchiandrea** · 10-08-2007, 08:46

Originariamente inviato da drakend
Scusa ma provalo no?

Non ho mica detto che ho realizzato la fusione fredda in casa ed il procedimento è segreto!

Difatti come asserivo io IE 6 non lo gestisce vedi link pagina prova mentre lo gesticono Opera 8 Netscape 7 Firefox 2 (oggi pomeriggio dal pc di mia moglie, provo con IE 7)

**drakend** · 10-08-2007, 09:34

Originariamente inviato da cavicchiandrea
Difatti come asserivo io IE 6 non lo gestisce vedi link pagina prova mentre lo gesticono Opera 8 Netscape 7 Firefox 2 (oggi pomeriggio dal pc di mia moglie, provo con IE 7)

Ce l'avevo con Xinod: comunque non sono venuto certo qua a fare il saputello.. voglio dire: io l'ho scoperto per caso provando a mettere onclick dentro l'option e solo DOPO mi sono reso conto che era supportato leggendo la documentazione.

Certo che IE deve sempre rompere le palle: io nella mia applicazione ho scritto che è progettata per Firefox con javascript abilitato. Ora ho due alternative: me ne frego dato che le specifiche le ho date ed è compito dell'utente rispettarle oppure devo diventare scemo con la compatibilità? Questo senza contare che ora io ho IE 7 e non so se posso fare il downgrade a IE 6 o l'installer si rifiuta dicendomi che è installata una versione più recente. (Si potrebbe fare i cazzi suoi, lo so pure io che ho la versione più recente, difatti voglio fare il downgrade!!!

)

**drakend** · 10-08-2007, 10:14

Allora ho provato a cambiare onclick con onchange e va anche su IE... mi sono anche accertato del fatto che onclick su option non è supportato da IE nemmeno nelle altre pagine dell'applicazione. :rollo:
Se l'evento onchange va bene nelle altre pagine, non va bene per la ricerca: se io devo aggiungere due volte il campo cognome con l'evento onclick potevo farlo cliccando due volte sulla relativa voce, come è ovvio che sia. Con onchange questo non è possibile in quanto l'evento viene invocato solo se il valore della select cambia... quindi dovrei selezionare qualche altra voce e poi selezionare di nuovo cognome. :rollo:
Come dicevo prima ho due possibilità: me ne frego dato che ho detto all'utente di usare Firefox o devo rivedere completamente la ricerca a causa del browser Microsoft?
La cosa mi fa incazzare parecchio perché mi piace molto il layout della ricerca per come l'ho ideato....

EDIT Mi sono accorto di un altro "simpatico" problema: il form trasmette allo script di elaborazione (ricerca2.php) solo il valore del tasto submit nell'array $_POST!!!

E i valori dei campi dinamici che ho creato dove sono?!?
Ho una mezza idea di quale sia il problema, ma non trovo la soluzione: javascript non mette gli elementi dinamici creati dentro il form e quindi quando questo viene trasmesso contiene solo il valore del tasto, di cui non potrebbe fregarmene di meno!

Ho provato anche a scrivere

codice:

var ni = document.getElementById('thisform.myDiv');

e mi dice che "ni has no properties"... ok come faccio a fargli trasmettere il tutto? (

)

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

tradizionalmente non e' ritenuto un gestore evento valido per quel tipo di elemento,
se le regole sono cambiate e' normale trovare molte persone sorprese

per mantenere il concetto che hai usato nell' interfaccia puoi aggiungere un pulsante da cliccare
selezioni e poi clicchi il pulsante
2 step invece di uno

, ma molti non lo vedono come un male: meno "ansia da prestazione" per l' utente

per i valori, non importa appendere direttamente al form, basta che gli elementi, aggiunti dinamicamente o meno, non siano fuori da <form>

se puo' servirti qui
http://forum.html.it/forum/showthrea...hreadid=848168
a me risulta passare tutto

ciao

Discussione: Pagina di ricerca

Strumenti discussione

Ricerca discussione

Visualizza

Pagina di ricerca

Permessi di invio