problema visualizzazione immagine dopo compilazione form

[FANG]

Ciao a tutti,

ho creato un form html che con il comando onSubmit mi richiama uno script js che ha il compito di leggere le informazioni e passarle ad uno script python! Tale script genera un immagine che vorrei successivamente visualizzare nella pagina del form html.

Praticamente quando clicco su Elabora (nel form) non accade nulla; nel senso che la pagina rimane quella del form anche se poi vado a vedere nelle cartelle e l'immagine da plottare è stata effetivamente creata inmodo corretto! Non capisco perchè non viene plottata.

codice form:

<div id="contiene_form">
            <form id="form1" name="form1" method="post" action="monitoraggio.py" onsubmit="invio(); return false;">
              
              

Stazioni disponibili:</p>
              

<input name="stazione" type="checkbox" value="inr1" id="stazione"/>inr1</p>
              

<input name="stazione" type="checkbox" value="inr2" id="stazione"/>inr2</p>
              

<input name="stazione" type="checkbox" value="inr3" id="stazione"/>inr3</p>
              

<input name="stazione" type="checkbox" value="inr4" id="stazione"/>inr4</p>

              

Inserisci il doy:<span id="d_o_y">
              <label>
                <input type="text" name="doy" id="doy" />
                

              </label>
              </span></p>

              

Inserisci il periodo:</p>
              

<input name="latenza" type="radio" value="1d" id="latenza"/> 1d 
              <input name="latenza" type="radio" value="5d" id="latenza"/> 5d </p>
                

                

Inserisci il tipo di trend:</p>
              

<input name="trend" type="radio" value="Not-TR" id="trend"/> Not-TR 
              <input name="trend" type="radio" value="TR" id="trend"/> TR </p>
              

<input name="trend" type="radio" value="Both" id="trend"/> Both</p>
                

                <input name="Elabora" type="submit" value="Elabora" id="Elabora"/>    
             
            </form>
            
          </div>
          <span id="img"></span>

codice js:

function prepara_dati(){
	var stazione="";
	for (i = 0; i < document.form1.stazione.length; i++)
		if (document.form1.stazione[i].checked){
			stazione = stazione + "stazione=" + document.form1.stazione[i].value + "&";
		}
<!--	alert(stazione);
	var latenza="";
	for (i = 0; i < document.form1.latenza.length; i++)
		if (document.form1.latenza[i].checked){
			latenza = latenza + "latenza="+document.form1.latenza[i].value+ "&";
		}
<!--	alert(latenza);
	var trend="";
	for (i = 0; i < document.form1.trend.length; i++)
		if (document.form1.trend[i].checked){
			trend = trend + "trend="+document.form1.trend[i].value;
		}
<!--	alert(trend);
	var enc=encodeURIComponent;
	doy=document.getElementById("doy").value;
	data=stazione+"doy="+enc(doy)+"&"+latenza+trend;
	alert(data);
	AJAXReq("POST","monitoraggio.py",true,data);
<!--	alert(data);
	}
function AJAXReq(method,url,bool,data){
  if(window.XMLHttpRequest){
    myReq = new XMLHttpRequest();
  } else
 
  if(window.ActiveXObject){
    myReq = new ActiveXObject("Microsoft.XMLHTTP");

    if(!myReq){
      myReq = new ActiveXObject("Msxml2.XMLHTTP");
    }
  }
 
  if(myReq){
	execfunc(method,url,bool,data);
  }else{
    alert("Impossibilitati ad usare AJAX");
  }
}
function execfunc(method,url,bool,data){
  myReq.onreadystatechange = handleResponse();
  myReq.open(method,url,bool);
  myReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
  myReq.send(data);
}
function invio(){
	prepara_dati();
}
function handleResponse(){
  if(myReq.readyState == 4){
    if(myReq.status == 0){
		img = document.getElementById('img');
      img.innerHTML = myReq.responseText;
      alert(myReq.responseText);
    }else{
      alert("Niente da fare, AJAX non funziona :(");
    }
  }
}

grazie

[homezappa]

Conditio sine qua non:
Lo script in python DEVE essere in grado di accettare i parametri in GET, non in POST
Premesso questo:
invece di:

<!--	alert(trend);
	var enc=encodeURIComponent;
	doy=document.getElementById("doy").value;
	data=stazione+"doy="+enc(doy)+"&"+latenza+trend;
	alert(data);
	AJAXReq("POST","monitoraggio.py",true,data);

scriverai:

<!--	alert(trend);
	var enc=encodeURIComponent;
	doy=document.getElementById("doy").value;
	data=stazione+"doy="+enc(doy)+"&"+latenza+trend;
	alert(data);

	img = document.getElementById('img');
        img.src = "monitoraggio.py?"+data;

Il tutto senza tirare in ballo Ajax.
Ci pensa il browser, a fronte del cambiamento dell'url dell'src dell'immagine,
a caricarla!

Dacci una provata!
HTH
Zappa

[FANG]

Se faccio nel modo che mi hai indicato l'immagine mi viene plottata su una blank page. Io utilizzavo AJAX per il semplice fatto che vorrei plottarla direttamente nella pagina del form!

[homezappa]

Mi permetto di dissentire.
Il codice (in rosso) che ti ho postato fa sì che l'immagine venga plottata laddove, nell'html, c'è il tag img con id='img' ...
Un'accortezza, evita di dare id uguali a parole chiave!

