jquery Datatables with dialog button

Question

I am trying to utilize a button that will open a dialog based on the specific row that the button is located in. I have attached my code below.

The button is class is dlg-outletpart-btn:

Here is the jquery javascript portion:

<script> /*datatables script function below */
$(document).ready( function () {
$('#table_id_outlets').DataTable();
} );
</script>
<script> /*jquery dialog controls for project detail */
$(function() {
$( ".dlgoutletpart" ).dialog({
  autoOpen: false,
  show: {
    effect: "blind",
    duration: 500
  },
  hide: {
    effect: "fade",
    duration: 700
  },

});

$( ".dlg-outletpart-btn" ).click(function() {
  var outletID = $(this).attr("data-dlg-outletparts");
  $( "#dialog-" + outletID ).dialog( "open" )
});
});
</script>

Here is the html with php:

<body>
<div>
<p>
<a href="login.php" target="_self"> <h3>Go Back to main page</h3> </a>
</p>
</div>
<div>
<?php

session_start();

require_once('./includes/php/include_master.php');

if ($_SESSION['authenticated'] == "true") {

$id_account = $_SESSION['ID_Account'];

$q = $protoFM['EMGSV'] -> newFindCommand('web_outlets');
$q -> addFindCriterion('id_account', '=='.$id_account);

$r = $q->execute();

if(FileMaker::isError($r)){

    if($r->code == 401){
        echo "No outlets found.";
    }else{
        echo "Unknown Error:".$r->code;
    }

}else{


}

} else {
echo "You are not logged in.";
}

?>
<?php

foreach ($r->getRecords() as $parts){
$outletID = $parts->getField('ID_Outlet');
$outletData1 = $parts->getField('Image_Data');
$outletData2 = $parts->getField('Image_Data2');
$outletData3 = $parts->getField('Image_Data3');
$outletPart1 = $parts->getField('part1');
$outletPart2 = $parts->getField('part2');
$outletPart3 = $parts->getField('part3');
$outletPart4 = $parts->getField('part4');
$outletPart5 = $parts->getField('part5');
$outletPart6 = $parts->getField('part6');
$outletPart7 = $parts->getField('part7');
$outletPart8 = $parts->getField('part8');
$outletPart9 = $parts->getField('part9');
$outletPart10 = $parts->getField('part10');

        echo '<div class="dlgoutletpart" id="dialog-' .$outletParts. '" title="Outlet Parts for '.$outletID.'">';
        echo '<p>';
        echo '1. &nbsp;'.$outletPart1.'<br>';
        echo '2. &nbsp;'.$outletPart2.'<br>';
        echo '3. &nbsp;'.$outletPart3.'<br>';
        echo '4. &nbsp;'.$outletPart4.'<br>';
        echo '5. &nbsp;'.$outletPart5.'<br>';
        echo '6. &nbsp;'.$outletPart6.'<br>';
        echo '7. &nbsp;'.$outletPart7.'<br>';
        echo '8. &nbsp;'.$outletPart8.'<br>';
        echo '9. &nbsp;'.$outletPart9.'<br>';
        echo '10. &nbsp;'.$outletPart10.'<br>';
        echo '</p>';
        echo '</div>';
}
?>
<table id="table_id_outlets" class="display">
<thead>
    <tr>
        <th>Floor</th>
        <th>Area Served</th>
        <th>Room Number</th>
        <th>Outlet Number</th>
        <th>Outlet Gas</th>
        <th>Outlet Manufacturer</th>
        <th>Outlet Model</th>
        <th>Outlet Parts</th>
    </tr>
