Contenuto finestra madre che cambia in base ad una selezione in popup

**Mizushi** · 24-02-2010, 10:07

Buona giornata a tutti.

Vi spiego cosa dovrei fare e non ci riesco:

- Una pagina htm con questo semplicissimo form:

codice:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nuova pagina 1</title>
</head>

<body>

<form method="POST" action="">
	


                  <input type="checkbox" name="C1" value="ON">
                  <input type="submit" value="Invia" name="B1">
                  <input type="reset" value="Reimposta" name="B2">
            </p>
</form>

</body>

</html>

- Nel momento in cui si flegga il checkbox dovrebbe aprirsi una finestra popup al centro del browser;
- Questa popup contiene una lista di nomi popolata tramite asp;
- Selezionando un nome dalla select contenuta nella popup questa dovrebbe chiudersi automaticamente e nella finestra madre al checkbox dovrebbe sostituirsi un campo di testo contenente il nome selezionato nella finestra popup.

Potete aiutarmi?
Grazie

**Enzaccio** · 24-02-2010, 21:42

Quindi per prima cosa assocerai al checkbox un gestore d' evento ONCLICK o ONMOUSEUP che richiama una function, function che gestisce l' apertura della pop-up.
Ora bisogna vedere cosa intendi per pop-up.

La pop-up propriamente detta è quella che deriva dal comando window.open() e replica una finestra del Browser in uso, ma di dimensioni volute, con o senza il menù, la tool-bar, igrandibile o no, ed altre caratteristiche definibili. L' aspetto di una pop-up aperta con Internet Explorer seguirà quindi la fisionomia di questo Browser e si differenzierà da una aperta con FireFox o Safari, pur osservandosi le caratteristiche di base.

Ma a volte si intende impropriamente per pop-up un Elemento (generalmente un DIV) che passa dallo stato di invisibile a visibile nel Documento stesso. E questo DIV potrebbe anche contenere un IFRAME che carica il file .asp che a quanto capisco, hai già fatto.

Facci sapere se hai già fatto anche pratica su come aprire e gestire una pop-up; da dove dobbiamo partire, insomma.

Il comando window.open('', '', '') può essere accompagnato da una, due o tre coppie di apici, che possono contenere: l' URL da caricare nella finestra pop-up, il nome della pop-up window, la fisionomia. Se quest' ultima non è diversamente definita, window.open('file.asp') apre una nuova finestra a tutto schermo come un A HREF

codice:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nuova pagina 1</title>

<script type="text/javascript">

function apriPopUp(){
 window.open('file.asp', '', 'width=380, height=240, left=200, resizable=yes, scrollbars=yes');
 }

</script>
</head>

<body>

<form method="POST" action="">
	


                  <input type="checkbox" name="C1" value="ON" onmouseup="apriPopUp();">
                  <input type="submit" value="Invia" name="B1">
                  <input type="reset" value="Reimposta" name="B2">
            </p>
</form>

</body>

</html>

Ora bisogna intervenire sul file.asp che con altri comandi JS può mutare il TYPE dell' INPUT da "checkbox" a "text" e popolarne il VALUE.
Se aggiungi questa ulteriore stringa di esecuzione nella stessa funzione, prima della } di chiusura, vedi il trucco:

       document.forms[0].C1.type="text";

window.opener.document.forms[0].C1.type="text";   ci permetterà di inviarlo dalla pop-up alla pagina madre.

**Zuckar** · 26-02-2010, 19:57

Buongiorno a tutti!
Sono un principiante e chiedo un aiuto su come risolvere questo problema: anch'io, come Mizushi, devo creare una pagina che visualizza dei dati a seconda della scelta fatta dall'utente.
La prima versione del mio lavoro funziona perfettamente con "Prompt": l'utende digita la sua scelta, conferma e tutto fila liscio.
Solo che non è una soluzione elegante né comoda, perché è esteticamente brutta e l'utente deve distogliere lo sguardo dal monitor, mollare il mouse e digitare la scelta. Se sbaglia, poi, esce un alert di errore ed è tutto terribilmente seccante.
Siccome tutti i dati devono essere caricati su array, ed è una funzione che ho piazzato nell'head, vorrei che la fase di scelta avvenisse prima del body.
Vorrei quindi realizzare una soluzione in cui la pagina principale apre una window con una select, l'utente sceglie, la window si chiude e la scelta viene processata di conseguenza.

