How to open PDF's with "foreach" created buttons?-CodePudding

I'm building a wiki website and everything works when I only use HTML and JavaScript:

i klick button and it opens it in an iframe

<ul id="myUL">
            <li><span >Technik</span>
                <ul >
                    <li><input  type="button" value="Audit" onclick="altPdf()" /></li>

                </ul>
            </li>

            <li><span >Lager</span>
                <ul >
                    <li><input  type="button" value="Broker" onclick="brPdf()" /></li>
                    <li><input  type="button" value="alt_WE" onclick="lrawePdf()" /></li>

                </ul>
            </li>

        </ul>

function altPdf() {
    var omyFrame = document.getElementById("myFrame");
    omyFrame.style.display = "block";
    omyFrame.src = dbw;
}

var wdb = "anleitungen/lager/Arbeitsanweisung Wareneingang Durschub & Broker.pdf";

Buttons work but for every PDF file I have to add several lines of code and set exact path.

this is how it is looking right now

I go over subdirectories and files and create list elements and buttons with a foreach loop in PHP, naming buttons after PDF files. This makes it easier to add or remove folders and files not having to alter code every time.

 <?php
        $mainDir = __DIR__.'/anleitungen';
        $subDirectories = scandir($mainDir);
        
        unset($subDirectories[0]);
        unset($subDirectories[1]);
    ?>

        <ul id="myUL">

        <?php   
            foreach ($subDirectories as $subDirectory) {
            ?>
            <li><span ><?= $subDirectory ?></span>
                <ul >
                    
                    <?php
                    foreach(glob($mainDir.'/'.$subDirectory.'/*') as $file){
                    $info = pathinfo($file, PATHINFO_FILENAME);
                        //print_r ($file);
                    ?>
                    <li><input  type="button" value="<?= $info ?>" onclick="showPdf()"/>
                    </li>
                   <?php
                    }
                    ?>
                </ul>
            </li>
           <?php
            }
            ?>  

        </ul>

function showPdf() {
    var omyFrame = document.getElementById("myFrame");
    omyFrame.style.display = "block";
    omyFrame.src = $file[i];
}

But now none of buttons work because they don't have the source anymore. scandir and glob return an array and I name buttons after the array data. Can I put an onclick function on the buttons so they open the PDF file they're named after? Like "button.getpathofvalue" or something?

When I print_r value of $file I get path to file but can't open it.

CodePudding user response：

You can try as specified by @ADyson to pass the path of the file to your function. With code that looks like this.

<html>
<body>

<?
$mainDir        = __DIR__.DIRECTORY_SEPARATOR.'tests'.DIRECTORY_SEPARATOR;
$subDirectories = scandir($mainDir);

unset($subDirectories[0]);
unset($subDirectories[1]);
?>


<ul>
<?
// For Each Sub Directory
foreach ($subDirectories as $subDirectory)
{
    ?>
    <li>
        <span><? echo $subDirectory; ?></span>
        <?
        // For Each File
        foreach(glob($mainDir.DIRECTORY_SEPARATOR.$subDirectory.DIRECTORY_SEPARATOR.'*') as $file)
        {
            // Get Info about File
            $info = pathinfo($file, PATHINFO_FILENAME);
            ?>
            <li><input type="button" value="<? echo $info; ?>" onclick="showPdf('<? echo $file; ?>');"/></li>
            <?                   
        }
        // End - For Each File
        ?>
    </li>
    <?
}
// End - For Each Sub Directory
?>
</ul>


<script>
function showPdf(fileFonc)
{
    alert(fileFonc);
}
</script>

</body>
</html>

I just made an alert in the "showPdf()" function, it's just to show the principle to be implemented.