</thead>
<tbody>
<?php
foreach ($r->getRecords() as $outlet){
$outletFloor = $outlet->getField('Outet_Floor');
$outletAreaServed = $outlet->getField('Outlet_Area_Served');
$outletRoomNumber = $outlet->getField('Outet_Room_Number');
$outletNumber = $outlet->getField('Outlet_Number_In_Room');
$outletGas = $outlet->getField('Outlet_Gas_Type');
$outletManufacturer = $outlet->getField('Outlet_Manufacturer');
$outletModel = $outlet->getField('Outlet_Model');

        echo "<tr>";
        echo '<td>' .$outletFloor. '</td>';
        echo '<td>' .$outletAreaServed. '</td>';
        echo '<td>' .$outletRoomNumber. '</td>';
        echo '<td>' .$outletNumber. '</td>';
        echo '<td>' .$outletGas. '</td>';
        echo '<td>' .$outletManufacturer. '</td>';
        echo '<td>' .$outletModel. '</td>';
        echo '<td> <button class="dlg-outletpart-btn" data-dlg-outletparts="'.$outletParts.'">Outlet Parts</button>';
    }
?>
</tbody>
</table> 

</div>
<?php $outlet->getfields('Outlet_Room_Number')?>
</body>

score 0 · Answer 1 · edited Oct 19 '22 at 00:43

I didn't try to test this and there was a lot of cleanup needed so take this with a grain of salt rather than the exact solution.

Before I get into the explanation, there are a couple of points that need to be made:

Stay on top of your indention levels
Poorly indented code is harder to build in and even harder to troubleshoot.
REMEMBER: what you post online reflects on you as a programmer.
Don't use variables with single letters.
Give your variables proper and descriptive names. Single letter names also make it hard to code and hard to troubleshoot.
If you don't need it, don't write it
This is especially true if you're going to post on StackOverflow asking for help. The place where you had an else clause without any code in it should be stripped out of your question and really should be stripped out of your code. If you don't have any tasks to perform within a clause then don't add it. Add it back in when you actually need it. This goes for the closing and immediately opening of the php element. There's no reason to close one php element if you're going to immediately open another. If this is because your knitting two different sections together for the question then clean it out before you submit it.

So, here's the code you can try. Focus on the parts that I commented on in the javascript. The basic idea is:

Make the table your main selector.
You could make the tr element the main selector and it would still give you the index of the tr in the table, but adding the selector to the table itself means if you programmatically add new rows after the DOM has been rendered the jquery method will work for them as well.
Use the this keyword as a starting point.
this will be the button clicked which will allow you to navigate around.