Perciò ho scritto:

(pagina principale)

<HTML><HEAD><TITLE></TITLE>

<input type="hidden" name="primascelta" value="vuoto">

<SCRIPT language="JavaScript" type="text/JavaScript">

window.open("Menu.htm","Menu","width=200,height=30 0,left=500,top=250");

if(primascelta.value=="vuoto") {
alert("Prima devi selezionare...");
}
// questo lo spiego dopo

CodiceScelta=primascelta.value;
// e di seguito il lavoro va avanti per conto suo...

(popup)

<html><head><title></title></head>
<body>
<form name="Gruppo">
<select name="Menu" onChange="window.opener.window.primascelta.value=t his.options[this.selectedIndex].value;window.close();">
<option value="0" selected>Scegli un nome
<option value="1">ciccio
<option value="2">peppe
<option value="3">pluto
<option value="4">geppo
<option value="5">bambi
</select>
</form>
</body></html>

Il mio problema è che se non metto l'alert "Prima devi selezionare..." la pagina principale viene caricata interamente prima che l'utente abbia effettuato la scelta, e quindi con tabelle senza i dati.
Però l'alert manda in secondo piano il popup, ed il risultato è orrendo: l'utente carica la pagina, spunta l'alert, l'utente deve recuperare il popup dalla barra applicazioni, sceglie dalla combo, chiude l'alert, e poi il resto fila liscio, ma fa pena.

Chiedo qualche suggerimento affinché il popub blocchi il caricamento della pagina principale, lasciandolo riprendere alla sua chiusura (magari con imposizione della propria esistenza in primo piano).

Ringrazio per ogni contributo o suggerimento.

**Enzaccio** · 27-02-2010, 02:10

Di Mizushi non s'è saputo più nulla.
Avevo anche preparato un modellino che ora riconverto sul tuo.
Codifico una pop-up "scritta" così processi tal-quale, seppur dopo ti avvarrai di una pop-up "caricante".

codice:

<html>
<head><title>Written pop-up returning value</title>

<script type="text/JavaScript">

var CodiceScelta = "";

Zuckar = window.open("","Menu","width=200,height=300,left=500,top=250");
Zuckar.document.write('<html><body><form name="Gruppo"><select name="Menu" '+
                      'onChange=\\'CodiceScelta = window.opener.document.forms["Scelta"].primascelta.value = '+  
                                 'this.options[this.selectedIndex].value; '+
                                 'window.close(); alert(CodiceScelta);\\'> '+
                      '<option value="1">ciccio <option value="2">peppe   '+
                      '<option value="3">pluto  <option value="4">geppo   '+
                      '<option value="5">bambi  </select></form></body></html>');
Zuckar.document.close();

</script>

</head>
<body>
<form  name="Scelta">
<input name="primascelta" type="text" value="vuoto">

</form>
</body></html>

L' alert è a questo punto, solo dimostrativo per constatare che la variabile CodiceScelta è stata valorizzata mettendola in fila di = col resto (par di capire che CodiceScelta ti serve altrove ...).

**Mizushi** · 27-02-2010, 11:50

Scua Enzaccio, ma soltano adesso ho avuto opportunità di provare il tuo modellino.
Purtroppo non funziona in quanto mi restituisce un errore quando chiudo la popup, il browser è IE 8:

codice:

Dettagli errore pagina Web

Agente utente: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; OfficeLiveConnector.1.4; OfficeLivePatch.1.3)
Timestamp: Sat, 27 Feb 2010 09:48:39 UTC


Messaggio: Impossibile ottenere la proprietà type. Comando non supportato.
Linea: 12
Carattere: 2
Codice: 0
URI: http://localhost/folder/index.htm

index.htm:

codice:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nuova pagina 1</title>

<script type="text/javascript">

function apriPopUp()

{
 window.open('file.asp', '', 'width=380, height=240, left=200, resizable=yes, scrollbars=yes');
 
 document.forms[0].C1.type="text";
 window.opener.document.forms[0].C1.type="text";
 }

</script>
</head>

<body>

