Visualizzazione dei risultati da 1 a 8 su 8
  1. #1
    Utente di HTML.it L'avatar di Azucchi
    Registrato dal
    Jul 2014
    Messaggi
    123

    Jquery - Funzione automatica al caricamento di una pagina

    Buonasera ho varie dropdown-list appartenti alla classe .test.
    Dovrei intercettare sia il cambiamento di stato che lo stato iniziale. Mentre per il primo ho risolto con il metodo change (Funzione 1), per il secondo non so se esiste un metodo che posso aggiungere come secondo parametro a bind o sono costretto a creare una funzione separata (Funzione 2).

    codice:
    Funzione 1:
    $(document).ready(function() {
                         $('.test').bind('change', function(){   
                               ...
                        });
    codice:
    Funzione 2:
    $(document).ready(function() {
                             ...
                        });
    Ultima modifica di Azucchi; 02-08-2014 a 18:58

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Ciao, non mi è chiaro cosa vuoi ottenere esattamente. Cosa intendi per "intercettare lo stato iniziale"?
    Una volta che avviene $(document).ready, normalmente gli elementi nella pagina sono stati creati e sono disponibili. Puoi semplicemente selezionarli con $('.test') e manipolarli come preferisci anche senza creare necessariamente una qualsivoglia funzione.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it L'avatar di Azucchi
    Registrato dal
    Jul 2014
    Messaggi
    123
    Al caricamento della pagina devo leggere il valore di due dropdown-list che serviranno come parametri per determinare i valori della terza dropdown-list. L'intento è usare le prime due dropdown-list come filtro. Il problema è che il metodo di ricerca tramite Ajax situato nel corpo della funzione change si attiva solo al cambiamento di stato di una delle 2 dropdown-list. Vorrei farlo partire anche all'inizio con i valori di default delle prime 2 dropdown-list. Il tutto con meno ridondanza possibile di codice
    Ultima modifica di Azucchi; 02-08-2014 a 19:53

  4. #4
    Utente di HTML.it L'avatar di Azucchi
    Registrato dal
    Jul 2014
    Messaggi
    123
    Forse ho risolto se catturo i valori delle due select tra il metodo ready() e il metodo bind(). Credevo che le variabili dichiarate esternamente al metodo bind() non fossero visibili al suo interno. Ora provo.

    Edit: niente, infatti le variabili dichiarate esternamente non sono visibili internamente...
    Ultima modifica di Azucchi; 02-08-2014 a 20:06

  5. #5
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Credevo che le variabili dichiarate esternamente al metodo bind() non fossero visibili al suo interno
    Dipende. Non so cosa tu abbia provato.

    Ad ogni modo puoi risolvere in diversi modi.
    Partiamo dal fatto che per una programmazione da manuale sarebbe opportuno creare delle funzioni distinte per ogni particolare azione.
    In tal caso puoi creare una funzione (chiamata sul change e sul ready) in cui esegui la chiamata ajax, e un'altra funzione che associ al success della stessa chiamata ajax, in cui aggiorni gli elementi sulla pagina.

    Ti posto uno script di esempio (molto schematico):
    codice:
    <!DOCTYPE HTML>
    <html>
      <head>
        <title>Esempio</title>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript">
          $(function(){ // lo stesso che $(document).ready(function(){
            
            // funzione di ricerca
            function cerca(){
              // qui la tua chiamata ajax
              // al success puoi richiamare la funzione di aggiornamento della pagina
              aggiornaPagina($('.test').val())
            };
            
            // funzione di aggiornamento degli elementi della pagina
            function aggiornaPagina(idVoce){
              // varie manipolazioni sulla select ecc...
              $(".risultato").val(idVoce);
            }
            
            $('.test').change(cerca); // handler sul change di test
            cerca(); // avvio la ricerca all'apertura della pagina in modo da forzarne l'aggiornamento
          })
        </script>
      </head>
      <body>
        <select class="test">
          <option value="1" selected>Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </select>
        <select class="risultato">
          <option value="1">Value 1</option>
          <option value="2">Value 2</option>
          <option value="3">Value 3</option>
        </select>    
      </body>
    </html>
    La select risultato è aggiornata in base alla scelta della select test.

    E' chiaro che tutto il procedimento può essere minimizzato con l'uso di funzioni generiche (cioè create al volo).
    In tal caso puoi eseguire un trigger dell'evento change, ad apertura pagina, in modo che sia forzato l'aggiornamento iniziale.

    Lo stesso procedimento con lo script "minimizzato":
    codice:
    <!DOCTYPE HTML>
    <html>
      <head>
        <title>Esempio</title>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript">
          $(function(){
            $('.test').change(function(){ // handler sul change di test, avvia la ricerca
              // qui la tua chiamata ajax
              // al success esegui l'aggiornamento della pagina
               $(".risultato").val($('.test').val()); // varie manipolazioni sulla select ecc...
            }).change(); // innesco il change all'apertura della pagina in modo da forzarne l'aggiornamento
          })
        </script>
      </head>
      <body>
        <select class="test">
          <option value="1" selected>Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </select>
        <select class="risultato">
          <option value="1">Value 1</option>
          <option value="2">Value 2</option>
          <option value="3">Value 3</option>
        </select>    
      </body>
    </html>
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  6. #6
    Utente di HTML.it L'avatar di Azucchi
    Registrato dal
    Jul 2014
    Messaggi
    123
    Grazie, ora mi metto a lavoro :P. Vi farò sapere

  7. #7
    Utente di HTML.it L'avatar di Azucchi
    Registrato dal
    Jul 2014
    Messaggi
    123
    Codice PHP:
    <select name="prova" id="prova">


            
    </
    select>

    $(
    '.test').change(function(){ /*procedura che permette di riconoscere il cambiamento di stato all'interno delle select di classe test*/
                                           
                  
    $.ajax({
                      
    type"POST",
                          
    url'search.php',
                           
    data: ... ,
                           
    success: function(data)
                                           {
                                                 
                                             $(
    '#prova').html(data);                                                                                               
                                           }
                      });
        


        }).
    change(); 
    Grazie, ho risolto in questo modo . Molto utile la possibilità di forzare una chiamata anche se ho notato che all'inizio fa qualche giro "a vuoto" sulla funzione (impercepibile senza l'alert). Va bene l'uso del metodo .html per la creazione della terza select? (Mi funziona).
    Ultima modifica di Azucchi; 03-08-2014 a 11:20

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    anche se ho notato che all'inizio fa qualche giro "a vuoto" sulla funzione (impercepibile senza l'alert)
    Mi suona strano, non dovrebbe. Probabile che qualcos'altro nel tuo script influisca su tale comportamento.
    Va bene l'uso del metodo .html per la creazione della terza select?
    Sì, penso non ci siano problemi particolari.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

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 © 2025 vBulletin Solutions, Inc. All rights reserved.