Search code examples
javascriptpythonphpdropdownhidden

IDs not working as expected in a while loop in PHP

I am trying to create a while loop that echoes a button for each $version value. shell_exec() returns a value from a Python file and is responsive to a unique $version value. To that end, the basic goal is to create a page where the quantity of buttons is dependent on the version value.

Then, the user can click any specific button and access data for that one specific button(version). To do this, I tried to mix variables with IDs but it did not seem to work. What can I do to fix this? None of the buttons are responsive right now.

Code:

<?php
              
              
              while ($version != 0) {


                echo '
                <br>
                <br>
                <button id="toggle-' . $version . '">TOGGLE</button>
                <div style= "display:none;" id="content-' . $version . '">

                ';

                $command = escapeshellcmd("C:/Python38/python.exe C:/xampp/htdocs/Ensemble/login/test.py $email $version"); 
                $output = shell_exec("$command 2>&1");
                echo($output);

                echo '
                </div>


                <script>
                var toggle  = document.getElementById("toggle-' . $version . '");
                var content = document.getElementById("content-' . $version . '");

                toggle.addEventListener("click", function() {
                  content.style.display = (content.dataset.toggled ^= 1) ? "block" : "none";
                });
                </script>

                '
                ;

                $version--;
              }
            ?>

Edit

A new issue arose. Only one of the buttons work. Both buttons when clicked output the same thing instead of different versions. In SQL all versions are different so this is an error most likely with the html/JS.

image

Solution

  • Perhaps the following might help - though it is not tested as far as the Python call is concerned but I think the other code should work OK if I understood correctly.

    Every ID must be unique in the DOM which I guess is why you tried to make them so by adding the $version number to each. This is not really necessary if you utilise querySelectorAll with a suitable expression. Doing this in conjunction with one or more of the parent/sibling selectors that exists in vanilla javascript allow fairly easy DOM navigation and manipulation. It also means you can use the same piece of code for all the buttons... hope it helps.

    <?php
    while( $version > 0 ) {
    
        $command = escapeshellcmd( "C:/Python38/python.exe C:/xampp/htdocs/Ensemble/login/test.py $email $version" ); 
        $output = shell_exec("$command 2>&1");



        printf('
            <br />
            <br />
            
            <button data-version="%d">Toggle</button>
            <div style="display:none">%s</div>', 
            $version,
            $output 
        );

        $version--;
    }
    
    echo "
    <script>
        Array.from( document.querySelectorAll('button') ).forEach( bttn=>{
            bttn.addEventListener('click', function(e){
                let version=this.dataset.version;
                let div=this.nextElementSibling;
                    div.style.display=div.style.display=='block' ? 'none' : 'block';
                
            });
        })
    </script>";
?>