I have a php script that pulls several rows of invoices from a database and displays them on the screen in table format. I have created an onclick per row within the while loop in order call another php script that runs a query to pull all the attachments for that particular invoice. The problem i'm having is that the onclick function only pulls the attachments for the first row returned in the table, no matter which row I click "view" on to trigger the onclick. The onclick is using getElementById, and all the ids are the SAME. So it is just finding the first instance of the id and displaying THAT no matter which row i click "view" in to see the attachments. Is there a way to allow the onclick to pull the right attachments for each row?
index.php
<?php session_start(); error_reporting(E_ALL & ~E_NOTICE & ~E_WARNING);?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- Load jQuery, SimpleModal and Basic JS files -->
<script type='text/javascript' src='/invoices/scripts/jquery.js'></script>
<script type='text/javascript' src='/invoices/scripts/jquery.simplemodal.js'></script>
<script type='text/javascript' src='/invoices/scripts/basic.js'></script>
<title>Hoovestol Dashboard</title>
<script type="text/javascript">
function reFresh() {
location.reload(true)
}
/* Set the number below to the amount of delay, in milliseconds,
you want between page reloads: 1 minute = 60000 milliseconds. */
window.setInterval("reFresh()",300000);
</script>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('basic-modal-content');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
[B]var invoice_num = document.getElementById('invoice_num').value[/B];
var queryString = "?invoice_num=" + invoice_num;
ajaxRequest.open("GET", "getattachments.php" + queryString, true);
ajaxRequest.send(null);
}
//-->
</script>
</head>
<body>
<div style="margin:0 auto; width:800px;">
<!--Equipment Starts-->
<div style="text-align:left;"><h1 style="margin-bottom:3px; margin-right:20px;">Recent Invoices</h1></div>
<table align="center" id="printview" class="qresults">
<tr>
<th style="width:150px;">Equipment Number</th><th style="width:150px;">Invoice Number</th><th style="width:400px;">Notes</th><th style="width:100px;">Action</th>
</tr>
<?php
$conn = mysql_connect('xxx','hoovdash','xxx');
$db = mysql_select_db('hoov_dashboard',$conn);
$sql = "SELECT * FROM invoices WHERE on_hold='1' ORDER BY create_date";
$result = mysql_query($sql,$conn);
while($row = mysql_fetch_assoc($result))
{
$id = $row['id'];
$equip_num = $row['equip_num'];
$invoice_num = $row['invoice_num'];
$notes = $row['notes'];
$row_class = ($row_count % 2) ? $class1 : $class2;
echo"<tr><td class='$row_class'>$equip_num</td><td class='$row_class'>$invoice_num</td><td class='$row_class'>$notes</td><td class='$row_class' style='text-align:center;'>[B]<div id='basic-modal'><form name='myForm'><input type='text' id='invoice_num' value='$invoice_num' /><input type='button' onclick='ajaxFunction()' value='view' class='basic'/></form></div></td>[/B]</tr>";
}
?>
</div>
</table><br /><br />
<div id='basic-modal-content'>[B][I]This is where the attachments are displayed (it actually is linked to a js file that uses a dialog box to display the attachments.)[/I][/B]</div>
<div style='display:none'>
<img src='/invoices/images/x.png' alt='' />
</div>
</body>
</html>getattachments.php
<?php
$conn = mysql_connect('xxx','hoovdash','xxx');
$db = mysql_select_db('hoov_dashboard',$conn);
$invoice_num = $_GET['invoice_num'];
$invoice_num = mysql_real_escape_string($invoice_num);
$sql = "SELECT * FROM attachments WHERE invoice_num='$invoice_num' ORDER BY create_date";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
echo"<p>$row[file]</p>";
}
?>