Question

I want to design a webpage as shown in the image below. There are three panels (1,2,3). If I click on the teams (panel 1) then, the panel 2 and 3a will get filled. If I then click on a particular group (G1) then panel 3b will get populated. If I then click on particular animal (A1) then panel 3c will get filled up. The data is being obtained from Oracle database am using PHP.

I am new to AJAX. Can you please let me know the best and efficient way to do this?

Thank you
San

Answer 1

I would strongly advise using a Javascript framework such as jQuery for this. It takes a lot of the pain out of using AJAX (see http://api.jquery.com/jQuery.get/).

There’s a couple of ways you could do retrieve the data:

1. The easiest way would be to generate
   the entire table for (2) within a
   PHP script, and load the HTML into
   the container div. The downside to
   this is that if you want to change
   your HTML template, you’ve got to
   change the PHP file as well.

2. Alternatively, you can echo the data
   from you PHP in the JSON format (use
   json_encode() in PHP –
   http://www.php.net/manual/en/function.json-encode.php).
   So you’d build your array of rows of
   data and do echo
json_encode($data);. You can the
   use jQuery.get( ) to load it in as
   JSON.

   Once you’ve done that, you need to
   clear any old rows of your table
   (except the heading) and add new
   ones. Again, jQuery would simplify
   the process, but it won’t be easy if
   you haven’t had much experience.

As I say, the first method is considerably easier as it only takes fairly basic PHP and Javascript. The second method is cleaner, more flexible and probably lighter on your bandwidth, but considerably more difficult.

Populating 3(a-c) is essentially the same problem. You can either generate the entire content in the PHP and simply set the container HTML, or have the basic HTML template inside the div (but hidden using CSS: display:none;) and populate that template.