PDA

View Full Version : Visualizzare degli input dinamicamente dentro un div


robertino_salemi
01-12-2014, 13:03
Salve a tutti,
vorrei creare una list dinamica di input type checkbox da inserire dentro un div.

I vari Item vengono letti da un'array, avevo scritto questo codice:

<div id="filterList">

</div>

<script>
/* Lista dei tiles: usati nei filtri di ricerca e nella mappa */
var listTiles = ['ITEM 1', 'ITEM 2', 'ITEM 3'];

function dynamicListFilter() {
var ObjUl = $('<ul></ul>');
for (i = 0; i < listTiles.length; i++) {
var Objli = $('<li></li>');
var Obja = '';

ObjUl.addClass("ui-menu-item");
ObjUl.attr("role", "menuitem");

Objli.addClass("ui-all");
Objli.attr("tabindex", "-1");

Objli.text("<input type=\"checkbox\" name=\"" + listTiles[i] + "\" class=\"filterLayerShowHide\" />" + listTiles[i]);

ObjUl.append(Objli);
}
$('#filterList').append(ObjUl);
}

dynamicListFilter();
</script>


ma il risultato è questo:

<input type="checkbox" name="ITEM 1" class="filterLayerShowHide" />ITEM 1
<input type="checkbox" name="ITEM 2" class="filterLayerShowHide" />ITEM 2
<input type="checkbox" name="ITEM 3" class="filterLayerShowHide" />ITEM 3


Qui la demo Link (http://jsfiddle.net/robertinosalemi/88roc71f/1/)

Come mai?

Grazie.

robertino_salemi
01-12-2014, 13:24
Risolto: jsfiddle (http://jsfiddle.net/robertinosalemi/k6xx6a03/1/).

OoZic
01-12-2014, 20:41
Io fossi in te valuterei di cominciare a usare qualche framework o almeno un templating engine.

Se la tua app comincia a "complicarsi" va a finire che rischi di scrivere un sacco di codice per nulla reinventando la ruota o scrivendo "spaghetti code".

Valuta l'utilizzo di un framework o un template engine.

Il tuo esempio sono 3 righe con AngularJS:
http://jsbin.com/kapaferugo/1/edit?html,js,output

Non ti dico di usare Angular ma valuta tu che fin che la tua app è semplice va bene scrivere un pò di codice in più, ma appena diventa più grande e più complessa è un casino se non utilizzi un framework e delle best practise poi sarà un incubo da mantenere/aggiornare/bugfixing ecc

robertino_salemi
01-12-2014, 22:09
Effettivamente la tua soluzione è molto rapida e funzionale.

Valuterò la tua offerta indicazione. :D