Select dinamica - Incompatibilità IE7

[Kawato]

Salve a tutti,
sono 3 giorni che giro il web alla ricerca della soluzione a questo maledetto problema di compatibilità, e quando sembrava tutto risolto, rendendo le mie select funzionanti su IE8, Chrome e Firefox, ecco che il buon vecchio IE7 decide di farmi uno scherzetto...

Si tratta delle classiche select riempite dinamicamente con AJAX, prendendo i dati da un DB, con PHP, vi incollo il codice:

Settore tariffario:
<select name="settariffa" id="settariffa" onchange="getTipoVeicolo(this.options[this.selectedIndex].value);">
            <option value="seleziona" selected="selected">Seleziona</option>
           	<?php 
			$query="SELECT nome FROM settoretariffario";
			$row = mysql_query($query);
			while ($riga = mysql_fetch_array($row)){			
				echo "<option>".$riga['nome']."</option>";
			}
			?>
            </select>
            </p>

Questa è la prima select che contiene alcuni valori presi dal DB, invoco la funzione getTipoVeicolo che in base al valore della option selezionata, tramite AJAX dovrebbe riempire l'altra select.


Questa è la funzione getTipoVeicolo inclusa nel codice js:

function getTipoVeicolo(str){	
	var url = "getTipoVeicolo.php?q="+str;
	request = CreaOggettoXMLHttpRequest(tipoVeicolo);
	request.open("GET",url,true);
	request.send(null);	
}

Questa è la funzione tipoVeicolo, che ho trovato in giro per il web, grazie a questo stratagemma, nel caso in cui si tratti di IE crea una option forfettara che verrà poi eliminata dal browser, e permette il funzionamento su IE8 :

function tipoVeicolo(){
	if(request.readyState == 4 && request.status == 200){
		document.getElementById("ptipoveicolo").style.display = "block";		
		if(document.all){
			opts="<option>opzione</option>"+request.responseText;			
		}		
		else{
		opts=request.responseText;			
		}		
		document.getElementById("tipospecveicolo").innerHTML = opts;
		if (document.all){
		document.getElementById("tipospecveicolo").outerHTML = document.getElementById("tipospecveicolo").outerHTML;			
		}		
     	}		
	}

Questa è la funzione che mi crea l'oggetto xmlhttprequest in base al tipo di browser:

var request = null;
function CreaOggettoXMLHttpRequest(hand)
{
  var xmlHttp;
  try{
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
  }catch(e){
    // Internet Explorer
    try{
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
      try{
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }catch(e){
        alert("Il tuo browser non supporta AJAX!");
        return false;
      }
    }
  }
  xmlHttp.onreadystatechange= hand;
  return xmlHttp;
}

ed infine questa è la pagina getTipoVeicolo.php che preleva i dati dal db e restituisce le option desiderate:

<?php
include ("include/start_conn.php");
if($_GET['q']){
	$var = $_GET['q'];	
	$query = "SELECT tipo FROM tipospecificoveicolo WHERE nome= '".$var."'";
	$ris = mysql_query($query);
	echo "<option value=\"seleziona\" selected=\"selected\" disabled=\"disabled\">Seleziona</option>";
	while ($riga = mysql_fetch_array($ris)){
	
	echo "<option>".$riga['tipo']."</option>";
	}
	}
include ("include/close_conn.php");
?>

Su IE8,Firefox e Chrome, funziona senza problemi mentre su IE7, le option le restituisce, ma le restituisce vuote, e non so perchè, come se l'innerhtml non funzionasse, oppure il responsetext lo veda vuoto non saprei!
Vi ringrazio in anticipo!

[pietro09]

:master: mi sbaglierò (non conosco php) ma mi sembra che la chiamata ajax restituisce solo le option senza la select. Se fai davvero così, con IE non funziona (non ho provato con IE8, ma le precedenti versioni non funzionavano).
La soluzione è quella di restituire <select con dentro le <option

[Kawato]

Ciao e grazie per la risposta!

Ho modificato la funzione php in modo che mi restituisca direttamente tutta la select con le option in questo modo :

<?php
include ("include/start_conn.php");

if($_GET['q']){
    $var = $_GET['q'];    
    $query = "SELECT tipo FROM tipospecificoveicolo WHERE nome= '".$var."'";
    $ris = mysql_query($query);
    echo "<select id=\"tipospecveicolo\" name=\"tipospecveicolo\" onchange=\"getUsoVeicolo(this.options[this.selectedIndex].value);\">";
    echo "<option value=\"seleziona\" selected=\"selected\" disabled=\"disabled\">Seleziona</option>";
    while ($riga = mysql_fetch_array($ris)){    
    echo "<option>".$riga['tipo']."</option>";    
    }
    echo "</select>";
}

include ("include/close_conn.php");
?>

e la funzione javascript così:

function tipoVeicolo(){
    if(request.readyState == 4 && request.status == 200){
        document.getElementById("ptipoveicolo").style.display = "block";
        document.getElementById("ptipoveicolo").innerHTML = request.responseText;
        }
    } 

lo stesso problema..in Firefox e Chrome funziona...mentre IE7 proprio non vuole saperne, nella funzione tipoVeicolo() ci entra perchè il

con id ptipoveicolo viene visualizzato però il responseText è come se fosse vuoto...

[pietro09]

:master: ascolta, perchè non provi ad utilizzare ajax tramite jquery? lo dico perchè mi ha sempre funzionato più che bene.

:master: vedo che fai la richiesta ajax tramite GET e non POST. Questo mi ha sempre dato problemi perchè IE usa la cache

[Kawato]

Infatti ci avevo pensato..solo che devo iniziare da zero perchè non ho mai usato jquery ehheheee, è il momento buono per farlo!!! Grazie lo stesso!

[pietro09]

Originariamente inviato da Kawato
Infatti ci avevo pensato..solo che devo iniziare da zero perchè non ho mai usato jquery ehheheee, è il momento buono per farlo!!! Grazie lo stesso!

:master: non serve utilizzare TUTTO jquery (anche se sarebbe meglio), ma solo ajax.
Io ho qualche esempio, nel caso servisse

[Xinod]

proverei prima ad evitare di ripescare dalla cache

[Kawato]

@pietro09: si mi faresti un grande favore!

@Xinod: usando POST anzichè GET?

[pietro09]

questo esempio dovrebbe andare :master:

function fai_richiesta_ajax_post()
{
    //faccio comparire l'indicatore di attesa
    $('#div1').html('[img]../../../immagini/indicator.white.gif[/img]');
    
    //imposto la pagina da richiamare
    //richiamo pagina corrente e mando pure il parametro per dire al server cosa fare
    var url = "?parametro_ajax=1";
    
    //i dati da spedire sono tutti quelli di form1 più variabile1 di valore1
    var dati = $("#form1").serialize() + "&" + "variabile1=valore1";
    
    //faccio la richiesta ajax al server specificando l'url da richiamare, i dati da spedire,
    //il modo di spedizione, la procedura da eseguire in caso di successo,
    //la procedura da eseguere in caso di errore
    $.ajax({url:url, data:dati, type: 'post', success:callback, error:onerror});
    
    //procedura eseguita in caso di successo
    function callback(data, textStatus)
    {
        //metto l'html ricevuto in div1
        $("#div1").html(data);
    }
    
    //procedura eseguita in caso di errore
    function onerror(XMLHttpRequest, textStatus, errorThrown)
    {
        //cancello il contenuto di div1 e alert di errore
        $('#div1').html("");
        alert("Errore richiesta ajax");
    }
    
    
    
}

[Kawato]

Grazie mille!
Partirò da qui