cambiare file in iframe al cambiare della select

**dsidone** · 21-01-2011, 19:15

Ciao a tutti,
sto impazzendo da alcuni giorni su questa pagina html che dovrebbe cambiare il contenuto di un iframe al cambiare del valore della select.

Il frame contiene dei valori che sono letti da un file txt e per questo c'è l'apposita function che me lo visualizza.
Il problema che mi tormenta è che il frame cambia solo dopo che faccio due cambi di select mostrandomi il primo valore e cioè, se seleziono un valore non succede nulla, quando ne seleziono un altro mi visualizza quello precedente.
I file di testo si chiamano data1.txt, data2.txt e data3.txt e dentro hanno due colonne di dati separati da una tabulazione es: campo1

**dsidone** · 21-01-2011, 19:21

campo1 campo2
campo3 campo4

e così anche negli altri file data.txt.

La pagina html è questa:

codice:

<html>
<head>
    <meta http-Equiv="Cache-Control" Content="no-cache">
    <meta http-Equiv="Pragma"    Content="no-cache">
    <meta http-Equiv="Expires"    Content="0">

<style type="text/css">

body {
font-size: 100%;
background: #9a9;
}
h3 {
width: 180px;
font: 18px "arial black";
color: #474;
margin: 80px auto 0 auto;
}
#stuff {
width: 600px;
margin: 10px auto;
}
#stuff th {
font: 11px "arial black";
color: #060;
letter-spacing: .4em;
border-left: 3px #000 solid;
border-right: 1px #000 solid;
background: #fff;
}
#stuff td {
font: normal 12px monospace;
text-align: center;
padding: 3px;
border-top: 1px #888 solid;
border-right: 1px #000 solid;
border-bottom: 1px #888 solid;
border-left: 3px #000 solid;
background: #d0d8d0;
}
#buffer {
display: none;
}

</style>
<script type="text/javascript">