Leverage jquery's navigation methods, in this case closest().

 <html>
 <head>
     <script> /*datatables script function below */
         $(document).ready( function () {
             $('#table_id_outlets').DataTable();
         });
     </script>

     <script> /*jquery dialog controls for project detail */
         $(function() {
             $( ".dlgoutletpart" ).dialog({
               autoOpen: false,
               show: {
                 effect: "blind",
                 duration: 500
               },
               hide: {
                 effect: "fade",
                 duration: 700
               },

             });

             // I changed the element selector to the id of the table element. 
             // This allows you to specify the selector for the 'on' method to apply to all
             // tr elements within the given table and then reference their index relative
             // to the overall table.
             // I'm using `button` for the method's selector because you have only have 
             // on button in your table so it de-couples your selector from your class name.
             $( "#table_id_outlets" ).on('click', 'button', function() {
                 debugger;
                 // this: refers to the button that was clicked
                 // closest: walks up the node hierarchy till it finds a `tr`
                 // index(): gives you the index of the `tr` within the table.
                 // Use the index number however you need.
                 console.log($(this).closest('tr').index());

                 var outletID = $(this).attr("data-dlg-outletparts");
                 $( "#dialog-" + outletID ).dialog( "open" )
             });
         });
     </script>
 </head>

     <body>
     <div>
     <p>
     <a href="login.php" target="_self"> <h3>Go Back to main page</h3> </a>
     </p>
     </div>
     <div>
     <?php

     session_start();

     require_once('./includes/php/include_master.php');

     if ($_SESSION['authenticated'] == "true") {

         $id_account = $_SESSION['ID_Account'];

         // Note: you can't put a space between your 
         $query = $protoFM['EMGSV']->newFindCommand('web_outlets');
         $query->addFindCriterion('id_account', '==' . $id_account);

         $result = $query->execute();

         if(FileMaker::isError($result)){
             if($result->code == 401){
                 echo "No outlets found.";
             }else{
                 echo "Unknown Error:".$result->code;
             }
         }

     } else {
     echo "You are not logged in.";
     }

     foreach ($result->getRecords() as $parts){
         $outletID     = $parts->getField('ID_Outlet');
         $outletData1  = $parts->getField('Image_Data');
         $outletData2  = $parts->getField('Image_Data2');
         $outletData3  = $parts->getField('Image_Data3');
         $outletPart1  = $parts->getField('part1');
         $outletPart2  = $parts->getField('part2');
         $outletPart3  = $parts->getField('part3');
         $outletPart4  = $parts->getField('part4');
         $outletPart5  = $parts->getField('part5');
         $outletPart6  = $parts->getField('part6');
         $outletPart7  = $parts->getField('part7');
         $outletPart8  = $parts->getField('part8');
         $outletPart9  = $parts->getField('part9');
         $outletPart10 = $parts->getField('part10');

         echo '<div class="dlgoutletpart" id="dialog-' .$outletParts. '" title="Outlet Parts for '.$outletID.'">';
         echo '<p>';
         // Use an unordered list here
         echo '1. &nbsp;'.$outletPart1.'<br>';
         echo '2. &nbsp;'.$outletPart2.'<br>';
         echo '3. &nbsp;'.$outletPart3.'<br>';
         echo '4. &nbsp;'.$outletPart4.'<br>';
         echo '5. &nbsp;'.$outletPart5.'<br>';
         echo '6. &nbsp;'.$outletPart6.'<br>';
         echo '7. &nbsp;'.$outletPart7.'<br>';
         echo '8. &nbsp;'.$outletPart8.'<br>';
         echo '9. &nbsp;'.$outletPart9.'<br>';
         echo '10. &nbsp;'.$outletPart10.'<br>';
         echo '</p>';
         echo '</div>';
     }
     ?>
     <table id="table_id_outlets" class="display">
         <thead>
             <tr>
                 <th>Floor</th>
                 <th>Area Served</th>
                 <th>Room Number</th>
                 <th>Outlet Number</th>
                 <th>Outlet Gas</th>
                 <th>Outlet Manufacturer</th>
                 <th>Outlet Model</th>
                 <th>Outlet Parts</th>
             </tr>
         </thead>
         <tbody>
         <?php
         foreach ($result->getRecords() as $outlet){
             $outletFloor        = $outlet->getField('Outet_Floor');
             $outletAreaServed   = $outlet->getField('Outlet_Area_Served');
             $outletRoomNumber   = $outlet->getField('Outet_Room_Number');
             $outletNumber       = $outlet->getField('Outlet_Number_In_Room');
             $outletGas          = $outlet->getField('Outlet_Gas_Type');
             $outletManufacturer = $outlet->getField('Outlet_Manufacturer');
             $outletModel        = $outlet->getField('Outlet_Model');

             echo "<tr>";
             echo '<td>' .$outletFloor. '</td>';
             echo '<td>' .$outletAreaServed. '</td>';
             echo '<td>' .$outletRoomNumber. '</td>';
             echo '<td>' .$outletNumber. '</td>';
             echo '<td>' .$outletGas. '</td>';
             echo '<td>' .$outletManufacturer. '</td>';
             echo '<td>' .$outletModel. '</td>';
             echo '<td> <button class="dlg-outletpart-btn" data-dlg-outletparts="'.$outletParts.'">Outlet Parts</button>';
             }
         ?>
         </tbody>
     </table> 

     </div>
     <?php $outlet->getfields('Outlet_Room_Number')?>
     </body>
 </html>

I didn't test the php portion out, but the jquery definitely works.

jquery Datatables with dialog button

1 Answers1