Loading alternative content through tabs and jQuery and JSP

Question

I have a data table for a type of policy (options: Single, Couple, Family and Single Parent Family). I want to have a tabbed interface with each type of policy occupying one tab. At the same time, a table of data related to the corresponding type of policy is displayed under the corresponding tab. When a user clicks on another tab, another data table is displayed.

I thought about exporting data from a database, and then converted it to XML and, therefore, parsed it into HTML through XSLT and / or jQuery. I think this is too much because it is just a simple table.

What I would like to do is do all the processing on the external server page, in this case JSP, and just swap the HTML fragments. Thus, the user clicks on the tab that invokes the external JSP. The external JSP then retrieves the data for the corresponding tab, builds a table, and then displays it on the screen. Or an external JSP can query the database, build all four tables with a unique identifier each, and then jQuery only loads the table that is called. Finally, would it be easier to just create four separate HTML codes via JSP and then call them separately? I would prefer only one HTML to be honest.

I do not know if the AHAH object wins if the tables are created at the request of the JSP and then passed to the client. I was also concerned that if we query the database and create the tables, then how would it be able to update the contents of the tables if the database data changes.

I thought that all this can be done on the page, i.e. build 4 tables and hide those that do not belong to the active tab with CSS display: no, but I was not sure about the availability - did screen readers take this data?

Sorry if that doesn't make sense, and I feel like maybe trying to complicate this, but I'm just trying to figure out a better approach. And it's too late :(

Answer 1

JSON ? Java API ( ) Javabean JSON, Google Gson. JavaScript/jQuery JSON, JavaScript. Java. , , XML.

Servlet, JSON , jQuery $.getJSON(). , Item id, name 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);
}

, , 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>

! , . click . , . $('#table').empty() , .

. :

- ?

JavaScript/CSS. showstopper, JS/jQuery "plain vanilla" <a> JSP JSTL/EL .