Mootools (1.2.1) - Problema FormSend

**gismo** · 27-11-2008, 13:22

Salve,
ho un problema con uno script js, utilizzando il framework mootools 1.2.1 .

Lo script richiede ad una pagina php collegata a un database Province, Comuni, Frazioni, in tempo reale selezionando in cascata le suddette e caricando quindi le option risultanti dalla query all'interno della select. Ad esempio, selezionando una provincia, verranno restituiti tutti i comuni della stessa, selezionando quindi un comune le relative frazioni.

Il tutto funziona egregiamente con Firefox, Safari, ma con IE il response dalla pagina PHP risulta vuoto.

Il codice HTML comprendente il javascript:

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=utf-8" />
<title>Documento senza titolo</title>

<script language="javascript" type="text/javascript" src="framework/mootools-1.2.1.js"></script>
<script language="javascript" type="text/javascript">
	window.addEvent('domready', function() {
		$('provincia').addEvent('change', function() {
			var log = $('comune').empty();							
			$('form_1').action='comu_fetch.php';
			$('form_1').set('send', {
				onComplete: function(response) {				
					response='<option>Comuni: </option>'+response;
					log.set('html', response);
					//log.adopt(new Element('div').set('html', '<select>' + response + '</select>').getFirst().getChildren());
					log = $('frazione').empty();				
				}
			});
			$('form_1').send();
		});	
		$('comune').addEvent('change', function() {
			var log = $('frazione').empty();			
			$('form_1').action='fraz_fetch.php';		
			$('form_1').set('send', {onComplete: function(response) {
				if (!response=='') { response='<option>Frazioni: </option>'+response; }
				else response='<option>Nessuna Frazione</option>'+response;			
				log.set('html', response);
			}});
			$('form_1').send();
		});
	});
</script>
</head>

<body>
	<form method="post" action="comu_fetch.php" id="form_1">
    	<dl>
            <dt><label for="provincia">Provincia:</label></dt>
            <dd>            	
                <select id="provincia" name="provincia">
                    <option>Province: </option>
                    <option>Arezzo</option>
                    <option>Carrara</option>
                    <option>Firenze</option>
                    <option>Grosseto</option>
                    <option>Livorno</option>
                    <option>Lucca</option>
                    <option>Massa</option>
                    <option>Pisa</option>
                    <option>Pistoia</option>
                    <option>Prato</option>
                    <option>Siena</option>
                </select>               
            </dd>            
        </dl>
        <dl>
            <dt><label for="comune">Comune:</label></dt>
            <dd>
            	<select id="comune" name="comune">
                    <option>...</option>
                </select>               
            </dd>
        </dl>
        <dl>
    		<dt><label for="frazione">Frazione:</label></dt>
            <dd>
            	<select id="frazione" name="frazione">
                    <option>...</option>
                </select>
            </dd>        
        </dl>        
    </form>   
</body>
</html>

E lo script PHP che genera l'output:

Codice PHP:


<?php

    include("db/config.inc.php");

    $db = @mysql_connect($db_host,$db_usr,$db_psw) or die("Impossibile connettersi al Database.");

    mysql_select_db($db_name,$db);

    

    $post = strtoupper($_POST['provincia']);

    $ris = mysql_query("Select prov_cap From tab_cap Where comu_cap = '$post' AND fraz_cap = ''");

    $ftc = mysql_fetch_array($ris);

    $com = $ftc[0];

    mysql_free_result($ris);

    

    $ris = mysql_query("Select comu_cap From tab_cap Where prov_cap='$com' AND fraz_cap='' AND topo_cap='' Order By comu_cap ASC");

    

    mysql_close($db);

    

    while ( $row = mysql_fetch_array($ris, MYSQL_ASSOC) ) 

    {

        $x = ucfirst(strtolower($row['comu_cap']));

        printf ("<option>%s</option>\n", $x );        

    }



       // Sembra che IE non prenda il contenuto dell'output generato dal fetching.

       // Mentre se faccio un "echo" esternamente ad esempio:

       // echo "Hello World"; --> venga letto nel response a differenza di quanto scritto sopra.

    

    mysql_free_result($ris);    

?>

Attendo una vostra risposta.
Per ogni chiarimento non esitate a chiedere.

Posso anche inserire una pagina demo se è necessario.

**artorius** · 27-11-2008, 13:52

scusa, ma hai detto che ti funziona?!? Mi sembra strano dato che quando ottieni la risposta dal server la vai a sovrascrivere...

