Databases
StackOverflow2013
Postsdbo
PODisplay Multiple Records From SQL Query Using AJAX
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODisplay Multiple Records From SQL Query Using AJAX
    primarykey
    data
    text
    <p>This is my first attempt at AJAX, and I'm running into three specific problems. Let's work on one at a time. Here's goes the first one... </p> <p>So I built a PHP driven web page that accesses a SQL database and retrieves some records. Easy enough. Next I wanted the page to be up to date with the SQL database without the end user initiating an event so I simply set the page to refresh every 3 seconds. It's a simple fix but is obviously not a very sophisticated technique. So I assume Ajax is the answer.</p> <p>So I made an attempt to utilize Ajax on the page. First thing was to add the following code to the main page. We will call it main.php </p> <p><strong>main.php snippet</strong></p> <pre><code>&lt;script language="Javascript" type="text/javascript"&gt; var ajaxRequest; function queueRefresh(){ try{ ajaxRequest = new XMLHttpRequest(); } catch (e){ try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ alert("This application requires an Ajax enabled brower.!"); return false; } } } ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){/ document.write(ajaxRequest.responseText); } } ajaxRequest.open("GET", "queueRefresh.php?filter=&lt;?php echo $filter; ?&gt;", true); ajaxRequest.send(null); } &lt;/script&gt; </code></pre> <p>Next, I made a new page for the code above to reference called queueRefresh.php and moved all my SQL queries to that page. Here's the code for reference. (Password hidden for security.)</p> <p><strong>queueRefresh.php</strong> <pre><code> if(isset($_GET['filter']) AND $_GET['filter']&lt;&gt;"all"){ $filter=$_GET['filter']; } else { $filter=""; } $con=mysql_connect("localhost","cnsitq","********"); if (!$con){ die('Could not connect to database: ' . mysql_error()); } mysql_select_db("cnsitq", $con); if($filter&lt;&gt;""){ $resultQueue=mysql_query("SELECT * FROM queuetest WHERE client = '$filter' AND (status = '2' OR status = '4') ORDER BY client, site, status, mspadminready, mspready ASC"); } else { $resultQueue=mysql_query("SELECT * FROM queuetest WHERE status = '2' OR status = '4' ORDER BY client, site, status, mspadminready, mspready ASC"); } $row = mysql_fetch_array($resultQueue); echo json_encode($row); mysql_close($con); ?&gt; </code></pre> <p>Now up to this part everything is working flawlessly at retrieving my SQL query results and placing them into a PHP array variable named $row. What I'm having issues with is how to format and then display that data.</p> <p><strong>Options I've Been Given</strong><br> A. Some places are telling me to run $row through a PHP while loop and format the results with the desired HTML code (like I was doing before the AJAX attempt), then pass all that code through to the main page and use JS to display that data.<br> B. Other places are telling me to use json_encode($row) to convert $row to a JS array and then pass it to the main page and use JS to format the data with the desired HTML and display it. This is the first I've heard of JSON. As you can see in the example above, this is the option I've last attempted.</p> <p>The problem I'm having with option A is that maybe I'm extremely rusty with JS but once the variable is set to the AJAX response I do a little document.write(ajaxRequest.responseText); and ONLY the HTML code retrieved from the PHP page is displayed.</p> <p>The problem I'm having with option B is converting the JSON array back to "usable" data that I can then format accordingly.</p> <p>If it helps, here's the formatting code.</p> <pre><code>&lt;?php $i="0"; $prevClient=""; while($row = mysql_fetch_array($resultQueue)){ $client=$row['client']; $site=$row['site']; if($row['status']=="2"){ $status="MSP"; } elseif($row['status']=="4"){ $status="MSPAdmin"; } $tech=$row['tech']; if($row['status']=="2"){ $hour=substr($row['mspready'],0,-6); $minute=substr($row['mspready'],3,2); $suffix="AM"; if($hour&gt;="12"){ $suffix="PM"; if($hour&gt;"12"){ $hour=$hour-12; } } $timestamp=$hour . ":" . $minute . " " . $suffix; } elseif($row['status']=="4"){ $hour=substr($row['mspadminready'],0,-6); $minute=substr($row['mspadminready'],3,2); $suffix="AM"; if($hour&gt;="12"){ $suffix="PM"; if($hour&gt;"12"){ $hour=$hour-12; } } $timestamp=$hour . ":" . $minute . " " . $suffix; } $phone=$row['phone']; $locked=$row['locked']; if($client&lt;&gt;$prevClient){ if($prevClient&lt;&gt;""){ echo " &lt;tr&gt; &lt;td colspan=\"3\"&gt;&lt;i m g height=\"10\" src=\"images/spacer.gif\" width=\"10\" /&gt;&lt;/td&gt; &lt;/tr&gt;"; } echo " &lt;tr&gt; &lt;td colspan=\"3\" class=\"headerClient\"&gt;" . $client . "&lt;/td&gt; &lt;/tr&gt;"; } if($i &amp; 1){ echo " &lt;tr class=\"bodyText tableZebraDark bold\"&gt;"; } else { echo " &lt;tr class=\"bodyText tableZebraLight bold\"&gt;"; } echo " &lt;td width=\"25%\"&gt;" . $site . "&lt;/td&gt; &lt;td align=\"center\" width=\"37%\"&gt;" . $status . "&lt;/td&gt; &lt;td align=\"right\" width=\"38%\"&gt;" . $tech . "&lt;/td&gt; &lt;/tr&gt;"; if($i &amp; 1){ echo "&lt;tr class=\"bodyText tableZebraDark\"&gt;"; } else { echo " &lt;tr class=\"bodyText tableZebraLight\"&gt;"; } echo " &lt;td width=\"25%\"&gt;"; if($authentication=="valid"){ if($locked==""){ echo "&lt;i m g title=\"You are authorized to update this site.\" height=\"10\" src=\"images/edit.gif\" width=\"10\" /&gt;"; } else { echo "&lt;i m g title=\"Someone is already updating this site. Try again in a moment.\" height=\"10\" src=\"images/locked.png\" width=\"10\" /&gt;"; } } else { echo "&lt;i m g height=\"10\" src=\"images/spacer.gif\" width=\"10\" /&gt;"; } if($notes==""){ echo "&lt;i m g height=\"10\" src=\"images/spacer.gif\" width=\"10\" /&gt;"; } else { echo "&lt;i m g title=\"" . $notes . "\" height=\"10\" src=\"images/notes.jpg\" width=\"10\" /&gt;"; } echo"&lt;/td&gt; &lt;td align=\"center\" width=\"37%\"&gt;" . $timestamp . "&lt;/td&gt; &lt;td align=\"right\" width=\"38%\"&gt;" . $phone . "&lt;/td&gt; &lt;/tr&gt;"; $prevClient=$client; $i++; } ?&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USEric Fledderman
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload