AJAX Tutorial for Java Programmers

AJAX Tutorial for Java Programmers

Receiving Input from the Page

The idea now is to add a checkbox to the table rows, and to change the text on the button to say "Order" instead of "MyButton". This is shaping up to be a very rudimentary shopping cart.

But checkboxes can only be inside FORM tags. The new BUTTON tag allows buttons outside forms, but all other input elements are still required to be inside FORMs, because they are designed for the page submit protocol. With AJAX, the page submit protocol is not really required, but still we have to put the checkboxes inside forms.

So the first task is to put the TABLE inside a FORM tag (open and close.) The FORM tag does not need any attributes, e.g. ACTION, METHOD etc.

Now we can change the contents of the table so that in addition to the name of the book, there is also a checkbox next to it. The user can select books, click the button, and we will display the results in a shopping cart table.

The onChange handler needs to be modified, to supply String arrays of 2 elements to the insertRow method.

        // Add a header, using B tags
        myTable.insertRow( -1,
            new String[]{ "<B>" + header + "</B>",
                          "<B>Order</B>" } );

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

Notice that we are supplying a unique NAME to each checkbox. Supplying a unique name or id lets us identify the checkbox, either to attach an object (of class HtmlInputCheckbox in the case of checkboxes) to it, or to identify whether it has been checked or not.

In this sample, we will simply be checking which checkboxes have been checked, and putting the corresponding books in the shopping cart. Change the button text to "Order" and add another empty TABLE with ID "shoppingCart" to the page. Also add and initialize a variable "shoppingCart" of class "HtmlTable" connected to the new TABLE.

The button should already have a click handler, now change the click handler so it has a single parameter of java.util.Map class.

In the handler,check for all names that start with "checkbox_" and add the corresponding books in the "shoppingCart" tables.

    protected void onClick( java.util.Map pageData )
    {
        try {
            int selectedIndex = getSelectedIndex( pageData.get( "mySelect" ));
            String[] books;
            switch ( selectedIndex ) {
                case 0:  books = scienceBooks; break;
                case 1:  books = mathBooks;    break;
                default: books = geographyBooks;
            }
            java.util.Iterator names = pageData.keySet().iterator();
            while ( names.hasNext()) {
                String name = (String) names.next();
                String value = (String) pageData.get( name );
                if ( name.startsWith( "checkbox_" ) && ! value.equals( "" )) {
                    // Checkbox, selected
                    int index = Integer.parseInt( name.substring( "checkbox_".length()));
                    String book = books[ index ];
                    shoppingCart.insertRow( -1, new String[]{ book } );
                }
            }
        } catch (Jaxception jax) {
            jax.printStackTrace();
        }
    }

Exercise: Get all this to work at http://localhost/MyPage.html in the browser. Clicking the "Order" button should fill the shopping cart table with any checked books. Also add a variable that is initialized to false, and that keeps track of whether anything has been added to the shopping cart yet. Use it to add a header to the shopping cart, the first time something is added to the shopping cart.

Next Step: The Session

Contents