Un saluto a tutti.
Sono nuovissimo di joomla e già ho iniziato a cozzare contro i primi problemi!
Vorrei usare una soluzione ajax per risolvere la classica esigenza di due dropbox coordinate che permettono di selezionare regioni e province.
Ogni volta che cambia l'elemento selezionato in una delle dropbox lo script fa partire le sue belle chiamate asincrone che interrogano due tabelle di un DB cambiando il contenuto dei menu a tendina di conseguenza.
Il tutto funziona egregiamente fuori da joomla; in Joomla funziona correttamente con Explorer (IE 8 per l'esattezza, la versione che uso io), con Firefox carica solo la prima dropbox, quella delle Regioni, mentre quella delle province rimane vuota.
Implementazione in Joomla (1.7)
L'unica estensione usata è Jumi che semplifica l'inclusione di codice php personalizzato.
Per prima cosa ho creato un articolo e lì messo il riferimento al file php via Jumi.
{jumi [jumi_includes/form-meteo-utente.php]}Il contenuto del file in questione, che contiene il form vero e proprio, è il seguente:
<form id="fmeteo" name="fmeteo" method="post" action="">
<fieldset>
<p>
<label for="regioni">Regione</label>
<!--Quando viene fatta una scelta, a loadList viene passata il nome della tabella (province), e l'id -->
<select name="regioni" id="regioni" onchange="loadList('province', getSelected(this))" >
</select>
<label for="province">Provincia</label>
<select name="province" id="province">
</select>
</p>
<p class="submit">
<button id="registerButton" type="submit" onclick="return checkForm(formTira);">
Cerca</button>
</p>
</fieldset>
</form>
<!--***1***All'apertura della pagina viene prima caricata la lista delle regioni.
Passa alla funzione loadList() di lists.js il nome della tabella (regioni) e un ID.
L'id passato inizialmente è 0 (corrisponde a -- Selezionare regione --)
-->
<script type="text/javascript">
//<![CDATA[
loadList('regioni', 0);
//]]>
</script>Ho inserito il riferimento al file javascript nell'header del template (index.php) nel seguente modo:
<?php
//js per il caricamento dinamico elenco regioni/province
$document = &JFactory::getDocument();
$document->addScript('/joomla/media/system/js/lists.js');
?>E il contenuto del file lists.js è il seguente:
var xmlHttp = getXmlHttpObject();
//riceve il nome di una tabella ed un ID
function loadList(tb, id){
//***2***passa a request.php, via GET il nome della tabella e l'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, '-- Selezionare regione --');
}
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;
}Dulcis in fundo nella root dell'istallazione di joomla, ho messo il file request.php
<?php
//***3***chiamata da lists.js
//usata per caricare dinamicamente (AJAX) la lista regioni //-province
//riceve due variabili, il nome di una TABELLA (table) -che può //essere regioni o province- e un ID numerico.
//Modify constants with data needed to access your own database
define('DB_HOST','localhost');
define('DB_NAME','serviziettometeodb');
define('DB_USER','root');
define('DB_PASSWORD','');
//connessione al DB
$conn = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD) or die;
mysql_select_db(DB_NAME) or die;
//I valori in input vanno verificati
//id deve essere un valore numerico
$pid = (int)$_REQUEST['id'];
//maschera eventuali caratteri speciali in table
$tb = mysql_real_escape_string($_REQUEST['table'], $conn);
//vede quale delle due tabelle è stata selezionata (regioni o //province)
//e compone la query di conseguenza.
switch($tb) {
case 'regioni':
//restituisce la lista delle regioni ordinata per nome e i rispettivi id-regione
$sql="SELECT id, nome FROM " .$tb. " ORDER BY nome";
break;
case 'province':
//restituisce la lista di province della regione selezionata e i loro id
$sql="SELECT id, nome FROM " .$tb. " WHERE id_regione= " .$pid. " ORDER BY nome";
break;
}
//Il primo elemento della risposta è il nome della tabella (= //attributo ID del tag select)
$out="$tb;";
if($result = mysql_query($sql, $conn)) {
while ($row = mysql_fetch_row($result)) {
$out .= $row[0] . '|' . $row[1] . ';';
}
}
//Rimuove il carattere ; in coda
echo rtrim($out, ';');
?>Ho testato lo script con diversi browser e fuori da Joomla tutto funziona a meraviglia, ma dentro Joomla funziona solo con IE; con gli altri non viene popolata la seconda dropbox.
Qualcuno può aiutarmi a capire?
Grassie!
