Problema XMLHttpRequest+mootools

[-AA-]

Ho un problema per usare l'oggetto XMLHttpRequest + mootools nella stessa pagina, il problema lo riscontro solo su firefox, forse dovuto al tipo di gestore usato per l'XMLHttpRequest:

Problema:

Ho un form con alcune select a cascata che man mano vengono popolate in base alla scelta fatta dalla precedente:
queste select sfruttano PHP+XMLHttpRequest();

Nella stessa pagina ho integrato SqueezeBox.js (http://digitarald.de/project/squeeze...showcase/ajax/) per aprire una pagina

Succede che, SqueezeBox.js, causa inlcusione di mootools version: 1.2.0, crea dei problemi sul funzionamento delle select a cascata, cosa testata, infatti eliminando le inclusioni di mootools version: 1.2.0 le select riprendono ad andare.

Il JS che mi permette le select a cascata è questo:

var xmlHttp = getXmlHttpObject();

function loadList(tb, id){
xmlHttp.open('GET', 'request.php?table='+tb+'&id='+id, true);
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.send(null);
}
function addOption(select, value, text) {
	//Aggiunge un elemento <option> ad una lista <select>
	var option = document.createElement("option");
	option.value = value,
	option.text = text;
	try {
		select.add(option, null);
	} catch(e) {
		//Per Internet Explorer
		select.add(option);
	}
}
function getSelected(select) {
	//Ritorna il valore dell'elemento <option> selezionato in una lista
	return select.options[select.selectedIndex].value;
}
function stateChanged() {
	if(xmlHttp.readyState == 4) {
		//Stato OK
		if (xmlHttp.status == 200) {
			var resp = xmlHttp.responseText;
			
			if(resp) {
				//Le coppie di valori nella striga di risposta sono separate da ;
				var values = resp.split(';');
				//Il primo elemento è l'ID della lista.
				var listId = values.shift();
				var select = document.getElementById(listId);
				//Elimina i valori precedenti
				while (select.options.length) {
					select.remove(0);
				} 
				
				if(listId == 'regioni') {
					addOption (select, 0, ' Seleziona ');
				}
				
				if(listId == 'province') {
					addOption (select, 0, ' Seleziona ');
				}
				if(listId == 'comuni') {
					addOption (select, 0, ' Seleziona ');
				}
				
				
				var limit = values.length;
				
				for(i=0; i < limit; i++) {
					var pair = values[i].split('|');
					//aggiunge un elemento <option>
					addOption(select, pair[0], pair[1]);
				}
			}
		} else {
			alert(xmlHttp.responseText);
		}
	}
}

function getXmlHttpObject()
{
  var xmlHttp=null;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest(); 
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  return xmlHttp;
}

Mentre SqueezeBox (come da sito) è questo

<link type="text/css" media="screen" rel="stylesheet" href="SqueezeBox.css" />
<script type="text/javascript" src="./js/SqueezeBox.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
	SqueezeBox.assign($$('a.boxed'), {
		parse: 'rel'
	});
 
});
</script>

Il problema si verifica solo su FIREFOX mentre su IE funziona tutto regolarmente, da quì la mia deduzione che il problema sta in questo blocco:

try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}

visto che mi servono entrambi, come posso farli convivere?

[artorius]

Guarda, ti conviene usare l'oggetto per le chiamate AJAX di MooTools:

var req = null;
window.addEvent('domready', function(){
   req = new Request({
       'url' : 'request.php',
       'method' : 'get',
       onSuccess : NewStateChange
   });
});

function loadList(tb, id){
    req.send('table='+tb+'&id='+id);
}

function NewStateChange(resp){
	if(resp) {
		//Le coppie di valori nella striga di risposta sono separate da ;
		var values = resp.split(';');
		//Il primo elemento è l'ID della lista.
		var listId = values.shift();
		var select = document.getElementById(listId);
		//Elimina i valori precedenti
		while (select.options.length) {
			select.remove(0);
		} 
				
		if(listId == 'regioni') {
			addOption (select, 0, ' Seleziona ');
		}
				
		if(listId == 'province') {
			addOption (select, 0, ' Seleziona ');
		}
		if(listId == 'comuni') {
			addOption (select, 0, ' Seleziona ');
		}
				
				
		var limit = values.length;
				
		for(i=0; i < limit; i++) {
			var pair = values[i].split('|');
			//aggiunge un elemento <option>
			addOption(select, pair[0], pair[1]);
		}
	}
}

BTW se stai facendo le select autoaggiornanti, avevo scritto un post tempo addietro con un esempio pratico utilizzando mootools, lo puoi trovare anche qui: http://artorius.netsons.org/new/funz...roduzione.html

L'articolo tratta come creare una form per l'inserimento dati utente, tra i quali il comune di residenza tramite 3 select a partire da regione->provincia->comune. Spero ti sia di aiuto.