AJAX Tutorial for Java Programmers

AJAX Tutorial for Java Programmers

Working with Tables and Lists

We are now ready to populate and work with our TABLE and SELECT list.

Often, the material to populate tables and lists will be coming from a database. But for the purposes of this tutorial, we will just be keeping it in Java static variables! We have three categories of books to populate, as given below (book names are for example only, and are not meant to represent any actual books/curriculi!):

    static String[] scienceBooks = {
       "Light", "Magnetism", "Electricity", "Heat", "Sound", "Motion", "Plants"
    };

    static String[] mathBooks = {
       "Arithmetic", "Geometry", "Algebra", "Dynamics"
    };

    static String[] geographyBooks = {
       "North America", "South America", "Asia", "Europe", "Africa", "Australia"
    };

In the constructor, we are going to fill the SELECT list with these three categories. We will also attach a handler on the SELECT, so that when someone selects one of the categories, we will fill the table with books of that category.

Initialize the SELECT

The code in the constructor will be as follows:

    mySelect.insertOption( 0, "Science Books" );
    mySelect.insertOption( 1, "Math Books" );
    mySelect.insertOption( 2, "Geography Books" );
    mySelect.sizeToOptions();
    mySelect.setSelectedIndex( -1 );

The "sizeToOptions" will resize the SELECT to have as many displayed rows as options, so that it will show up as a list instead of the normal combo-box (making it slightly more convenient to pick a category.) And finally, the setting of selected index to -1 makes nothing selected in the list, initiallly. Otherwise, the first index would have shown up selected.

Try this out to see the new SELECT.

Adding action on SELECT change

Now add an "onChange" handler to mySelect. But instead of the "onClick" handlers we have added so far, add an int parameter to the handler:

    protected void onChange( int selectedIndex )
    {
        showMessageDialog( "Selected Index = " + selectedIndex );
    }

Once this is working, the next step is to populate our table in the "onChange" handler, instead of just showing a message dialog.

Populating the Table

In populating the table, first we remove any existing element. Then we just have to keep adding rows matching the selection. The new version of "onChange" is:

        myTable.deleteAllRows();
        String[] books;
        String header;
        switch ( selectedIndex ) {
            case 0:
                books = scienceBooks;
                header = "Science Books";
                break;
            case 1:
                header = "Math Books";
                books = mathBooks;
                break;
            default:
                header = "Geography Books";
                books = geographyBooks;
        }
        // Add a header, using B tags
        myTable.insertRow( -1, new String[]{ "<B>" + header + "</B>" } );

        // Fill up the table with the books.
        for ( int i = 0; i < books.length; i++ ) {
           myTable.insertRow( -1, new String[]{ books[i] } );
        }

The -1 in the insertRow is to insert rows at the end of the table. We just have one cell in each row, so we are supplying an array of String's, containing just one element.

Exercise: Get all this to work at http://localhost/MyPage.html in the browser. Clicking any choice in the SELECT list should populate the table with that type of items.

Next Step: Receiving Input from the Page

Contents