Componente select - errore in chiamata setOptionsToSelect

lscorcia commented 3 years ago

Comportamento atteso

Sto provando ad utilizzare l'estensione setOptionsToSelect per alimentare una select a runtime. Il mio codice è in breve:

$(function() {
   $('.selettore').setOptionsToSelect({ ... });
});

L'idea è che sto provando a realizzare una select con ricerca supportata da un servizio JSON che mi restituisce gli elementi da mostrare (bootstrap-italia liscio, no angular, no react). La select conterrà la lista dei comuni italiani, per cui non è realistico popolare tutti gli elementi al load.

Comportamento attuale

La chiamata fallisce e il browser mi segnala che il metodo setOptionsToSelectnon esiste.

Possibili soluzioni

Credo che il problema sia dovuto al fatto che l'estensione setOptionsToSelect viene aggiunta al prototipo anch'essa dentro una chiamata $(function() { ... } }, causando una sorta di race condition tra il chiamante e la libreria:

https://github.com/italia/bootstrap-italia/blob/master/src/js/plugins/select.js#L1-L12

Non sono un esperto di Javascript, ma probabilmente sarebbe sufficiente spostare la definizione dell'estensione fuori dal blocco document.ready? E magari in una guard per evitare conflitti con altri plugin?

(function ( $ ) {
 ...
}( jQuery ));

Avete idea se per caso esistono già componenti pronti per realizzare select con autocomplete dinamico con stile bootstrap-italia, così da non dover reinventare la ruota?

Ciao e grazie

lscorcia commented 3 years ago

Mi rispondo da solo sull'ultimo punto (collegare la select a una chiamata ajax): il componente select espande il componente standard di bootstrap4, per cui è possibile utilizzare tutto ciò che di prefabbricato c'è su internet, in particolare ho provato il componente ajax-bootstrap-select (https://github.com/truckingsim/Ajax-Bootstrap-Select) e funziona egregiamente. Unica avvertenza, poiché questo componente si aspetta di essere istanziato su un bootstrap-select esistente, l'inizializzazione del componente ajax-bootstrap-select deve avvenire dopo che il componente bootstrap-select è stato inizializzato:

    $('#ddlPlaceOfBirth').on("loaded.bs.select", 
        function() {
            $(this).find("select").ajaxSelectPicker({
                ajax: {
                    url: /*[[@{/api/comuni}]]*/ '',
                    type: 'GET',
                    data: function () {
                        var params = {
                            q: '{{{q}}}'
                        };

                        return params;
                    }
                }
            });
        }
    );

La issue dovrebbe essere comunque valida, anche se non è più indispensabile per risolvere il mio problema originario.

francescozaia commented 3 years ago

Correlata a https://github.com/italia/bootstrap-italia/issues/549

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

astagi commented 2 years ago

Consigliamo dall'ultima versione l'utilizzo della select standard accessibile

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-italia@1.6.2/dist/css/bootstrap-italia.min.css">
    <title>Document</title>
</head>

<body>
    <div class="form-row">
        <div class="form-group col-sm-6">
            <div class="select-wrapper">
                <label for="select_id">Etichetta</label>
                <select id="select_id" title="Scegli una opzione">
                </select>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap-italia@1.6.2/dist/js/bootstrap-italia.bundle.min.js"></script>
    <script>
        $(document).ready(function () {
            buildSelect("select_id");
            setTimeout(() => {
                $('#select_id').val("val2");
            }, 1000);

        });

        function buildSelect(aDiv) {
            $('#' + aDiv)
                .append(new Option("Option 1", "val1"))
                .append(new Option("Option 2", "val2"))
                .append(new Option("Option 3", "val3"))
        }

    </script>
</body>

</html>

RiversRedsDev commented 1 year ago

Bootstrap-italia never works! I dont know why people still using this

italia / bootstrap-italia