function caricatesto()
{
if (!document.getElementById || !document.getElementsByTagName)
return;
var frm = null,prenode,tbod = document.getElementById('tbod'),data = '';
if ((frm = top.frames['buffer']) //iframe
&& frm.document)
{ //get <pre> parent
prenode = frm.document.getElementsByTagName('pre').item(0);
if (null != prenode && null != prenode.firstChild && /#text/.test(prenode.firstChild.nodeName)) //text node
{
data += prenode.firstChild.data; //read
data = data.split(/[\n\r]/); //separate lines
data.splice(0, 0); //lose first one (legend)
var i = 0,l = data.length,rowdata,ii, ll, tr, td;

for (; i < l; ++i)
{

tr = document.createElement('tr'); //new row
tbod.appendChild(tr);
rowdata = data[i].split("\t"); //separate bits
for (ii = 0, ll = rowdata.length; ii < ll; ++ii)
{
var mia = rowdata[1];
td = document.createElement('td'); //new cell

var link = document.createElement("a"); 

link.setAttribute("href", mia); 
//link.setAttribute("class", "thickbox"); 
if (ii != 1) {
link.appendChild(document.createTextNode(rowdata[ii])); 
td.appendChild(link);
tr.appendChild(td);
}
}
}
}
}
}

</script>

</head>
<body>



<select onchange="javascript: window.frames.buffer.location.href =this.options[this.selectedIndex].value;caricatesto();">
	<option value="">-------</option>
    <option value="data1.txt">uno</option>
    <option value="data2.txt">due</option>
	<option value="data3.txt">tre</option>
</select>
</form>

<h3>Progetto</h3>
<table id="stuff">
<thead>
<tr>
<th>descrizione</th>

</tr>
</thead>
<tbody id="tbod">
</tbody>
</table>
<iframe src="" id="buffer" name="buffer" ></iframe>
</body>
</html>

**cavicchiandrea** · 21-01-2011, 23:31

Non può funzionare gli iframe sono documenti a se stanti dalla pagina e la funzione inserita nel documento principale non ha effetti "immediati" sul frame, ed essendo file txt non puoi inserire la funzione nel documento stesso, pertanto ritengo tu abbia le seguenti possibilità:
-Cambi i documenti txt in html e inserisci la funzione negli stessi.
-Carichi i documenti txt senza funzione.

**TrueLies** · 21-01-2011, 23:55

codice:

var frm = null,prenode,tbod = document.getElementById('tbod'),data = '';

chi ha scritto quella riga? Tu o hai preso lo script da qualche parte?

**dsidone** · 22-01-2011, 01:03

no, lo script l'ho preso sul web dopo varie ricerche

Quindi, cavvicchiandrea, mi suggerisci di utilizzare pagine html?
In quel caso anche la funzione non serve più a nulla perché creerei direttamente la pagina con l'output voluto, oppure protrei usare una function che mi nasconda/visualizzi solo i contenuti dei div relati alla select ma dovrei inserire tutto nella stessa pagina e appensatirei molto la navigazione.
Altre soluzioni?

Devo farlo client side perché andrà dentro una penna usb e devo filtrare i contenuti di una tabella in base alla selezione della casella drop down.

Non riesco a trovare la strada più semplice ed usabile.
Grazie a tutti

**cavicchiandrea** · 22-01-2011, 01:11

@TrueLies perché? è l'equivalente di scrivere cosi:
var frm = null;
var prenode;
var tbod = document.getElementById('tbod');
var data = '';
oppure non ho capito le domande.

**TrueLies** · 22-01-2011, 01:15

trovandosi dentro una funzione, è priva di senso.

Inizializza con scope locale una variabile detta frm e gli assegna null.
Poi invoca una variabile detta prenode, senza premettergli la parola var (immagino conti sulla assegnazione a cascata, ma non assegna valore), per cui è come se invocasse senza scopo una variabile a scope globale, per non farci nulla: sembra un errore concettuale di qualcuno che è abituato a inizializzare in una funzione anche le variabili globali.

Io già solo per quello cambierei script.

codice:

<iframe id="foo" style="width:200px;height:200px;" src=""></iframe>
<select onchange="boh(this);">
<option value="a.txt">file A</option>
<option value="b.txt">file B</option>
</select>

<script>


function boh(form){
document.getElementById('foo').src=form.options[form.selectedIndex].value;
}
</script>

lo script sopra è semplicissimo e carica in un iframe i file a seconda della selezione in un select.
Devi riadattare se serve l'id dell iframe che ora è "foo"

Poi nella select le option devono avere come valore (value="") il file da caricare per ciascuna di loro (inclusivo di percorso se del caso)

**TrueLies** · 22-01-2011, 01:19

Originariamente inviato da cavicchiandrea
@TrueLies perché? è l'equivalente di scrivere cosi:
var frm = null;
var prenode;
var tbod = document.getElementById('tbod');
var data = '';
oppure non ho capito le domande.

Il tuo codice è corretto, quell' altro presume una assegnazione a cascata che inizializza delle variabili prive di valore. Mi risulta una modalità sospetta. Sono diffidente!

**dsidone** · 22-01-2011, 01:27

il problema non è caricare il file txt, ma fare in modo che lo carichi su selezione e lo script selezioni la colonna di destra che contiene il path e lo trasforma in a href per la colonna di sinistra che contiene il campo descrizione, poi ad ogni interruzione di riga inserisce un tr e crea una nuova riga così per centinaia di righe.

Concettualmente la mia prova funziona bene solo che mi visualizza in ritardo di uno step della select il risultato, alla prima nulla, la seconda quella precedente e così via

**TrueLies** · 22-01-2011, 01:31

Il codice inviato cambia su selezione.

Per il resto, stai formulando una domanda diversa da quella iniziale mi pare, ed assai più complessa (e per me poco chiara, ma magari questo è un limite mio!) che richiederebbe molti più dettagli.

Discussione: cambiare file in iframe al cambiare della select

Strumenti discussione

Ricerca discussione

Visualizza

cambiare file in iframe al cambiare della select

è partito il form....continuo

Permessi di invio