Tag Archives: jquery

Parse an unknown JSON with Jquery

Sometime it happens to receive a JSON string than need to be visualized without knowing the structure. Suppose we have an HTML table:

<tbody id="reportTable">					
</tbody>

To populate this table with jQuery it’s possible to use this simple code:

var rows = ${reportRows};
var html = $.each(rows, function(key, value){
 
	$("#reportTable").append("<tr>");
 
	$.each(value, function (key, data) {
		$("#reportTable").append("<td>" + data + "</td>");
	});
 
	$("#reportTable").append("</tr>");
 
});

${reportRows} comes from a Spring MVC Controller and it’s a Java string generates using Jackson (or Gson) in this way:

ColumnMapRowMapper rowMapper = new ColumnMapRowMapper();
List<Map<String, Object>> reportDataList =  getJdbcTemplate().query(sqlComplete, rowMapper);
 
ObjectWriter ow = new ObjectMapper().writer().withDefaultPrettyPrinter();
String json = ow.writeValueAsString(reportDataList);

So, we have a query that return a not know number of column (suppose your code dynamically generate the query), we translate the results in JSON and we use jQuery to render the results.

Tagged , , ,

Apply jQuery datepicker to multiple instances

To add multiple instance of jQuery datepicker (or timepicker), it is possible to use class instead of the ID to initialize the widget in particular when the form is generated from the backend and the exact number of field is not known.

The html code will be:

<input type="text" class="datepicker" id="date1" />
<input type="text" class="datepicker" id="date2" />
<input type="text" class="datepicker" id="date3" />

The jQuery script will be:

$('.datepicker').each(function(){
    $(this).datepicker();
});

Remember to include jquery and jquery-ui scripts to the page.

Tagged , , ,

Change Eclipse settings to ignore jquery errors on a specific file

In my dynamic web project in eclipse, I have jQuery in my js source folder. For some reason, Eclipse is not handling it correctly and interpreting many lines as errors in the standard jQuery file (even though I have the javascript development tools installed).

I have found that I can leave the JavaScript Validator enable and ignore specific files by adding a suitable exclusion pattern e.g. **/jquery*.js to the JavaScript/Include Path/Source/Excluded group (Project->Properties->JavaScript->Include Path->Source).

Tagged , ,