PHP: Navigating through data - php

Question

I have a PHP site I'm working on, and need to allow the user to select data and have different data appear on the next DIV (see attached image). Essentially I'd like a DIV (overflow:auto, so it scrolls) to populate using the SQL SELECT statement, and allow a user to click on a list item. That item creates a new SELECT statement for the div to the right, if that makes sense. Any input on the best way to go about this? New to PHP, not HTML/CSS though.
Zach

Answer 1

I think the best way to achieve this is with jQuery (a JavaScript-Library). I is quite easy to use, and if you got the trick, you can do amazing things with it.
For PHP/MySQL, you could use jQuerys Ajax functionalities (see http://api.jquery.com/jQuery.ajax/). Use the callback to display the loaded data (see below).
Here is a very simple example on how to show another div (in which could be more links to select) with dynamic content. If you combine this with Ajax, you should get what you need.
Include jQuery in within head tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
Code for the body:
<!-- First Box: click on link shows up second box -->
<div id="selectOne" style="float: left; margin-right: 10px; border: #666 thin solid; padding: 10px;">
One<br />
Two<br />
Three
</div>
<!-- Second Box: initially hidden with CSS "display: none;" -->
<div id="selectTwo" style="float: left; margin-right: 10px; display: none; border: #666 thin solid; padding: 10px;"></div>
<!-- The JavaScript (jQuery) -->
<script type="text/javascript">
//Do something when the DOM is ready:
$(document).ready(function() {
//When a link in div with id "selectOne" is clicked, do something:
$('#selectOne a').click(function() {
//Fade in second box:
$('#selectTwo').fadeIn(500);
//Get id from clicked link:
var id = $(this).attr('id');
//Depending on the id of the link, do something:
if (id == 'one') {
//Insert html into the second box which was faded in before:
$('#selectTwo').html('One<br />is<br />selected')
} else if (id == 'two') {
$('#selectTwo').html('Two<br />is<br />selected')
} else if (id == 'three') {
$('#selectTwo').html('Three<br />is<br />selected')
}
});
});
</script>
So if you would use jQuerys Ajax-Functionality, you could use something like that (not tested!):
$('#selectOne a').click(function() {
var id = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'getYourData.php',
data: 'thisIsSentToPHPFile='+id,
success: function(msg){
//everything echoed in your PHP-File will be in the 'msg' variable:
$('#selectTwo').html(msg)
$('#selectTwo').fadeIn(500);
}
});
});
The getYourData.php could be:
$id = $_POST['id'];
$query = mysql_query('SELECT * FROM table WHERE id='.$id);
$result = mysql_fetch_assoc($query);
//Now echo the results - they will be in the callback variable:
echo $result['tablefield1'].', '.$result['tablefield2'];
Give it some tries, tweak it a little bit and you should get it working.

Answer 2

The most straightforward way to do this is probably to make the right portion an iframe.
Then each item in the middle list could be a link like so:
Company 2
In displaySubItems.php you would then use the $_GET['company'] value in your select statement to populate the table.
Alternatively you could make use of AJAX methods to populate the table on the right though I'm personally not that familiar with AJAX so I can't tell you more about that. Also I suspect iframes are more widely supported.
EDIT: changed some parts based on one of your comments