per esempio, l'id dell'immagine chiamalo 'immagineplottata' o qualcosa d'altro, non 'img'

Zappa

[FANG]

visto che mi consigli di non utilizzare ajax allora ho eliminato tutte le altre funzioni e quindi il problema potrebbe essere nell'intestazione del form dove ho il campo onsubmit...cosa dovrei inserire li?

[homezappa]

Lo vedo solo ora!
tu hai messo:

          <span id="img"></span>

a questo punto sorge spontanea una domanda:
Ma lo script python, cosa restituisce?
Io pensavo restituisse un'immagine, da cui se tu avessi messo:

[img]url_di_una_immagine_vuota[/img]

allora si' che facendo:

	img = document.getElementById('immagine');
        img.src = "monitoraggio.py?"+data;

l'immagine si sarebbe vista.
altrimenti, se lo script python non restituisce un'immagine ma testo html, allora va bene Ajax

a te la risposta
Zappa

[FANG]

lo script python mi crea l'immagine in formato png e me la salva in una cartella, poi io ho aggiunto queste 2 righe:

print "Content-Type:text/html\n"
print '[img]%s[/img]'%path_img

quindi ti direi che dovrebbe restituire testo html. Ma il problema è che con quel codice che ti ho scritto non funziona.

Grazie

[homezappa]

capito.
Prima cosa: devi cambiare lo script python in modo che restituisca SOLAMENTE l'url dell'immagine appena creata (si badi: l'url, e non la path nel filesystem, ovviamente!)
poi ho trovato un paio di errori nel tuo script originale:

[list=1][*]i commenti in javascript iniziano con // , non <!--, quelli sono html![*]l'onreadystatechange vuole una funzione, non la chiamata, quindi no parentesi[*]Lo status OK è 200, non 0 ![*]controlla la' dove costruisci trend non ci va un &amp; tra un item e l'altro?[/list=1]

function prepara_dati(){
	var stazione="";
	for (i = 0; i < document.form1.stazione.length; i++)
		if (document.form1.stazione[i].checked){
			stazione = stazione + "stazione=" + document.form1.stazione[i].value + "&";
		}
//	alert(stazione);
	var latenza="";
	for (i = 0; i < document.form1.latenza.length; i++)
		if (document.form1.latenza[i].checked){
			latenza = latenza + "latenza="+document.form1.latenza[i].value+ "&";
		}
//	alert(latenza);
	var trend="";
	for (i = 0; i < document.form1.trend.length; i++)
		if (document.form1.trend[i].checked){
			trend = trend + "trend="+document.form1.trend[i].value;
		}
//	alert(trend);
	var enc=encodeURIComponent;
	doy=document.getElementById("doy").value;
	data=stazione+"doy="+enc(doy)+"&"+latenza+trend;
	alert(data);
	AJAXReq("POST","monitoraggio.py",true,data);
//	alert(data);
	}
function AJAXReq(method,url,bool,data){
  if(window.XMLHttpRequest){
    myReq = new XMLHttpRequest();
  } else
 
  if(window.ActiveXObject){
    myReq = new ActiveXObject("Microsoft.XMLHTTP");

    if(!myReq){
      myReq = new ActiveXObject("Msxml2.XMLHTTP");
    }
  }
 
  if(myReq){
	execfunc(method,url,bool,data);
  }else{
    alert("Impossibilitati ad usare AJAX");
  }
}
function execfunc(method,url,bool,data){
  myReq.onreadystatechange = handleResponse;  // attenzione! le parentesi () non ci vanno! 
  myReq.open(method,url,bool);
  myReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
  myReq.send(data);
}
function invio(){
	prepara_dati();
}
function handleResponse(){
  if(myReq.readyState == 4){
    if(myReq.status == 200){  // Status 200, non 0! 
		img = document.getElementById('img');
		img.src = myReq.responseText; [color=red]// cambiamo l'src dell'immagine cosi' il browser la carica
		alert(myReq.responseText);
    }else{
      alert("Niente da fare, AJAX non funziona ");
    }
  }
}

l'HTML:
procacciati un'immagine di riempimento, al limite con dentro una scritta tipo
"Selezionare i dati e premere il pulsante", poi:
invece di

<span id="img"></span>

mettici:

[img]immagine_riempimento.png[/img]

HTH
Zappa

[FANG]

Grazie,

io al posto di 200 metto 0 perchè lo sto facendo girare in locale...è sbagliato?

perfavore, mi spieghi bene cosa significa modificare il file python in modo che restituisca solamente l'url? non è il path dov'è salvata la figura?

grazie

[homezappa]

Originariamente inviato da FANG
Grazie,

io al posto di 200 metto 0 perchè lo sto facendo girare in locale...è sbagliato?

Per locale intendi http://localhost/qualcosa vero?
Cioè hai un server che gira sulla tua macchina (Apache, per esempio, ma anche IIS)
In ogni caso 200 ci va, non 0!
(esempio: otterresti 404 invece di 200 se la pagina richiesta non esistesse)

perfavore, mi spieghi bene cosa significa modificare il file python in modo che restituisca solamente l'url? non è il path dov'è salvata la figura?
grazie

No, on è il path dove è salvata la figura, è l'url tramite il quale il server ti dà l'immagine dal path nel quale la hai salvata

HTH
Zappa