<form method="POST" action="">
	


                  <input type="checkbox" name="C1" value="ON" onmouseup="apriPopUp();">
                  <input type="submit" value="Invia" name="B1">
                  <input type="reset" value="Reimposta" name="B2">
            </p>
</form>

</body>

</html>

file.asp:

codice:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nuova pagina 1</title>
</head>

<body>

	

<select size="1" name="D1">
	<option value="aaa">aaa</option>
	<option value="bbb">bbb</option>
	<option value="ccc">ccc</option>
	</select>
	</p>

</body>

</html>

**Zuckar** · 27-02-2010, 14:04

Ciao Enzaccio, ciao Mizushi.
Anzitutto grazie per l'aiuto. Ho già imparato cose nuove dai vostri post.
Ciò che vorrei ottenere è qualcosa che blocchi completamente la pagina principale finché l'utente non ha operato la sua scelta nel punto preciso dove l'ho piazzata.
Vorrei creare una sorta di Prompt con un menu a tendina, che fermi anche l'esecuzione del codice *prima* di arrivare al body.
La pagina principale, infatti, dipende completamente da un file .js esterno, scelto in conseguenza della scelta dell'utente: la variabile valorizzata dalla select viene passata ad uno switch, il quale avvia il caricamento di un determinato file esterno, che contiene dati, recupera altri dati da una specifica sezione del cookie, imposta il layout, ecc.
Il mio obbrobrio con l'alert serviva appunto per interrompere l'esecuzione del codice fintanto che questo benedetto utente non si decide su cosa vuole, e quando l'ha fatto vede già il risultato definitivo.

**Enzaccio** · 28-02-2010, 20:45

Zuckar
Posso pensare che hai/avrai più giù nel BODY degli altri SCRIPT con document.write
o degli .innerHTML nelle funzioni,
che stampano dei contenuti / pezzi di codice in base a delle variabili recuperate con lo switch .
L' alert() il prompt() sono in grado di "tenere in sospeso" l' esecuzione del Documento perché sono funzioni native del Browser.

Ora, non possiamo fare l' equivalente con una pop-up, una modal-window et similia; con l' alert() puoi anche tenere in sospeso l' esecuzione di un ciclo for e vederne gli stadi step by step.

Possiamo :
- far ri-scrivere il Documento, sempre con document.write
- tenere il BODY in style="display: none;" inviargli dei contenuti con .innerHTML o cambiare dei Valori in determinati Elementi, ed infine renderlo visibile con document.body.style.display="";

E cercare di "obbligare alla pop-up" in altro modo, cioè gestire i casi in cui l' utente la fa finire in secondo piano cliccando al di sotto (che è la pagina generatrice), e in cui tenta di chiuderla dalla X (che non si può eliminare).

Ti posto un esempio relativo al primo metodo:

codice:

<html>
<head><title>Opera la Scelta</title>

<script type="text/JavaScript">

var CodiceScelta = "0";


function openList(){
 Zuckar = window.open("","Menu","width=200,height=300,left=500,top=250");
 Zuckar.document.open();
 Zuckar.document.write('<html><head><title>Lista Articoli</title></head>     '+
                       '<body onblur=\\'\\'>                                   '+ 
                       '<form name="Gruppo"><select name="Menu"              '+
                       'onChange=\\'window.opener.CodiceScelta =              '+
                                  'this.options[this.selectedIndex].value;   '+
                                  'window.opener.writeLayout(); window.close();\\'>'+
                       '<option value="0">seleziona <option value="1">ciccio '+
                       '<option value="2">peppe     <option value="3">pluto  '+
                       '<option value="4">geppo     <option value="5">bambi  ');//end
 Zuckar.document.write('</select></form></body></html>');
 Zuckar.document.close();
 Zuckar.focus();
 };
 
openList(); //fa partire la funzione al caricamento


function writeLayout(){

 var content = '';

 switch(CodiceScelta){ 

 case "1":
   content = '<body><h2>Questo è il layout di ciccio</h2>';
   break;
 case "2":
   content = '<body><h2>Questo è il layout di peppe</h2>';
   break;
 case "3":
   content = '<body bgcolor="#6090FF"><font color="#FFFF00" size="+3">Questo è il layout di pluto</font>';
   break;
 case "0":
   content = '<body><h2>Non hai operato alcuna scelta.</h2>'+
             '<p align="center"><input value="Ripeti" type="button" onclick="history.back();"></p>';
   break;
 default:
   content = '<body><h2>Questo articolo non è ancora stato definito</h2>
'+
             '<input value="Ripeti" type="button" onclick="history.back();">';
 };
 document.write('<html><head><title>Risultati</title></head>' + content + '</body></html>');
 document.close();
 }