Comunque prova a fare:

codice:

$('form_1').set('send', {
	onSuccess: function(response) {				
		response+='<option>Comuni: </option>'+response;
		log.set('html', response);
		log = $('frazione').empty();				
	}
});

fuori dall'onChange della select, nella select chiami solo $('form_1').send();

**gismo** · 27-11-2008, 14:14

Uhm... niente da fare...
Comunque è logico che sovrascrivo.
Se l'utente seleziona una provincia, e dopo ne seleziona un'altra, i comuni vanno aggiornati, cancellando ciò che c'era prima.

Ecco l'esempio con Firefox (stesso risultato con Safari):

Con IE invece, il response risulta vuoto anche se cerco di visualizzarlo con un alert.

Risultati con IE:

Risultati con Firefox:

Risultati con Safari:

**artorius** · 27-11-2008, 14:19

Hai provato a mettere la definizione del send

$('form_1').set('send', { ...

fuori dalla funzione sull'evento onchange?

Ed a mettere onSuccess, anziché onComplete

**gismo** · 27-11-2008, 14:22

Si, provato a farlo...
risultato identico a quello che ho postato precedentemente.

**artorius** · 27-11-2008, 14:32

mmm strano, non ho mai avuto problemi di questo tipo...

Prova ad instanziare un Oggetto di tipo Request:

Codice PHP:


var reqComune, reqFraz;

window.addEvent('domready', function(){

   reqComune =new Request.HTML({url:'comu_fetch.php', onSuccess : populateComuni});

   reqFraz =new Request.HTML({url:'fraz_fetch.php', onSuccess : populateFraz});



   $('provincia').addEvent('change', function(){

      reqComune.post('provincia='+this.getSelected().getLast().get('value'));

   });



   $('comune').addEvent('change', function(){

      reqFraz.post('comune='+this.getSelected().getLast().get('value'));

   })

});



function populateComuni(t, e, h, j)

{

   var com = $('comune').empty();

   com.set('html', '<option>Comuni:</option>'+h);

}



function populateFraz(t, e, h, j)

{

   var fraz = $('frazione').empty();

   fraz.set('html', '<option>Frazioni:</option>'+h);

}

N.B: mi spiace postare del codice che non ho testato, ma ora non ho proprio tempo, logicamente dovrebbe essere a posto, ma può darsi che ci siano errori di sintassi.

**gismo** · 27-11-2008, 15:24

Grazie mille dello spunto che mi hai dato.
Ho risistemato il codice, e ora funziona a meraviglia anche su IE.

Ecco qui il codice sistemato.

Codice PHP:


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

    function populateComuni(t, e, h, j) 

    {

       var com = $('comune').empty();

       com.set('html', '<option>Comuni:</option>'+h);

       var fraz = $('frazione').empty();

    }

    

    function populateFraz(t, e, h, j) 

    {

       var fraz = $('frazione').empty();

       if (!h=='') { fraz.set('html', '<option>Frazioni:</option>'+h); }

       else fraz.set('html', '<option>Nessuna Frazione</option>'+h);

    }

    

    window.addEvent('domready', function(){

       var reqComune = new Request.HTML({url:'comu_fetch.php', onSuccess : populateComuni});

       var reqFraz = new Request.HTML({url:'fraz_fetch.php', onSuccess : populateFraz});

    

       $('provincia').addEvent('change', function(){

          reqComune.send('provincia='+this.getSelected().getLast().get('value'));

       });

    

       $('comune').addEvent('change', function(){

          reqFraz.send('comune='+this.getSelected().getLast().get('value'));

       });

    });    

</script>

Per moderatori:
Il POST può essere chiuso se lo ritenete necessario.

**artorius** · 27-11-2008, 15:49

un'aggiunta: io di solito non uso mai far passare HTML tramite AJAX, non perché non funzioni, ma perché preferisco controllare la creazione degli elementi, anziché usare innerHTML (che alla fine set('html', 'HTML') non fa altro che fare innerHTML dopo aver effettuato le dovute correzioni sulla stringa).

Io preferisco usare JSON, soprattuto per le select, trovo sia molto più pratico.

Ho fatto un esempio http://forum.html.it/forum/showthrea...t=User+Manager

Discussione: Mootools (1.2.1) - Problema FormSend

Strumenti discussione

Ricerca discussione

Visualizza

Mootools (1.2.1) - Problema FormSend

Permessi di invio