Clean up script

[Todd Smith]

I want to clean up my code. I am getting a JSON Object returned from my spring controller and I am display it using the Jquery .append method. It looks very messy. Should I be using jQuery Template Markup Language (JTML) to clean it up. Please advise

<script type="text/javascript">
	function add() {
		jq(function() {
			// Call a URL and pass arguments
			// Also pass a call back function
			jq.post("/mvcjquery/addExpense.do", {
				descriptionVeridication : jq("#descriptionVeridication").val(),
				week : jq("#week").val(),
				month : jq("#month").val()
			}, function(data) {

			
				document.getElementById('descriptionVeridication').value = "";
				document.getElementById('week').value = "0.00";
				document.getElementById('month').value = "0.00";
				document.getElementById('add').style.visibility = 'visible'; // show 
				document.getElementById('update').style.visibility = 'hidden'; // hide add button
               
         	
               	
				for ( var index in data) {
                   
					jq('#page').append(
							'<br>' + index + ' ' 
									+ data[index].expDescVerifi);
					jq('#page').append(' ' + data[index].expWeek + ' ');
					jq('#page').append(' ' + data[index].expMonth + ' ');
						jq('#page').append(' ' + data[index].expTotal + ' ');
					jq('#page').append(
							'<input type="button" value="Edit" onclick="edit('
									+ index + ')" />');
					jq('#page').append(
							'<input type="button" value="Delete" onclick="del('
									+ index + ')" />');
					jq('#page').append('</br>');
				 
				}
					
					
			});
		});
	}
</script>

[Edit: modified subject as this has nothing to do with JSP]

[Gregg Bolinger]

So a couple of things:

1. If you're going to use jQuery, use jQuery

document.getElementById('descriptionVeridication').value = "";
// is the same as
$('#descriptionVeridication').val("");

2. I'm still doing some testing to determine the merits of jQuery Template API over letting the server do it. In your case, I might just use jQuery's load() function. Let the server generate your HTML and just plop that rendered HTML into a container using load().

[Eric Pascarello]

Way too many appends.

Eric

[Bear Bibeault]

Like Gregg, I'm a big fan of letting the server do the work. I prefer to deliver pre-formated HTML fragments (templated using JSP or other server-side templating) over client-side DOM manipulation or templating. I use the client-side mechanisms only when it makes more sense than doing it on the server.