</script>

</head>
<body onclick='openList();'>
</body></html>

document.close(); che molto spesso viene omesso, è quello che fa arrestare la clessidra, altrimenti il Browser rimane in stato di caricamento e non consente nemmeno l' ispezione del Codice Sorgente risultante; qui lo puoi verificare togliendolo dalla pop-up e anche dalla pagina.

L' azione di chiusura della pop-up la possiamo intercettare col gestore d' evento onblur (e perciò potremmo già preventivare un case "0": ) ma in ogni caso, questo richiederà uno sviluppo appena più complesso.
onclick='openList();' nel BODY invece, ci fa già recuperare la pop-up nel caso di click al di fuori; in pratica, ce la ri-fabbrica e per questo ho messo il relativo codice in una funzione: per poterla riprodurre.

Necessari, il nome ("Menu") e il .focus() alla pop-up
altrimenti, fare a meno di entrambi e ce ne ritroviamo sì una nuova ad ogni click fuori, in primo piano sì, ma appunto una in più con la precedente, che rimane, e si arriva presto a riempire la barra.
Fare a meno solo del .focus() avendo il nome, ce la riproduce senza doppioni ma rimane in secondo piano.

case "0": e
default:
Nota il recupero che posso fare con history.back(); ma non con openList();

<script>document.write('Salve gente !');</script> messo tra gli altri Tag del Codice HTML della pagina, viene eseguito insieme a questi al parsing del Documento, e con questi si mescola;
ma document.write('Salve gente !'); "sparato" successivamente prevede la ri-scrittura.

Per questo, ci ritroviamo a Browser una nuova pagina e la funzione openList(); con tutto lo script, non c'è più !
Ispeziona i codici sorgente del tutto, anche sulla pop-up.

(ora è meglio che invio, che non si perda tutto ... a dopo)

Mizushi
Non ho esperienza di IE 8 - potrebbe non supportare in JS l' Attributo TYPE (come un bug), ma potrebbe anche non supportarlo il !DOCTYPE (ora non posso avere tutto a mente).
Prova a farlo intervenire su un .value questo di certo è utilizzabile.
Prova ad utilizzare la migliore direttiva:

document.forms[0].elements["C1"].type="text";

che per testare puoi fare:
document.forms[0].elements["B1"].value="olé";
alla peggio metti un type="text"

dove .forms[0] continua però ad individuare il primo FORM nel Documento (contando da 0 zero come i Latini); se è preceduto da altri, cambia il numero o usa un NAME come fatto per per l' input.

Togli la seconda istruzione/replica con window.opener, li' non ha senso; dovrebbe semmai provenire da uno SCRIPT codificato nel file file.asp

onclick invece di onmouseup

**Mizushi** · 28-02-2010, 23:00

Originariamente inviato da Enzaccio
Mizushi
Non ho esperienza di IE 8 - potrebbe non supportare in JS l' Attributo TYPE (come un bug), ma potrebbe anche non supportarlo il !DOCTYPE (ora non posso avere tutto a mente).
Prova a farlo intervenire su un .value questo di certo è utilizzabile.
Prova ad utilizzare la migliore direttiva:

document.forms[0].elements["C1"].type="text";

che per testare puoi fare:
document.forms[0].elements["B1"].value="olé";
alla peggio metti un type="text"

dove .forms[0] continua però ad individuare il primo FORM nel Documento (contando da 0 zero come i Latini); se è preceduto da altri, cambia il numero o usa un NAME come fatto per per l' input.

Togli la seconda istruzione/replica con window.opener, li' non ha senso; dovrebbe semmai provenire da uno SCRIPT codificato nel file file.asp

onclick invece di onmouseup

Niente da fare sempre errore:

codice:

Dettagli errore pagina Web

Agente utente: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; OfficeLiveConnector.1.4; OfficeLivePatch.1.3)
Timestamp: Sun, 28 Feb 2010 20:57:25 UTC


