filtrare select senza ricaricare la pagina con javascript

[mpala]

Ciao a tutti,
ho un form con una select generata tramite php che prende i valori da un db mysql. Vorrei filtrare i dati in base al valore inserito nel campo di testo "filtra_inserzionista" contenuto nello stesso modulo ovviamente senza ricaricare la pagina in quanto il form contiene anche altri campi e select popolate dal db. Come faccio ad inserire nella variabile $sql il riferimento a questo campo? Devo per forza utilizzare ajax? Potete farmi un esempio su come devo procedere?
Grazie.

Ciao.

codice:
//--------------sql per select crit_inserzionista
$sql=("SELECT ente from t_dayleg GROUP BY ente ORDER BY ente");
$risultato=@$conn->query($sql);
if ($risultato == FALSE)
{
$errnum=$conn->errno;
$errmsg=$conn->error;
echo $errmsg;
echo $errnum;
$conn->close;
exit;
}

//genera select crit inserzionista

$crit_inserzionista="<select name='crit_inserzionista' multiple size=10>";
$crit_inserzionista=$crit_inserzionista."<option selected value=''></option>";
while (($row=@$risultato->fetch_assoc()) !== NULL)
{
$crit_inserzionista=$crit_inserzionista."<option value='".$row['ente']."'>".$row['ente']."</option>";
}
$crit_inserzionista=$crit_inserzionista."</select>";

[artorius]

temo che Ajax sia l'unica soluzione per questo. Prova con Prototypesjs ( http://www.prototypejs.org/learn ), devi però fare la funzione che genera la select esterna al file della pagina. Ti do un consiglio:

form.php
contiene la form SENZA la select. All'elemento dentro il quale la select dovrà apparire, assegni un id. Assegni un id anche al campo input text che firtrerà la select.
esempio:

<form action="..." method="POST">
...
   <input type="text" name="filtra_inserzionista" id="filtra_inserzionista" /> 
   <div id="SelectWrapper">
   </div>
...
</form> 

select.php
Il file che generala select con il codice che hai inserito, aggiungici il WHERE nella query che prende il valore passato in $_POST['filtra_inserzionista'] (dopo averlo controllato che non sia vuoto e tolti i valori per le injection)

A questo punto importa nell'head di form.php prototype.js e crea la funzione:

function prepareSelect(idWrapper, filter)
{
   new Ajax.Updater(idWrapper, 'select.php', {method : 'post', parameters : {filtra_inserzionista : filter}});
} 

poi aggiungici:

Event.observe(window, 'load', function(){
   prepareSelect('SelectWrapper', '');
   $('filtra_inserzionista').observe('keyup', function(){
      prepareSelect('SelectWrapper', this.readAttribute('value'));
   })
}) 

Dovrebbe andare.

[mpala]

ho fatto tutto però quando chiamo la funzione:

function prepareSelect(idWrapper, filter)
quali parametri devo mettere per idWrapper e filter? ho abbinato questa funzione all'evento OnClick del pulsante, però si attiva da sola al caricamento della pagina visualizzando tutti i valori presenti nel db.

poi ho modificato la funzione successiva sostituendo div_inserzionista a SelectWrapper:

Event.observe(window, 'load', function(){
prepareSelect('div_inserzionista', '');
$('filtra_inserzionista').observe('keyup', function(){
prepareSelect('div_inserzionista', this.readAttribute('value'));
})
})

la pagina leg_inserzionisti.php in cui ho messo la select è la seguente:

<?php
//modificare variabile in modo tale che non si corra il rischio di sql iniection
$_crit_inserzionista=$_POST['filtra_inserzionista'];

//stabiliamo la connessione con il database
$server='localhost';
$user='root';
$password='';
$db='dayleg2008_web';
If (substr($_SERVER['SERVER_NAME'],'',9) != "localhost") $db="mediascan";


$conn=new mysqli($server,$user,$password,$db);

If (mysqli_connect_errno() !=0)
{
$errnum=mysqli_connect_errno();
$errmsg=mysqli_connect_error();
echo "Connessione fallita: ($errno) $errmsg
\n";
exit;
}

//imposta set di caratteri
$conn->query("SET NAMES 'utf8'");
//--------------esegue select per drop down list crit_inserzionista

$sql=("SELECT ente from t_dayleg WHERE ente LIKE '%$crit_inserzionista%' GROUP BY ente ORDER BY ente");
$risultato=@$conn->query($sql);
if ($risultato == FALSE)
{
$errnum=$conn->errno;
$errmsg=$conn->error;
echo $errmsg;
echo $errnum;
$conn->close;
exit;
}

//costruisce select crit inserzionista

$crit_inserzionista="<select name='crit_inserzionista' id='crit_inserzionista' multiple size=10>";
// $crit_inserzionista=$crit_inserzionista."<option selected value=''></option>";
while (($row=@$risultato->fetch_assoc()) !== NULL)
{
$crit_inserzionista=$crit_inserzionista."<option value='".$row['ente']."'>".$row['ente']."</option>";
}
$crit_inserzionista=$crit_inserzionista."</select>";

//clean set risultati
$risultato->close();

//chiude la connessione
$conn->close();
echo $crit_inserzionista;
?>

Grazie 1000.

ciao

[artorius]

Originariamente inviato da mpala
ho fatto tutto però quando chiamo la funzione:

