Eseguire cicli con Ajax

[danielebarisano]

Salve a tutti, la pagina di riferimento �: http://app.danielebarisano.it/vigneto/medicina.php.
Come vedete dal link ho dovuto usare Ajax per recuperare dati senza ricaricare la pagina una volta che l utente dalla select seleziona un elemento.
Il codice che ho scritto per la select 'commerciale' � questo:

<select name="commerciale" id="commerciale">
      <!--chiamata asincrona con Ajax -->
      <script type="text/javascript">
      $(document).ready(function() {
      $("#sostattiva").on("change", function() {    
         $.ajax({       
          type: "GET",
          url : "admin-ajax.php",
          data :  "sostattiva="+$("#sostattiva").val() ,  
          dataType: "json",
          success : function(risultato) {
          //console.log(risultato);

          var selectorHtml = "";
          risultato.forEach(function(item) {
           selectorHtml += '<option value="' + item.nome_commerciale + '">' + item.nome_commerciale + '</option>';
          })
          $('#commerciale').html(selectorHtml);
          },
          error: function(xhr, status, error) {
           console.log(status)
           console.log(error)
          }
          });              
      });
      });
    </script>

Non vi vado ad elencare il codice di admin-ajax ma come potete vedere � funzionante.
Ho inserito un ciclo for in PHP all inizio della 1� riga della table per replicare la stessa identica cosa anche sulle altre righe ma come potete vedere vengono recuperati gli elementi sulla 1� select ma al click su una di essi non vengono popolate le altre.
Come si potrebbe risolvere?
Ho impostato quel codice dentro ogni select e in realt� potrebbero diminuire anche le chiamate

[alka]

Come vedete dal link ho dovuto usare Ajax per recuperare dati senza ricaricare la pagina una volta che l utente dalla select seleziona un elemento.

Quello che vedo è che, quando si seleziona un elemento dalla casella "Sostanza attiva", partono ben 32 chiamate AJAX tutte uguali e che scaricano lo stesso set di dati.

Sembra che tu abbia agganciato più volte lo stesso evento change() sulla stessa casella, quindi la pagina è inutilizzabile, o meglio tutti gli eventi riguardano una sola casella che, quando cambia seleziona, scarica 32 volte gli stessi dati da inserire nella medesima cartella di destinazione, e tutte queste 32 definizioni di evento gestiscono la stessa azione sulla medesima casella e sono sparse nella pagina.

Per cominciare, farei un po' di ordine, magari isolando anche gli script in un file JS esterno, e definirei meglio la natura del problema che riscontri, che potrebbe anche avere a che fare con le problematiche individuate nella pagina.

Ciao!

[danielebarisano]

Quello che vedo è che, quando si seleziona un elemento dalla casella "Sostanza attiva", partono ben 32 chiamate AJAX tutte uguali e che scaricano lo stesso set di dati.

Sembra che tu abbia agganciato più volte lo stesso evento change() sulla stessa casella, quindi la pagina è inutilizzabile, o meglio tutti gli eventi riguardano una sola casella che, quando cambia seleziona, scarica 32 volte gli stessi dati da inserire nella medesima cartella di destinazione, e tutte queste 32 definizioni di evento gestiscono la stessa azione sulla medesima casella e sono sparse nella pagina.

Per cominciare, farei un po' di ordine, magari isolando anche gli script in un file JS esterno, e definirei meglio la natura del problema che riscontri, che potrebbe anche avere a che fare con le problematiche individuate nella pagina.

Ciao!

