I have a list of values that upon hyperlink 'onclick' will display the associated recordset in an array below.
Through PHP, I have the dataset of connected table values working. Now I need to link that dataset to the onclick event.
Through my research there are a few ways I can go about this: iFrames (seems not recommended); JSON/AJAX (languages which I do not know and none of my other data uses this construct, but is it possible to use straight PHP?);
$_GET variable with a related function seems to be the way to go though am struggling to get the right syntax to create a response. Will this be using a filter function?
essentially: $row_artistrecordset['artist'] = $row_getartists['artist']. If I can base the code on this match construct it will hopefully be versatile enough for use in other pages.
This is my code so far:
<?php
mysql_select_db($database_connectmysql, $connectmysql);
$query_artistrecordset = "SELECT * FROM artists ORDER BY artist ASC";
$artistrecordset = mysql_query($query_artistrecordset, $connectmysql) or die(mysql_error());
$row_artistrecordset = mysql_fetch_assoc($artistrecordset);
$totalRows_artistrecordset = mysql_num_rows($artistrecordset);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>artistindex</title>
<link href="exhibitstyles/exhibitstyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php include_once("exhibitstyles/header.php");?>
<div id="singlemid" class="paragraph" style="text-align:center">
<div id="artistlist">
<?php do { ?>
<a href=javascript:function_$_GET(artistindex.php?[$row_artistrecordset['artist']]);>; title="artistlink" class="list"><?php echo $row_artistrecordset['artist']; ?></a> |
<?php } while ($row_artistrecordset = mysql_fetch_assoc($artistrecordset)); ?>
</div>
<br />
<div id="searchresults">
function_$_GET(artistindex.php?[$row_artistrecordset['artist']]) {
$.post("artistindex.php",'v=.$row_getartists['artist'].' + value, function $_GET(artistindex.php?[$row_artistrecordset['artist']]) {
$query_getartists.html().trigger("create");
});
}
<?php
mysql_select_db($database_connectmysql, $connectmysql);
echo <a href=javascript:function_$_GET(artistindex.php?[$row_artistrecordset['artist']]);>.$row_getartists['artist'].;
$query_getartists = "SELECT * FROM artists WHERE artist = '".$row_artistrecordset['artist']."' ORDER BY artist ASC";
$getartists = mysql_query($query_getartists, $connectmysql) or die(mysql_error());
while ($row_getartists = mysql_fetch_assoc($getartists)) {
echo $row_getartists['artist'], "<br>";
echo $row_getartists['website'], "<br>";
echo $row_getartists['artist_statement'], "<br>";
echo $row_getartists['image'], "<br>";
$artistlink = $row_getartists['artist'];
$query_getseries = "SELECT * FROM series WHERE artist='$artistlink' ORDER BY exhibition ASC";
$getseries = mysql_query($query_getseries, $connectmysql) or die(mysql_error());
while ($row_getseries = mysql_fetch_assoc($getseries)) {
echo $row_getseries['series'], "<br>";
echo $row_getseries['exhibition'], "<br>";
echo $row_getseries['series_statement'], "<br>";
echo $row_getseries['image'], "<br>";
$serieslink = $row_getseries['series'];
$query_getpieces = "SELECT * FROM pieces WHERE series='$serieslink'";
$getpieces = mysql_query($query_getpieces, $connectmysql) or die(mysql_error());
while ($row_getpieces = mysql_fetch_assoc($getpieces)) {
echo $row_getpieces['piece'], "<br>";
echo $row_getpieces['category'], "<br>";
echo $row_getpieces['dimensions'], "<br>";
echo $row_getpieces['price'], "<br>";
echo $row_getpieces['description'], "<br>";
echo $row_getpieces['image'], "<br>";
}
}
?>
</div>
</div>
</body>
</html>
<?php
mysql_free_result($getartists);
mysql_free_result($getseries);
mysql_free_result($getpieces);
}
?>
You want an action to take place when the user clicks something. Let's say you have a table of values and you want to get further information about a value. The html might look like this:
<table width=100% cellpadding=0 cellspacing=0>
<tr>
<td width=30% valign=top><span onclick="alert('Value 1 was clicked');">1</span></td>
<td width=70% valign=top>Description of Value 1</td>
</tr>
<tr>
<td width=30% valign=top><span onclick="alert('Value 2 was clicked');">1</span></td>
<td width=70% valign=top>Description of Value 2</td>
</tr>
</table>
What will happen here is that the javascript alert() function will be called when you click on either of the two leftmost columns of the table.
You could also pass the information to your own script as in:
<script>
function myOwnAlert(value) {
alert(value);
}
</script>
<div id="myTable">
<table width=100% cellpadding=0 cellspacing=0>
<tr>
<td width=30% valign=top><span onclick="myOwnAlert('Value 1 was clicked');">1</span></td>
<td width=70% valign=top>Description of Value 1</td>
</tr>
<tr>
<td width=30% valign=top><span onclick="myOwnAlert('Value 2 was clicked');">1</span></td>
<td width=70% valign=top>Description of Value 2</td>
</tr>
</table>
</div>
The net effect is the same, a message was displayed. However, you could also update the table dynamically using jQuery. There are a number of tutorials on jQuery available online. You will basically wind up with a javascript function such as:
<script>
function myOwnAlert(value) {
$.post("getnewtable.php",'v=' + value, function(data) {
$("#myTable").html().trigger("create");
});
}
</script>
This will result in the contents of your table being replaced with the output of the your getnewtable.php script.
Note: This is not meant to be a prime example of using either HTML or jQuery -- just a very mini-tutorial.