Select 2 ajax request

[pippuccio76]

Salve a tutti , sto facendo una richiesta da un database dei comuni per popolare una select2 ,
il codice del select2 (preso da un tutorial e adattato � :

     // Initialize select2
     $("#id_id_comuni").select2({
        theme: "bootstrap-5",
        ajax: { 
          url: "<?= base_url('AjaxRequest/getComuniSelect')?>",
          type: "post",
          dataType: 'json',
          delay: 250,
          data: function (params) {
             // CSRF Hash
             var csrfName = $('.txt_csrfname').attr('name'); // CSRF Token name
             var csrfHash = $('.txt_csrfname').val(); // CSRF hash


             return {
                searchTerm: params.term, // search term
                [csrfName]: csrfHash // CSRF Token
             };
          },
          processResults: function (response) {


            console.log(JSON.stringify(response.data));
 
             // Update CSRF Token
             $('.txt_csrfname').val(response.token); 


            $.each(response.data, function (i) {
                $.each(response.data[i], function (key, val) {
                    $("#id_id_comuni").text("<option value='"+val.id+"'>"+val.cap+" "+val.localita+"</option>")
                });            
            });


            return {
                results: response.data
            };




          },
          cache: true
        }
     });

)

se guardo il console.log ho i dati sotto forma di json come mi aspetto ma non ho le option...

[KillerWorm]

Ciao, penso che il problema sia nell'uso del metodo text() di jQuery:

$("#id_id_comuni").text("<option value='"+val.id+"'>"+val.cap+" "+val.localita+"</option>")

Come è logico pensare, questo metodo inserisce del contenuto testuale dentro l'elemento in questione. Quello che viene passato a tale metodo è quindi inserito come testo anche se presenta dei tag html come nel tuo caso.
Infatti le parentesi angolari (< e >) vengono normalmente convertite in entità html se devono essere trattate come testo. Suppongo quindi che tu non veda nulla dentro il <select> perché il contenuto testuale non viene mostrato se non dentro regolari elementi <option>.

Il metodo che dovresti usare è invece html().

Prova e fai sapere.

[pippuccio76]

con questo :

        // Initialize select2     $("#id_id_comuni").select2({
        theme: "bootstrap-5",
        ajax: {
          url: "<?= base_url('AjaxRequest/getComuniSelect')?>",
          type: "post",
          dataType: 'json',
          delay: 250,
          data: function (params) {
             // CSRF Hash
             var csrfName = $('.txt_csrfname').attr('name'); // CSRF Token name
             var csrfHash = $('.txt_csrfname').val(); // CSRF hash




             return {
                searchTerm: params.term, // search term
                [csrfName]: csrfHash // CSRF Token
             };
          },
             processResults:  function (data) {
                        return {
                            results: $.map(data, function (item) {




                                console.log(item)
                                return {
                                    text: item.cap+' '+item.localita,
                                    slug: item.slug,
                                    id: item.id
                                }
                            })
                        };
                    },
          cache: true
        }
     });

ho undefined undefined, il console.log(item) scrivendo roma è allegato

[pippuccio76]

con questo invece :

     // Initialize select2
     $("#id_id_comuni").select2({
        theme: "bootstrap-5",
        ajax: { 
          url: "<?= base_url('AjaxRequest/getComuniSelect')?>",
          type: "post",
          dataType: 'json',
          delay: 250,
          data: function (params) {
             // CSRF Hash
             var csrfName = $('.txt_csrfname').attr('name'); // CSRF Token name
             var csrfHash = $('.txt_csrfname').val(); // CSRF hash


             return {
                searchTerm: params.term, // search term
                [csrfName]: csrfHash // CSRF Token
             };
          },
          processResults: function (response) {


             console.log(JSON.stringify(response.data));
 
             // Update CSRF Token
             $('.txt_csrfname').val(response.token); 


            $.each(response.data, function (i) {
                $.each(response.data[i], function () {
                    //console.log(response.data[i]['id']+' '+response.data[i]['cap'] );
                    $("#id_id_comuni").html("<option value='"+response.data[i]['id']+"'>"+response.data[i]['cap']+" " +response.data[i]['localita']+"</option>")
                });            
            });


            return {
                results: response.data
            };




          },
          cache: true
        }
     });

scrivo nel input di select 2 appare correttamente il risultato ma non vedo le option

[pippuccio76]

Ho risolto con questo codice :

     // Initialize select2


    $("#id_id_comuni").select2({
        theme: "bootstrap-5",
        ajax: {
          url: "<?= base_url('AjaxRequest/getComuniSelect')?>",
          type: "post",
          dataType: 'json',
          delay: 250,
          data: function (params) {
             // CSRF Hash
             var csrfName = $('.txt_csrfname').attr('name'); // CSRF Token name
             var csrfHash = $('.txt_csrfname').val(); // CSRF hash








             return {
                searchTerm: params.term, // search term
                [csrfName]: csrfHash // CSRF Token
             };
          },
          processResults: function (response) {
 
             // Update CSRF Token
             $('.txt_csrfname').val(response.token); 


             return {
                results: response.data
             };
          },
          cache: true
        }
     });

data lato server arriva così :

foreach($lista_comuni as $comune){
         $data[] = array(
            "id" => $comune->id,
            "text" => $comune->cap.' '.$comune->localita,
         );
      }

Le option hanno bisogno di 2 valori id (che diventa il value della option) e text (che diventa il testo che si vede premendo la select)