Click here to Skip to main content
15,611,545 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am kind of a newbie, so bear with me. I am trying to show a div and within that is a table. The table data will be extracted using php. How the div would open is by clicking on a certain segment from my pie chart. I tried changing it but it isn't working.

For more detail: I have a slider with months as the values (e.g: Slide 1 = January), the data shown in my pie chart is according to months showing delivery statuses (Delivered/Not Delivered) and upon clicking the segment it will show a table with the clients data who has their item delivered/not delivered.

So here is my table:
<div class="myTable" id="Dev">
   <table id="tabs">
         <th>Type of Oat</th>
         <th># of Oat</th>
          // Table data will be here

Here is a piece of code for the slider:

if(slideIndex == 1){
    var month = "jan";
else if(slideIndex == 2){
    var month = "feb";

Here is the piece of code where the segment is clicked and will show the div with the table:

var m = month // value passed from slider pie(month)
var OatChart =[clickedIndex];

if(OatChart == "Delivered"){
   document.getElementById("tabs").innerHTML = <?php
   $con = mysqli_connect("localhost","root","","oatdistribution");
   $tabsql = "SELECT OatDis.Name, OatDis.LivingCondition, OatDis.OatType, OatDis.NoOfOats, '.$m.'.Status FROM OatDis INNER JOIN '.$m.' ON OatDis.Name = '.$m.'.Name WHERE '.$m.'.Status = 'Delivered'"; 
   $data = mysqli_query($con,$tabsql);
   while($row = mysqli_fetch_assoc($data)){
      echo "<tr>";
      echo "<td>" . $row['Name']."</td>";
      echo "<td>" . $row['LivingCondition']."</td>";
      echo "<td>" . $row['OatType']."</td>";
      echo "<td>" . $row['NoOfOats']."</td>";
      echo "<td>" . $row['Status']."</td>";
      echo "</tr>";
    } ?> ;
}else{ // same as above but status = "Not Delivered"

What I am trying to do is use the value I assigned when the slider changes to create the table. The value is the name of the table. I hope the question is understandable, Been through sleepless nights trying to figure this out. Something seems off with the code but I'm not sure what because the slider values are not showing, neither is the pie.

What I have tried:

I had it up and working but the way I coded it was inefficient. I had multiple functions for the pie for each month, and multiple divs representing each status for each month. It was very lengthy. I'm trying to shorten the code and make it more efficient but there seems to be an error but no error alerts upon inspecting
Updated 8-Apr-21 2:11am
Richard Deeming 8-Apr-21 4:50am    
Your code is vulnerable to SQL Injection[^]. NEVER use string concatenation to build a SQL query. ALWAYS use a parameterized query.
PHP: SQL Injection - Manual[^]

1 solution

I've never seen the construct:
document.getElementById("tabs").innerHTML = <?php . . . etc
as an implimentation of AJAX. At the very least it makes your code that much harder to read (if it works - I have my doubts). The PHP is in a separate file that is run on the server. PHP is not run on the client and for your page to even begin to work would require it be completely refreshed with arg's that are picked up and used in the PHP to build the page.

If it's new to you, review AJAX[^]. That should be Job 1.

Then have all of the data work and manipulation done on the server-side in your php file that does the query and manipulates the returned data.
So, if your PHP gets data
- Build the table in a loop, concatenating each of the items into a single string.
- That single string is returned to the calling page (javaScript AJAX routine) via ECHO. Not multiple ECHO commands.
- that returned value is then assigned to .innerHTML for your table element.

You can make this all more efficient - IF the column heads <th> are always the same: assign an id to the <tbody> element and just build the contents in your AJAX call and assign it there as the .innerHTML . If replacing headers, build them into your AJAX, etc. The surrounding div's are really best used for controlling the rendering if it can't been done simply in the <table> element. If your return of 'no data' is going to have it's own headers you must instead work at the level accessing the table id (thead and tbody are part of one big string - and actually useless in many contexts).

Personally - I hate sliders. A drop list for the dates is much easier and doesn't require the user (and their unknown physical abilities) to carefully slide until they get the correct value.
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900