Loading alternative content via tabs and jQuery and JSP

Question

Hi.

I have a table of data for a policy type (options are Single, Couple, Family & Single Parent Family). I want to have a tabbed interface with each policy type occupying one tab. At the same time a table of data relating to relevant policy type is displayed beneath the associated tab. When a user clicks on another tab then a different table of data is displayed.

I thought about exporting the data from the database then converting this to XML and therefore parsing this to HTML via XSLT and/or jQuery. I think this is overkill as it is just a simple table.

What i would like to do is do all the processing on an external server page, in this case JSP and just swap out chunks of HTML. So the user clicks on a tab which calls the external JSP. The external JSP then retrieves the data for the relevant tab, builds the table and then this is displayed on screen. Or could the external JSP query the database, build all four table with a unique id each and then the jQuery loads only the table that has been called. Finally would it be easier just to have four seperate HTMLs build via JSP and then call them individually? I would prefer just one HTML to be honest.

I don't know if it defeats the object of AHAH if the tables are built on request by a JSP and then served to the client. I was also concerned that if we query the database and build the tables then how will it be able to update the content of tables if the database data changes.

I thought also this could all be done on the page i.e. build 4 tables and hide the ones that don't relate to the active tab with CSS display:none but i wasn't sure about accessibility - would screen readers pick up this data?

Apologies if this does not make sense and i feel i may be trying to over complicate this but i am just trying to figure best approach. And it is late :(

Answer 1

Have you considered the JSON format? There are Java API's to seamlessly convert a (collection or map of) Javabean object(s) into JSON format, such as Google Gson. In JavaScript/jQuery you can handle JSON perfectly as if it's a worthfully JavaScript object. It is comparable with a Javabean in Java. No overheads like with formatting and parsing XML's.

You can create a Servlet which writes a JSON string to the response so that it can be called by jQuery's $.getJSON(). Here's a kickoff example where Item is a fictive Javabean with three properties id, name and value:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    List<Item> items = itemDAO.list();
    String json = new Gson().toJson(items);
    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(json);
}

To display those items in a table, just do roughly like this in jQuery:

<script>
    $(document).ready(function() {
        $.getJSON('json/items', function(items) {
            $(items).each(function(i, item) {
                var row = $('#table').append('<tr>');
                row.append('<td>').text(item.id);
                row.append('<td>').text(item.name);
                row.append('<td>').text(item.value);
            });
        });
    });
</script>

...

<table id="table"></table>

That's all! Hope this gives new insights. You can use this in the click event of any tab. You could even reuse the same table for display if that doesn't differ that much. Just do a $('#table').empty() beforehand to get rid of all rows.

Edit: I overlooked one important consideration:

but i wasn't sure about accessibility - would screen readers pick up this data?

Screenreaders won't execute any JavaScript/CSS. If this is actually a showstopper, then you'll need to drop the JS/jQuery idea and go for "plain vanilla" synchronous requests with normal <a> links in each tab and take benefit of Servlet and JSP's JSTL/EL powers to display content conditionally based on the request parameters.