Messaggio: Impossibile ottenere la proprietà type. Comando non supportato.
Linea: 15
Carattere: 2
Codice: 0
URI: http://localhost/xml/index.htm

Codice index.htm:

codice:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nuova pagina 1</title>

<script type="text/javascript">

function apriPopUp()

{
 window.open('file.asp', '', 'width=380, height=240, left=200, resizable=yes, scrollbars=yes');
 
 document.forms[0].elements["C1"].type="text";

 }

</script>
</head>

<body>

<form method="POST" action="">
	


                  <input type="checkbox" name="C1" value="ON" onclick="apriPopUp();">
                  <input type="submit" value="Invia" name="B1">
                  <input type="reset" value="Reimposta" name="B2">
            </p>
</form>

</body>

</html>

Codice file.asp:

codice:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nuova pagina 1</title>
</head>

<body>

	

<select size="1" name="D1">
	<option>Seleziona</option>
	<option value="aaa">aaa</option>
	<option value="bbb">bbb</option>
	<option value="ccc">ccc</option>
	</select>
	</p>

</body>

</html>

**Enzaccio** · 01-03-2010, 00:00

Hai ragione, svelato l' arcano:
da IE 7 su Windows, TYPE mi risulta di sola lettura.

Vuol dire che in JavaScript posso ricavare il Valore da un TYPE ma non lo posso modificare/attribuire.
Difatti, l' alert parte, e mi stampa checkbox correttamente, ma se libero dal commento // la precedente istruzione, non solo non mi si esegue, ma nemmeno parte più l' alert; cioè, mi blocca la function.

//document.forms[0].elements["C1"].type = "text";
alert(document.forms[0].elements["C1"].type);

Non accetta nemmeno la forma:

document.forms[0].elements["C1"].setAttribute("type", "text");

NN9 FF2 WindowsSafari mi eseguono entrambe le forme di scrittura; oltre alla lettura, ovviamente.

Quindi si seguirà un' altra strada; spiacente, ma la pratica di modificare il TYPE non è che si presenti tanto spesso, e mi ha preso alla sprovvista.
Difatti, la prima soluzione che mi era venuta in mente era di passare la checkbox a style.display="none"; e nel contempo rendere visibile con style.display=""; una textbox già codificata con style="display: none;"
Domani cercherò di postartela; questa è cross-browsers compatibile.
C'è anche la possibilità di inviare un .innerHTML altrimenti.

**Enzaccio** · 01-03-2010, 00:26

Codice file.asp:

codice:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nuova pagina 1</title>
<script type="text/javascript">

function restituisci(quale){
 
 window.opener.document.forms[0].elements["C1"].style.display="none";
 window.opener.document.forms[0].elements["C2"].style.display="";
 window.opener.document.forms[0].elements["C2"].value = quale;
 window.close();

 }

</script>
</head>

<body>

	

<select size="1" name="D1" onchange="restituisci(this.value);">
	<option value="aaa">aaa</option>
	<option value="bbb">bbb</option>
	<option value="ccc">ccc</option>
	</select>
	</p>

</body>

</html>

Codice index.htm:

codice:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nuova pagina 1</title>

<script type="text/javascript">

function apriPopUp()

{
 window.open('file.asp', '', 'width=380, height=240, left=200, resizable=yes, scrollbars=yes');
 
 }

</script>
</head>

<body> 

<form method="POST" action="">
	


                  <input type="checkbox" name="C1" value="ON" onclick="apriPopUp();">
                  <input type="text" name="C2" value="" style="display: none;">
                  <input type="submit" value="Invia" name="B1">
                  <input type="reset" value="Reimposta" name="B2">
            </p>
</form>

</body>

</html>

Forse si dovranno aggiustare i name ai tuoi previsti.
IExplorer mi manda il consueto "Aprire o salvare il file?"

Assunto questo, possiamo poi condizionare l' esecuzione nella funzione, allo stato del checkbox; per evitare che apra un' altra pop-up togliendo la spunta.

Discussione: Contenuto finestra madre che cambia in base ad una selezione in popup

Strumenti discussione

Ricerca discussione

Visualizza

Contenuto finestra madre che cambia in base ad una selezione in popup

read only JS property

Permessi di invio