How to display a modal when PHP id is clicked in data table?

Question

I have some php code fetching data from database and inserting the data into a bootstrap data table and I have a cell in a row that shows a modal. When that button is clicked it contains and ID with child stuff that I want to show in a modal.

//#Example datatable
foreach($xx as $item) {
  if($item) {
    if ($item->state){
    $id = $item->id;
    $dname = $item->district_name;
    $state = $item->state;
    $city = $item->city;
    $schools = $item->schools;
    $students = $item->students;
    global $stateId;
    $stateId = $item->state_district_id;
}
  }
   echo ' <tr>
            <td class="icon-class"></td>
     <td align="center">' . $dname . '</td>
     <td align="center">' . $state . '</td>
     <td align="center">' . $city . ' </td>
     <td align="center">' . $schools . '</td>
     <td align="center">' . $students . '</td>
     <td align="center">
<button onclick="myFunChild('. $stateId .')">View Schools</button>
</td>
<td align="center"><button onclick="myFunctionz(' . $id .')">Request District</button></td>
          </tr>';

this is my function and I realize I'm not doing anything with the $stateId that i passed yet

function myFunChild(strg){
"use strict";
("#myModal").modal('show');
}

Then I have similar code like section: #Example datatable to fetch data from database using the $stateId

but obviously it only takes the last ID the database gives me after setting up the first data table what I'm trying to do is taking the current/right ID of that particular row that was clicked to "View Schools"

IE I'm putting data into the main data table and at the same time my child table is also populating but I need to wait until a user has clicked view more to populate child table with correct ID.

How do I go about this? Thanks!

Answer 1

You've passed the PHP var to JS correctly. Just reference it using the strg JS arguent and not $stateId and it will be unique each time. Everything else you want to show in JS will need to be passed through to JS as an argument to a JS function.

It's important to realize the PHP will only be processed one time . It is a backend language and runs on an entirely different machine. The JS variables are client side and can change at runtime, they have no idea what has occurred in PHP. Example: after the page loads stateId was already permanently placed in the page and is no longer accessible as a variable. To the client and JS it is now as if it was hard-coded there in the first place.

So what you have done is generated code such as:

<button onclick="showModal(1)">
<button onclick="showModal(2)">
<button onclick="showModal(3)">

This is good.

Now since JS has no idea what PHP is or that it was used to build the page, the above is all it sees. Press view source to see what javascript sees. Nothing outside of a $_REQUEST query like POST/GET is accessible to it.

So in JS you must write the function:

function showModal(id) {
  alert("You clicked button " + id);
}

If you try to incorrectly write instead:

function showModal(id) {
  alert("You clicked button " + $somePHPVariable);
}

Then press View Source and you will see that you have already written this function to be alert("You clicked button " + 3); before the JS code even knew what happened.

So your answer is you must use the strg in myFunChild to create a unique dialog each time.

function myFunChild(strg){
  "use strict";
  ("#myModal" + strg).modal('show');
}

With any other data you want to pass here, it must be another argument, an array, passed through AJAX, or URL #query... somehow it must become JS accessible before it is used.