Using Javascript to show contents that are present in DB.

Question

Hi.

I'm having the following problem, and would love some pointers in the right direction. To put things simple:

I information from a table, with PHP, that I put inside a <select> tag. Whenever I click one of the options (lines) present it should load/show certain information on a cell that is right next to it. If I click another one of the options it should show different information (loaded from a database).

Like this:

Click on a category, show information. Actually I'm supposed to have on the second cell another sub-category, but I believe that If I can get this first step solved then it will be a matter of applying it to the 2nd/3rd cells.

UPDATE: I am also considering using a frame inside that cell, a php document, that reloads everytime the user clicks on one of the options. Is that viable as well?

Answer 1

If you don't mind only supporting clients with JavaScript enabled, what you're looking for is Ajax. It's perfectly possible to do Ajax stuff with raw JavaScript, but I'd strongly recommend using a library like jQuery, Prototype, or Closure instead.

With Ajax, you can send a request to the server when the user selects an option (e.g., asking for the details of that option), and then update the contents of that part of the page using the results of the call.

Here's an example using jQuery: http://jsbin.com/agipu4

...and one using Prototype: http://jsbin.com/abido3

...but again, you can do the same thing with Closure or any of the others (or, again, using just raw JavaScript and the XmlHTTPRequest object and DOM methods directly).

Answer 2

You should do an ajax call to the database (via PHP of course) to get the realted data and populate it.

$('#category').change(function(){
    $('#problem').load('/url-to-fetch?selected=' + $('#category').val());
});

The above example is done using jQuery (altough you can do it using any js library or plain javascript).

The code says that when ever there is a change in the selected value of the category, do an ajax call to url-to-fetch passing in the selected value and then show the details in problem area (assuming problem is the id of the textarea).

Answer 3

Depending on how many choices or how much data there is, I think you have 2-3 basic approaches here.

1) If there's a small-ish amount of choices/data, preload all the possible choices into the Problem and Solution cells as separate divs, but hide them all with css (display: none). When the user selects a choice in Category, then unhide the appropriate div.

2) A variation on No. 1 above, you could load all of your data into some JS array, then push the items of the array into Problem and Solution when a category is selected.

3) If you have too many categories, you could use an AJAX call to get run your mySQL query (via PHP) and populate the Problem and Solution cells with the results of the call.

I hope this is helpful!