Risolto come può vedere popolando tutte le select tramite una sola chiamata. Ho sempre il ciclo for ma come si può vedere la chiamata Ajax avviene solo sulla select del 1 rigo nonostante anche le altre select sostanza attiva si chiamano allo stesso modo. Potrei risolvere ricreando le altre select con un nome diverso ma visto che devo stampare 7 record (ora c'è ne sono 4) vorrei risolvere in maniera iterativa

[danielebarisano]

Lo script che ho scritto è questo

<script>
    $(document).ready(function(){
       $("#sostattiva").on("change", function() {   
         $.ajax({       
          type: "GET",
          url : "admin-ajax.php",
          data :  "sostattiva="+$("#sostattiva").val() ,  
          dataType: "json",
          success : function(risultato) {
          //console.log(risultato);

          var selectorHtml = "";
          var listinohtml ="";
          var dosighl ="";
          var dosicon ="";
          var hlettari ="";
          var coskgeur ="";
          var costr ="";
          var coscoper ="";
          risultato.forEach(function(item) {
           selectorHtml += '<option value="' + item.nome_commerciale + '">' + item.nome_commerciale + '</option>';
           listinohtml += '<option value="' + item.listino + '">' + item.listino + '</option>';
           dosighl += '<option value="' + item.dosi_g_hl + '">' + item.dosi_g_hl + '</option>';
           dosicon += '<option value="' + item.dose_ettaro + '">' + item.dose_ettaro + '</option>';
           hlettari += '<option value="' + item.hl_ettaro + '">' + item.hl_ettaro + '</option>';
           coskgeur += '<option value="' + item.cos_kg_eu + '">' + item.cos_kg_eu + '</option>';
           costr += '<option value="' + item.costo_fisso_trattamento_ha + '">' + item.costo_fisso_trattamento_ha + '</option>';
           coscoper += '<option value="' + item.costo_copertura_30gg + '">' + item.costo_copertura_30gg + '</option>';
          })
          $('#commerciale').html(selectorHtml);
          $('#listino').html(listinohtml);
          $('#doseghl').html(dosighl);
          $('#dosecon').html(dosicon);
          $('#hlettaro').html(hlettari);
          $('#coskgeu').html(coskgeur);
          $('#costratta').html(costr);
          $('#coscop').html(coscoper);
          },
          error: function(xhr, status, error) {
            console.log(status)
            console.log(error)
          }
                       
       }); //chiusura ajax
    }); // chiusura change
   }); // chiusura document ready
  </script>

[alka]

Potrei risolvere ricreando le altre select con un nome diverso ma visto che devo stampare 7 record (ora c'è ne sono 4) vorrei risolvere in maniera iterativa

Non mi è chiaro cosa intendi. Riavvolgiamo...

Qual è il problema attuale?
Cosa non funziona e qual è il risultato che si dovrebbe ottenere nelle varie caselle?

[danielebarisano]

Non mi è chiaro cosa intendi. Riavvolgiamo...

Qual è il problema attuale?
Cosa non funziona e qual è il risultato che si dovrebbe ottenere nelle varie caselle?

se apri il link http://app.danielebarisano.it/vigneto/medicina.php
te ne accorgi. prova a selezionare la select sostanza attiva dalla 2 riga. questo non funziona. la select sostanza attiva della 1° riga funziona. Vorrei permettere il funzionamento su tutte le righe

[alka]

se apri il link http://app.danielebarisano.it/vigneto/medicina.php te ne accorgi.

Ok, ma lo sviluppo della pagina è in divenire, e non è necessariamente chiaro a chi non conosce lo scenario ciò che vuoi ottenere.

prova a selezionare la select sostanza attiva dalla 2 riga. questo non funziona. la select sostanza attiva della 1° riga funziona. Vorrei permettere il funzionamento su tutte le righe

Ecco, adesso è chiaro. Ma la risposta non è semplice perché i problemi sono diversi.

Intanto hai dato lo stesso ID a tutte le caselle (id="sostattiva") e questo non è consentito: ogni elemento nella pagina deve avere un ID univoco.

Se hai assegnato l'evento di selezione dalla casella in base all'ID, quindi, ovviamente solo la prima funzionerà.

La prima cosa da modificare quindi è rendere univoci gli ID, magari usando un indice numerico.

In secondo luogo, tramite l'ID o altra proprietà (es. attributi "data-*") è necessario attribuire a ogni casella iniziale e a quelle correlate un valore o qualcosa che le accomuni: se le chiami tutte allo stesso modo, oltre a essere errato come detto sopra, la pagina non distinguerà per te la loro appartenenza alla stessa riga, ma sei tu che devi implementare in qualche modo questo legame.

Usando JQuery, la soluzione non è immediata e richiede un pochino di lavoro, ma diventa difficile illustrare il tutto con questo scenario senza mettersi a spiegare molte cose e scrivere una discreta quantità di codice.

[danielebarisano]

Ok, ma lo sviluppo della pagina è in divenire, e non è necessariamente chiaro a chi non conosce lo scenario ciò che vuoi ottenere.


Ecco, adesso è chiaro. Ma la risposta non è semplice perché i problemi sono diversi.

Intanto hai dato lo stesso ID a tutte le caselle (id="sostattiva") e questo non è consentito: ogni elemento nella pagina deve avere un ID univoco.

Se hai assegnato l'evento di selezione dalla casella in base all'ID, quindi, ovviamente solo la prima funzionerà.

La prima cosa da modificare quindi è rendere univoci gli ID, magari usando un indice numerico.

In secondo luogo, tramite l'ID o altra proprietà (es. attributi "data-*") è necessario attribuire a ogni casella iniziale e a quelle correlate un valore o qualcosa che le accomuni: se le chiami tutte allo stesso modo, oltre a essere errato come detto sopra, la pagina non distinguerà per te la loro appartenenza alla stessa riga, ma sei tu che devi implementare in qualche modo questo legame.

Usando JQuery, la soluzione non è immediata e richiede un pochino di lavoro, ma diventa difficile illustrare il tutto con questo scenario senza mettersi a spiegare molte cose e scrivere una discreta quantità di codice.

Ho risolto raga, ho creato due cicli uno dentro l'altro in modo che ogni oggetto della pagina ha un name ed id diverso in modo da poterli richiamare