function prepareSelect(idWrapper, filter)
quali parametri devo mettere per idWrapper e filter? ho abbinato questa funzione all'evento OnClick del pulsante, però si attiva da sola al caricamento della pagina visualizzando tutti i valori presenti nel db.

Forse perché l'evento che ho legato alla input text lancia la funzione ogni volta che premi un tasto...

togli la definizione dell'evento onclick sul bottone, che è una vecchia e buggata sintassi ed usa quella DOM2 estesa dalle funzionalità di prototypejs

Event.observe(window, 'load', function(){
   prepareSelect('div_inserzionista', '');
   $('idBottone').observe('click', function(){
      prepareSelect('div_inserzionista', $('filtra_inserzionista').readAttribute('value'));
   })
}) 

Dove al posto di idBottone metti l'id che assegni al pulsante che attiva la funzione.

la pagina leg_inserzionisti.php in cui ho messo la select è la seguente:

<?php
//modificare variabile in modo tale che non si corra il rischio di sql iniection
$_crit_inserzionista=$_POST['filtra_inserzionista'];

//stabiliamo la connessione con il database
$server='localhost';
$user='root';
$password='';
$db='dayleg2008_web';
If (substr($_SERVER['SERVER_NAME'],'',9) != "localhost") $db="mediascan";


$conn=new mysqli($server,$user,$password,$db);

If (mysqli_connect_errno() !=0)
{
$errnum=mysqli_connect_errno();
$errmsg=mysqli_connect_error();
echo "Connessione fallita: ($errno) $errmsg
\n";
exit;
}

//imposta set di caratteri
$conn->query("SET NAMES 'utf8'");
//--------------esegue select per drop down list crit_inserzionista

$sql=("SELECT ente from t_dayleg WHERE ente LIKE '%$crit_inserzionista%' GROUP BY ente ORDER BY ente");
$risultato=@$conn->query($sql);
if ($risultato == FALSE)
{
$errnum=$conn->errno;
$errmsg=$conn->error;
echo $errmsg;
echo $errnum;
$conn->close;
exit;
}

//costruisce select crit inserzionista

$crit_inserzionista="<select name='crit_inserzionista' id='crit_inserzionista' multiple size=10>";
// $crit_inserzionista=$crit_inserzionista."<option selected value=''></option>";
while (($row=@$risultato->fetch_assoc()) !== NULL)
{
$crit_inserzionista=$crit_inserzionista."<option value='".$row['ente']."'>".$row['ente']."</option>";
}
$crit_inserzionista=$crit_inserzionista."</select>";

//clean set risultati
$risultato->close();

//chiude la connessione
$conn->close();
echo $crit_inserzionista;
?>

Classico errore:

Riga di lettura POST
$_crit_inserzionista=$_POST['filtra_inserzionista'];

Riga select:
$sql=("SELECT ente from t_dayleg WHERE ente LIKE '%$crit_inserzionista%' GROUP BY ente ORDER BY ente");

Riga di costruzione <select:
$crit_inserzionista="<select na

Corollario alla Legge fondamentale della Programmazione sulle variabili:
"Metti due varibili che cambiano per un solo carattere e stai pur certo che le usarai sempre in maniera sbagliata"

[mpala]

ok, ho corretto, però adesso in firefox mi salta fuori l'errore "missing } in XML expression"

[artorius]

non è raggiungibile in internet? Se no, su che riga ti da errore?

[mpala]

Ho corretto, avevo provato a spostare questa parte di codice nel file .js delle funzioni, però ho visto che così non vede prototype. Facendo questa operazione ho copiato nel file .js anche la riga <script language.... e giustamente non gli piaceva!! Comunque ricapitolando, ho rimesso il blocco nel file dove risiede il form con gli altri elementi (leg_crit_ricerca.php):

<script type="text/javascript">
//funzione crit inserzionisti

function prepareSelect(idWrapper, filter)
{
new Ajax.Updater(idWrapper, 'leg_inserzionisti.php', {method : 'post', parameters : {filtra_inserzionista : filter}});
}

Event.observe(window, 'load', function(){
prepareSelect('div_inserzionista', '');
$('filtra_inserzionista').observe('click', function(){
prepareSelect('div_inserzionista', $('filtra_inserzionista').readAttribute('value'));
})
})
</script>

Se attribuisco direttamente un valore alla variabile $filtro_inserzionista anzichè ottenere il valore da $_POST['filtra_inserzionista'], esegue il filtro, altrimenti no. Credo che il problema sia nel valore del POST. idWrapper corrisponde al nome del div?

[mpala]

Adesso funziona, era il firebug di firefox che mi impediva i successivi invii dei post. Però la select si popola automaticamente con tutti i valori all'apertura della pagina, mentre deve essere l'utente a scegliere di visualizzarla. Devo impostare qualche altra opzione?

[artorius]

te l'avevo messo perchè pensavo ti servisse, togli la parte in grassetto:

Event.observe(window, 'load', function(){
prepareSelect('div_inserzionista', '');
$('filtra_inserzionista').observe('click', function(){
prepareSelect('div_inserzionista', $('filtra_inserzionista').readAttribute('value'));
})
})

[mpala]

Ti ringrazio, commento la riga nell'eventualità dovesse servirmi al caricamento della pagina. Rettifico per quanto riguarda Firefox...non funziona, è come se non vedesse il valore passato dal post. C'è qualche incompatibilità con Ajax?

Grazie 1000 per l'aiuto, mi hai tirato fuori da una strada senza uscita!!

Ciao