Aggiungere contenuto HTML usando jQuery

Pubblicato da Nicola Rainiero il 07-03-2013 (aggiornato il 05-04-2013)

Recentemente ho ripreso a programmare la mia prima web-app: la conversione del software per il calcolo di una fognatura bianca scritto in BASIC. Ho focalizzato la mia attenzione sull'interfaccia dati di input e nonostante la facilità e la versatilità di jQuery, mi sono perso in alcuni dettagli. Ho si raggiunto un "risultato", ma non è al momento pienamente funzionale. Nell'articolo mostrerò come si possa inserire e togliere contenuto in HTML usando le funzioni previste da questa fantastica libreria.

jQuery presenta molte funzioni per la gestione degli elementi che formano la pagina web, dalla semplice sostituzione di HTML, al preciso posizionamento di nuovo codice in relazione ad un particolare oggetto, fino alla completa rimozione dei tag e del contenuto di una pagina.

Dopo aver definito l'elemento (id, class o un semplice tag), è possibile aggiungere o rimuovere o appendere quello che si vuole! Per esempio ho creato due pulsanti: "+" e "-". Dopo aver fatto clic sul primo, appare una riga in cui è possibile aggiungere un nuovo tipo di tubazione composto da: etichetta, scabrezza, tipo di sezione e diametri commerciali. Ho chiamato questa funzione addPipe() ed è qui sotto riportata:

function addPipe(){
if (typeof pipe === 'undefined') {pipe=0};
pipe=pipe+1;
$('#box_pipe').before('<div id="pipe"><ul class="onRow"><li><input class="txtClass" name="labelPipe" type="text" id="labelPipe" defaultVal="default" size="10" /></li><li><input class="txtClass" name="roughnessPipe" type="text" id="roughnessPipe" defaultVal="90" size="10" /></li><li><select id="secType"><option class="lang_circular" value="0">circular</option><option class="lang_ovoid" value="1">ovoid</option><option class="lang_otherSec" value="3">other section...</option></select></li><ul id="prova"></ul><li id="ultimo"><input class="txtClass" name="diametro" type="text" id="diametro" defaultVal="00.00" size="5" /><input type="button" name="add" style="width:20px" value="+" onclick="addDiam()" /><input type="button" name="add" style="width:20px" value="-" onclick="removeDiam()" /><input type="button" name="add" style="width:20px" value="O" onclick="orderDiam()" /></li></ul><br clear="all"></div>');
}

E' proprio pessima, non c'è che dire! Il codice è molto lacunoso e difficile da leggere. Dovrò trovare un altro modo per renderla più funzionale e chiara. Fortunatamente la funzione per rimuovere questa tubazione è molto meglio:

function removePipe(){
$("#pipe").remove();
}

All'interno di ogni tubazione poi ho aggiunto altre 3 funzioni relative ai diametri commerciali: aggiunta, rimozione e loro messa in ordine crescente1.

function addDiam(){
diametro = $('#diametro').val();
pipe_number="<li id='penultimo'>" + diametro + "</li>";
$('#prova').append(pipe_number);
}

function removeDiam(){
$('#penultimo').remove();
//$('penultimo').remove();
}

function orderDiam(){
var li = $('ul#prova li');

li.sort(function(a, b) {
if(parseInt($(a).text()) > parseInt($(b).text()))
return 1;
else return -1;
});
$('ul#prova').empty().html(li);
}

Pur non essendo perfetti e corretti, in qualche modo funzionano. I problemi nascono quando si cerca di inserire più di una tubazione, come è possibile constatare provando la versione demo. Mentre qui ho messo tutti i file zippati: storm_sewer_content.zip. Spero di sistemarli il prima possibile, ma come sempre accetto suggerimenti e correzioni!!




Potrebbero interessarti anche:

Nicola Rainiero

Ingegnere civile specializzato in geotecnica con l'ambizione di facilitare la propria attività lavorativa usando e creando software libero per un sapere condiviso e collettivo. Mi occupo anche di energie rinnovabili ed in particolare di geotermia a bassa entalpia. Sono da sempre appassionato di web design e modellazione 3D.

Commenti

<p>io userei mustache.js, comunque le variabili vanno dichiarate con var anche all'interno della funzione o diventano parte dell'oggetto globale.
Inoltre se proprio non vuoi usare un sistema di template potresti usare un codice più jquery style tipo:

var pipe_number = $('<li>').attr('id','penultimo').text('diametro');

inoltre per essere più javascript strict, nell'usare parseInt è consigliabile mettere il secondo parametro opzionale ossia la base.
Ultima nota, il selettore:
$('ul#prova')
è più lento di $('#prova') e non aggiunge nulla visto che gli dovrebbero essere univoci.

Al posto di style="width:20px"  puoi linkare un css esterno con tutti i parametri di stile legati ad una specifica classe o id.
Codice dimezzato e modifiche di stile molto rapide.

Rickyx

Hai perfettamente ragione ed in effetti il foglio di stile è una scelta obbligata per snellire il codice. L'ho inserito in questa sede solo per comodità, visto che non ho ancora familiarità con jQuery e sto cercando di capire come comporre il tutto, con risultati altalenanti.