CODEWITHSUNDEEP
phpjavascriptajax
user602599
user602599

Reputation: 661

AJAX function to display dynamic data in same page

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
enter image description here

Upvotes: 2

Views: 2386

Answers (2)

n00dle
n00dle

Reputation: 6043

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.

Upvotes: 2

Duniyadnd
Duniyadnd

Reputation: 4043

If you're new with javascript/Ajax, I'd advise you check out some libraries (this is not to say that you should not learn how Javascript works without these frameworks).

A good place to start would be jquery, mootools or prototype.

These three javascript libraries have inbuilt Ajax functions designed to make your life easier.

Upvotes: 0

Related Questions