Adding content using jQuery

Submitted by Nicola Rainiero on 2013-03-04 (last updated on 2013-03-05)

Recently I have restarted to program the first web-app: the conversion of my storm sewer software. I focalized my attention on the input interface and despite the easiness and versatility of jQuery, I have got bogged down in details. I have reached a “result” but is full of bugs and not optimal.

jQuery has many methods for managing elements and content on a page, from simply replacing HTML, to precisely positioning new HTML in relation to a selected item, to completely removing tags and content from the page.

Once you have defined the element (ID or CLASS or a simple tag), you can add or remove or append whatever you want! For example I have created two buttons: "+" and "-". After clicking on the first, it appears a row where you can add a new type of pipe: label, roughness, section type and commercial diameters. I called this function addPipe() and here is it:

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>');
}

I agree with you, the code is terrible and not clear at all. Sure, I will improve it. Fortunately the function for removing this pipe is better:

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

Into every pipe definition, I put another 3 functions to add, remove or order1 the commercial diameters.

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);
}

They work "well" until you add a new pipe type: there the situation becomes chaotic and wrong. If you want to see these bugs, click here, while I put all files here: storm_sewer_content.zip. I hope to fix them as fast as possible, but as usual I accept with pleasure any help, hint, correction, and so on!!!




Related Content:

Nicola Rainiero

A civil geotechnical engineer with the ambition to facilitate own work with free software for a knowledge and collective sharing. Also, I deal with green energy and in particular shallow geothermal energy. I have always been involved in web design and 3D modelling.

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.