How do I create a table in PHP using javascript variable

Question

0.00/5 (No votes)

See more:

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">
     <thead>
       <tr>
         <th>Name</th>
         <th>Condition</th>
         <th>Type of Oat</th>
         <th># of Oat</th>
         <th>Status</th>
       </tr>
      </thead>
      <tbody>
          // Table data will be here
      </tbody>
    </table>
</div>

Here is a piece of code for the slider:

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

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 = myChart.data.labels[clickedIndex];

if(OatChart == "Delivered"){
   $("#Dev").show();
   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

Posted 7-Apr-21 22:35pm

Allysha April

Updated 8-Apr-21 2:11am

Add a Solution

Comments

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

W∴ Balboos, *GHB* · Answer 1 · 2021-04-08T02:11:00

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.

Also:
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.