I am a complete programming novice having an issue of trying to get AJAX data appropriately into an existing table structure on my main page without losing the separate Javascript functionality of the table (sorting, filtering, etc.).
I have seen similar questions posed on this website that are close to what I am trying to accomplish but still do not provide the exact solution I am looking for.
I have an Ajax script that monitors a specified database table for any changes and will display any changes to a div tag ('object_area') on the main page via a php script in a separate file table.php. This AJAX script works perfectly.
Here is the ajax script:
// AJAX REQUEST
function httpRequest(){
var httpRequest = null;
try { httpRequest = new XMLHttpRequest(); }
catch(e){
try{httpRequest = new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){httpRequest = new ActiveXObject("Microsoft.XMLHTTP");}
}
return httpRequest;
}
var t;
function load_data(){
var http_request = httpRequest();
var object_area = document.getElementById('object_area');
var url = "table.php";
http_request.open("GET", url, true);
http_request.onreadystatechange = function(){
if(http_request.readyState == 4){
object_area.innerHTML = http_request.responseText;
}
}
http_request.send(null);
t = setTimeout(load_data, 1000);
}
document.onload = load_data();
Here is the pertinent code from table.php which is displayed back on the main page in the div tag: The data is pulled into a table (I have omitted the rest of the table code here and just shown the body data fetching portion.)
$result = mysql_query("SELECT * FROM Encounters WHERE encounterdate ='$mydate' && encounterstatus = 'pending'");
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['encounterstatus'] . "</td>";
echo "<td>" . $row['encountertime'] . "</td>";
echo "<td>" . $row['patientfirstname'] . "</td>";
echo "<td>" . $row['patientlastname'] . "</td>";
echo "<td>" . $row['patientdob'] . "</td>";
echo "<td>" . $row['encounterprovider'] . "</td>";
echo "<td>" . $row['encountertype'] . "</td>";
echo "<td>" . $row['encounterreason'] . "</td>";
echo "<td>" . $row['primaryinsurancecompany'] . "</td>";
echo "<td>" . $row['secondaryinsurancecompany'] . "</td>";
echo "<td>" . $row['primaryinsuranceplanrules'] . "</td>";
echo "<td>" . $row['copay1'] . "</td>";
echo "<td>" . $row['deductible1'] . "</td>";
echo "<td>" . $row['deductibleremaining1'] . "</td>";
echo "<td>" . $row['coinsurance1'] . "</td>";
echo "<td>" . $row['hrabalance'] . "</td>";
echo "<td>" . $row['oopremaining'] . "</td>";
echo "</tr>";
}
Here is the table code on the main page (similar to the one on table.php); but it has all the js functionality.
I want the AJAX data to display in this table without affecting the separate functionality.
Here is the code for the table on the main page using php to obtain the data row by row and display it in the table (note this is not by AJAX - it is just a standard table):
<table cellpadding="0" cellspacing="0" border="0" id="table" class="tinytable">
<thead>
<tr>
<th><h3>Status</h3></th>
<th><h3>Time</h3></th>
<th><h3>First Name</h3></th>
<th><h3>Last Name</h3></th>
<th><h3>DOB</h3></th>
<th><h3>Provider</h3></th>
<th><h3>Visit Type</h3></th>
<th><h3>Visit Reason</h3></th>
<th><h3>Primary Insurance</h3></th>
<th><h3>Secondary Insurance</h3></th>
<th><h3>Policy Rules</h3></th>
<th><h3>Visit Copay</h3></th>
<th><h3>Deductible</h3></th>
<th><h3>Deductible Remaining</h3></th>
<th><h3>CI%</h3></th>
<th><h3>HRA</h3></th>
<th><h3>OOP</h3></th>
</tr>
</thead>
<tbody>
<?php
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['encounterstatus'] . "</td>";
echo "<td>" . $row['encountertime'] . "</td>";
echo "<td>" . $row['patientfirstname'] . "</td>";
echo "<td>" . $row['patientlastname'] . "</td>";
echo "<td>" . $row['patientdob'] . "</td>";
echo "<td>" . $row['encounterprovider'] . "</td>";
echo "<td>" . $row['encountertype'] . "</td>";
echo "<td>" . $row['encounterreason'] . "</td>";
echo "<td>" . $row['primaryinsurancecompany'] . "</td>";
echo "<td>" . $row['secondaryinsurancecompany'] . "</td>";
echo "<td>" . $row['primaryinsuranceplanrules'] . "</td>";
echo "<td>" . $row['copay1'] . "</td>";
echo "<td>" . $row['deductible1'] . "</td>";
echo "<td>" . $row['deductibleremaining1'] . "</td>";
echo "<td>" . $row['coinsurance1'] . "</td>";
echo "<td>" . $row['hrabalance'] . "</td>";
echo "<td>" . $row['oopremaining'] . "</td>";
echo "</tr>";
}
?>
</tbody>
</table>
As previously mentioned, this table obtains functionality by a separate Javascript file (not shown here) that gives it the ability of sorting, filtering, etc.
Simply replacing the PHP "while loop" code with the div 'object_area' in the table body section results in loss of that separate scripting (sorting, filtering, etc) functionality of the table, although the data itself is displayed in a table format by virtue of table.php and does update correctly via the AJAX script. The loss of functionality would make sense considering the "table" on the main page is now really derived from two separate parts in this scenario.
Attempting to place the div directly in a table cell on the main page table in the manner below of course puts all the data in the first cell:
<?php
echo "<tr>";
echo "<td>";
?>
<div id = "object_area"></div>
<?php
echo "</td>";
echo "</tr>";
?>
I have also tried putting the entire table (js functionality and all) in table.php and displaying it in an I Frame on the main page. This does not work either.
Is there a way to parse the AJAX data into each specific cell of the table on the main page, row by row, based on the table structure and display it accordingly in the table body section without affecting the separate functionality of the entire table? (Perhaps there is a better way to do this, and I am going about this in the wrong fashion?).