Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 15
  1. #1

    AIUTO per select correlate fra di loro ... PHP e Javascript

    Carissimi,
    sono nuovo di questo forum e sono da poco alle prese con un programma in PHP
    per realizzare delle select correlate fra di loro. Spero davvero che
    qualcuno mi possa dare una mano perche' le ho provate tutte ma non riesco proprio
    a risolvere da solo, se avete un po' di tempo per me ve ne sarei grato. Ora vi spiego
    meglio.

    Come vi accennavo vorrei realizzare una semplice pagina web che ha due due select
    collegate fra di loro.

    La prima si chiama "Anno" e deve visualizzare gli anni in cui sono sono presenti degli eventi.
    Le informazioni da visualizzare sono prese da una tabella e poi caricate in un array:

    $array = $wpdb->get_results("SELECT DISTINCT(date_format(`data`, '%Y')) AS id FROM ".$wpdb->prefix."gpaltvt_gare order by id");

    l'uso di wpdb e' necessario perche' uso Wordpress ma questo funziona correttamente.
    A questo punto con il codice PHP che segue visualizzo la select:

    echo "Anno: ";
    echo "<select id=\"anno\" name=\"anno\" >";
    foreach ($array as $anno)
    {
    echo "<option value=".$anno->id.">".$anno->id."</option>";
    }
    echo "</select> \n";

    questa parte e' corretta e' funziona ora veniamo alla seconda select che si chiama gara.

    Questa per me e' la parte piu' difficile perche' questa seconda deve essere collegata alla prima.

    Ve la spiego con un esempio.
    Se l'utente seleziona l'anno 2016, nella select gara dovranno essere visualizzati solo gli
    eventi relativi al 2016 , analogamente se nella select anno si seleziona 2017 nella
    select gara dovranno essere visualizzate solo le gare del 2017 , poi l'utente scegli
    quale gara vuole e qui parte un altro SQL.

    Le informazioni per popolare questa seconda select (gare) sono tutte in un altro array:

    $gare = $wpdb->get_results("SELECT id,nome,luogo,data FROM ".$wpdb->prefix."gpaltvt_gare order by data");

    in pratica per come ho impostato io il programma l'array gare contiene tutto e nella seconda
    select devo filtrare solo le informazioni relative all'anno precedentemente selezionato.

    Qui viene il bello , ovvero il brutto , perche' ho letto tanti post ed alcune informazioni su
    onchange e su javascript ma non sono prorio riuscito a venirne a capo.

    Per favore c'e' qualcuno che puo' darmi una mano ? Ovviamente e' tutto no profit come
    avrete capito questo non e' il mio mestiere.

    Grazie a tutti
    Saluti
    Willy

  2. #2
    Utente di HTML.it L'avatar di badaze
    Registrato dal
    Jun 2002
    residenza
    Lyon
    Messaggi
    5,359
    Hai bisogno di ajax.
    Guarda l'esempio. Ho semplificato usando una tabella "eventi" a minima. Dovrai quindi addattare al caso tuo. Comunque il procedimento c'è.
    ATTENZIONE : il collegamento al db è da modificare con i tuoi dati
    In allegato la mia tabella eventi con i dati. Da importare in phpMyadmin (l'estensione è txt ma deve essere .sql pour l'importazione)Capture20170916_003.JPG

    Codice PHP:
    <!DOCTYPE html>
    <?php
    $bdd 
    = new PDO('mysql:host=127.0.0.1; dbname=tests','root','', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,PDO::MYSQL_ATTR_LOCAL_INFILE => true));
    //------ DEBUT
    $query  "SELECT distinct(anno) FROM eventi order by anno";
    $sth    $bdd->prepare($query);
    $sth->execute();
    ?>
    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <style type="text/css">
    </style>
    <script>
    function riempiSecondaSelect(valore)
    {
     if (valore != 0)
     {
      $.ajax
      ({            
        type: "POST",            
        url: "test9369b.php",            
        data: {anno: valore},            
        dataType: "html",            
        success: function(dati_seconda_select){    
         $("#div_eventi").html(dati_seconda_select)
         return;    
        },
        error:function(msg){
         alert('Errore : '+msg);
        }
      }); 
     } 
     // in caso di errore non metto niente !!!
     document.getElementById("div_eventi").innerHTML = '';
     return; 
     
    }
    </script>
    </head>
    <body>
    Anno : 
    <select id="anno" onclick="riempiSecondaSelect(this.value)">
     <option value="0">Seleziona</option><?php
     
    while (list($anno) = $sth->fetch(PDO::FETCH_NUM)) 
     {
    ?>
      <option value="<?php print $anno;?>"><?php print $anno;?></option><?php
     
    }?>
    </select>
    <br/>
    <div id="div_eventi">
    </div>
    </body>
    </html>
    File : test9369b.php
    Codice PHP:
    <?php
    //---- controllo il valore del parametro "anno"
    if (!isset($_POST['anno']))
    {
     
    //---- parametro non è stato trasmesso esco !
     
    print "";
     die();
    }
    $anno_eventi $_POST['anno'];
    //---- Controllo se valore numerico
    if (!is_numeric($anno_eventi)) {
     
    //---- dato non numerico esco !
     
    print "";
     die(); 
    }
    $bdd = new PDO('mysql:host=127.0.0.1; dbname=tests','root','', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,PDO::MYSQL_ATTR_LOCAL_INFILE => true));
    //------ Lista degli eventi
    $query  "SELECT * FROM eventi where anno = $anno_eventi order by anno, id";
    $sth    $bdd->prepare($query);
    $sth->execute();?>
    <select id="eventi"><?php
    while (list($anno,$id,$evento) = $sth->fetch(PDO::FETCH_NUM)) 
    {
    ?>
     <option value="<?php print $evento;?>" id="evento_$anno_$id"><?php print $evento;?></option><?php
    }
    ?>
    </select>
    File allegati File allegati
    Ridatemi i miei 1000 posts persi !!!!
    Non serve a nulla ottimizzare qualcosa che non funziona.
    Cerco il manuale dell'Olivetti LOGOS 80B - www.emmella.fr

  3. #3
    Utente di HTML.it L'avatar di badaze
    Registrato dal
    Jun 2002
    residenza
    Lyon
    Messaggi
    5,359
    Nel file test9369b.php

    Rimpiazzare la riga option con :
    Codice PHP:
     <option value="<?php print $evento;?>" id="<?php print "evento_".$anno."_".$id;?>"><?php print $evento;?></option><?php
    Ridatemi i miei 1000 posts persi !!!!
    Non serve a nulla ottimizzare qualcosa che non funziona.
    Cerco il manuale dell'Olivetti LOGOS 80B - www.emmella.fr

  4. #4
    Ciao !!!
    ho letto solo ora ma cerchero' di recuperare velocemente.
    Il tuo esempio e' sicuramente funzionante ma anche un po' complesso, io sono veramente poco pratico
    di PHP ma se si tratta di fare cose semplici ci arrivo peor' sono a zero con programmazione ad oggeti
    javascript ed ajax.

    Ad essere sincero avevo presto questa strada. Un po' piu' semplice ed alla mia portata.
    In pratica ho trovato un esempio abbastanza compensibile che mi aveva funzionato e lo
    stavo adattando alla mia esigenza. Te lo posto dimmi tu se puo' andare bene.

    <?php
    global $wpdb;
    // carica tutte le gare
    $gare = $wpdb->get_results("SELECT id,nome,luogo,data FROM ".$wpdb->prefix."gpaltvt_gare order by data");
    $anni = $wpdb->get_results("SELECT DISTINCT(date_format(`data`, '%Y')) AS id FROM ".$wpdb->prefix."gpaltvt_gare order by id");
    ?>

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function populate(s1,s2){
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";
    // da qui in poi lo devo mettere a punto i dati hard code devo sostituirli con quelli letti da DB e che sono nell'arry anni
    // stavo solo cercando di fare qualche test per capire la logica del programma che avevo trovato.
    if(s1.value == "2016"){
    // con la riga seguente ho avuto un problema con il carattere |
    var optionArray = ["|","<?php foreach ( $gare as $gara ) { echo $gara->id;echo chr(124);echo $gara->nome; } ?>" ];
    } else if(s1.value == "2017"){
    // la riga che segue deve essere cambiata per visualizzare solo le gare 2017 ma qui non ci sono ancora
    // arrivato
    var optionArray = ["|","avenger|Avenger","challenger|Challenger","cha rger|Charger"];
    }
    for(var option in optionArray){
    var pair = optionArray[option].split("|");
    var newOption = document.createElement("option");
    newOption.value = pair[0];
    newOption.innerHTML = pair[1];
    s2.options.add(newOption);
    }
    }

    </script>
    </head>
    <body>
    <h2>Visualizza Classifica
    Anno:
    <select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
    <option value=""></option>
    <?php
    foreach ($anni as $anno)
    {
    $year=$anno->id;
    echo "<option value=".$year.">".$year."</option>";
    }
    ?>
    </select>
    Gara:
    <select id="slct2" name="slct2"></select>
    <hr />
    </body>
    </html>

    cosa ne pensi ????

    in pratica all'interno della funzione populate stavo cercando di inserire questo:

    if(s1.value == "2016"){
    var optionArray = ["|","<?php foreach ( $gare as $gara ) { if ( preg_match($year1,$gare->data) ) { echo $gara->id;echo chr(124);echo
    $gara->nome; } } ?>" ];

    in pratica anche se s1.valure == "2016" e' solo una prova e deve essere cambiato quello che segue invece potrebbe essere corretto come logica , ovvero se year1, adesso assegnato a mano a 2016, e' contenuto in data lo visualizza. questa e' l'idea ma non funge ,penso di avere problemi con la sintassi !

    Grazie mille per il tuo aiuto.
    Ultima modifica di willy-70; 16-09-2017 a 18:52

  5. #5
    Utente di HTML.it L'avatar di badaze
    Registrato dal
    Jun 2002
    residenza
    Lyon
    Messaggi
    5,359
    Beh. La strada che prendi non puo' funzionare. Tutta la parte php e database viene trattata dal server e la parte javascript dal browser. Bisogna sapere che quando il javascript entra in azione la parte server (ovvero php/database) è terminata. Il server crea una pagina html che viene mandata al browser dopo della fine dello script php.

    Per popolare una select, partendo dal valore di un'altra, hai 3 possibilità.

    1 - fai una form ma devi ricaricare la pagina per aggiornare la seconda select.
    2 - riempi un array con tutti i valori della tabella e da questo array con l'aiuto di js popoli la seconda a partire dal valore della prima (quello che si faceva 10 anni fa) ma se hai centinaia/migliaia di record è un macello.
    3 - usi ajax con o senza jquery il che ti consente ti aggiornare la seconda select in diretta e in maniera semplice.

    Il codice che ho postato è molto più semplice di quello che stai modificando. Comunque vedi te.
    Ridatemi i miei 1000 posts persi !!!!
    Non serve a nulla ottimizzare qualcosa che non funziona.
    Cerco il manuale dell'Olivetti LOGOS 80B - www.emmella.fr

  6. #6
    Grazie mille per il chiarimento ... a questo punto vorrei usare il tuo codice senza farti altre mille domande
    pero' non garantisco ;-)

    Ho visto che mi hai messo anche un capture dello schermo con quello che produce il tuo programma magari dimmi solo
    se ho capito bene. Lo script visualizza solo la scelta Anno poi in base al valore che l'utente seleziona visualizza subito sotto l'elenco
    degli eventi e non propone un'altra selezione distina, il mio adesso fa una cosa simile, quella che ti allego . E' solo un piccolo dettaglio grafico niente di che'.
    La cosa importante e' che a seguito della scelta finale dell'utente ovvero l' Evento all'interno di un anno deve
    attivarsi un' select che ha a leggere i dati da una tabelle e visualizzarli all'interno della pagina. La select non e' un problema dimmi solo dove posso metterla
    Grazie !!!!!Schermata 2017-09-16 alle 19.44.57.png

  7. #7
    Utente di HTML.it L'avatar di badaze
    Registrato dal
    Jun 2002
    residenza
    Lyon
    Messaggi
    5,359
    Non sono sicuro di avere capito bene. Il codice che posto visualizza un testo dopo del change sulla seconda select.

    Codice PHP:
    <!DOCTYPE html>
    <?php
    $bdd 
    = new PDO('mysql:host=127.0.0.1; dbname=tests','root','', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,PDO::MYSQL_ATTR_LOCAL_INFILE => true));

    //------ DEBUT
    $query  "SELECT distinct(anno) FROM eventi order by anno";

    $sth    $bdd->prepare($query);
    $sth->execute();
    ?>
    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <style type="text/css">
    </style>

    <script>
    function testoEvento(valore)
    {
        document.getElementById("testo_evento").innerHTML = '';
        
        $.ajax
        ({            
                type: "POST",            
                url: "test9369c.php",            
                data: {id: valore},            
                dataType: "html",            
                success: function(dati_testo){    
                    $("#testo_evento").html(dati_testo);
                    return;    
                },
                error:function(msg){
                    alert('Errore : '+msg);
                }
        }); 
        return;    
        
    }

    function riempiSecondaSelect(valore)
    {
        document.getElementById("testo_evento").innerHTML = '';
        if (valore != 0)
        {
            $.ajax
            ({            
                    type: "POST",            
                    url: "test9369b.php",            
                    data: {anno: valore},            
                    dataType: "html",            
                    success: function(dati_seconda_select){    
                        $("#div_eventi").html(dati_seconda_select);
                        testoEvento(document.getElementById("eventi").value);
                        return;    
                    },
                    error:function(msg){
                        alert('Errore : '+msg);
                    }
            }); 
        }    

        // in caso di errore non metto niente !!!
        document.getElementById("div_eventi").innerHTML = '';
        return;    
        
    }
    </script>
    </head>
    <body>

    Anno : 
    <select id="anno" onclick="riempiSecondaSelect(this.value)">
        <option value="0">Seleziona</option><?php
        
    while (list($anno) = $sth->fetch(PDO::FETCH_NUM)) 
        {
    ?>
            <option value="<?php print $anno;?>"><?php print $anno;?></option><?php
        
    }?>
    </select>
    <br/>
    <div id="div_eventi">
    </div>
    <div id="testo_evento">
    </div>
    </body>
    </html>
    test9369b.php
    Codice PHP:
    <?php
    //---- controllo il valore del parametro "anno"
    if (!isset($_POST['anno']))
    {
        
    //---- parametro non è stato trasmesso esco !
        
    print "";
        die();
    }

    $anno_eventi $_POST['anno'];
    //---- Controllo se valore numerico
    if (!is_numeric($anno_eventi)) {
        
    //---- dato non numerico esco !
        
    print "";
        die();    
    }

    $bdd = new PDO('mysql:host=127.0.0.1; dbname=tests','root','', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,PDO::MYSQL_ATTR_LOCAL_INFILE => true));

    //------ Lista degli eventi
    $query  "SELECT * FROM eventi where anno = $anno_eventi order by anno, id";

    $sth    $bdd->prepare($query);
    $sth->execute();?>
    <select id="eventi" onchange="testoEvento(this.value)"><?php
    while (list($anno,$id,$evento) = $sth->fetch(PDO::FETCH_NUM)) 
    {
    ?>
        <option value="<?php print "evento_".$anno."_".$id;?>"><?php print $evento;?></option><?php
    }
    ?>
    </select>
    test9369c.php
    Codice PHP:
    <?php
    //---- controllo il valore del parametro "id"
    if (!isset($_POST['id']))
    {
        
    //---- parametro non è stato trasmesso esco !
        
    print "";
        die();
    }
    //---- id ha la struttura seguente evento + _ + anno evento + _ + id
    $id          $_POST['id'];
    $array       explode('_',$id);
    if (
    count($array) != 3)
    {
        
    //---- array non ha 3 posti
        
    print "errore 1";
        die();    
    }
    $anno_eventi $array[1];
    $id_evento   $array[2];
    //---- Controllo se valore numerico
    if (!is_numeric($anno_eventi) || !is_numeric($id_evento)) {
        
    //---- dato non numerico esco !
        
    print "errore 2";
        die();    
    }

    $bdd = new PDO('mysql:host=127.0.0.1; dbname=tests','root','', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,PDO::MYSQL_ATTR_LOCAL_INFILE => true));

    //------ Lista degli eventi
    $query  "SELECT * FROM eventi_testo where anno = $anno_eventi and id= $id_evento order by anno, id, riga";

    $sth    $bdd->prepare($query);
    $sth->execute();
    while (list(
    $anno,$id,$riga,$testo) = $sth->fetch(PDO::FETCH_NUM)) 
    {
    ?>
        <?php print $testo;?><br/><?php
    }
    ?>
    Allego anche la tabella eventi_testo struttura e dati da importare in phpMyAdmin. Cambiare l'estensione passandola da txt a sql.
    File allegati File allegati
    Ridatemi i miei 1000 posts persi !!!!
    Non serve a nulla ottimizzare qualcosa che non funziona.
    Cerco il manuale dell'Olivetti LOGOS 80B - www.emmella.fr

  8. #8
    Utente di HTML.it L'avatar di badaze
    Registrato dal
    Jun 2002
    residenza
    Lyon
    Messaggi
    5,359
    Ridatemi i miei 1000 posts persi !!!!
    Non serve a nulla ottimizzare qualcosa che non funziona.
    Cerco il manuale dell'Olivetti LOGOS 80B - www.emmella.fr

  9. #9
    Schermata 2017-09-18 alle 16.52.56 copy.jpgtroppo gentile non ho parole... sto facendo i primi test. Ho copiato tutto nella directory di wordpress dove avevo previsto
    il file agganciato con il mio shortcode . Ho creato la tabella ed importato i dati. Ho modificato nelle due select il nome della tabella eventi in eventi_testo e poi l'ho fatto
    girare. Quello che ottengo cosi' al volo e' un errore un po' criptico per me, e' in allegato. Faro' qualche altra prova poi ti faro' sapere.
    Grazie mille !!

  10. #10
    Utente di HTML.it L'avatar di badaze
    Registrato dal
    Jun 2002
    residenza
    Lyon
    Messaggi
    5,359
    E' un errore che scatta se la richiesta ajax tramite jquery non va a buon fine.
    Nel mio esempio i vari file php sono nella stessa cartella. Sicuro che i file hanno il nome giusto ?
    Ridatemi i miei 1000 posts persi !!!!
    Non serve a nulla ottimizzare qualcosa che non funziona.
    Cerco il manuale dell'Olivetti LOGOS 80B - www.emmella.fr

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.