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

Question

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 class="caret">Technik</span>
                <ul class="nested">
                    <li><input class="btn" type="button" value="Audit" onclick="altPdf()" /></li>

                </ul>
            </li>

            <li><span class="caret">Lager</span>
                <ul class="nested">
                    <li><input class="btn" type="button" value="Broker" onclick="brPdf()" /></li>
                    <li><input class="btn" 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 class="caret"><?= $subDirectory ?></span>
                <ul class="nested">
                    
                    <?php
                    foreach(glob($mainDir.'/'.$subDirectory.'/*') as $file){
                    $info = pathinfo($file, PATHINFO_FILENAME);
                        //print_r ($file);
                    ?>
                    <li><input class="btn" 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.

"showPdf()" is a Javascript function, right? So you can't use a PHP variable in this function like you do with "$file[i]". — Juan, Nov 15 '22 at 12:02
Yes "showPdf()" is js. But how do i tell the buttons wich pdf they should open in the iframe? And without js? — DogFaceGremlin, Nov 15 '22 at 12:14
Why not pass a parameter into the showPDF function containing information about the document it needs to load. You can use php to echo a value into the onclick attribute — ADyson, Nov 15 '22 at 12:21
First step: check whether the markup you've generated using PHP matches the one you wrote before. If it does: PHP is not to blame. If it does not: JS is not to blame. Share your attempts to resolve the problem — Nico Haase, Nov 15 '22 at 12:46
Does this answer your question? [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) — gre_gor, Nov 15 '22 at 13:16

Juan · Accepted Answer · 2022-11-15T16:24:59.750

0

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.

edited Nov 15 '22 at 16:24

answered Nov 15 '22 at 12:31

Juan

690
4
15

The alert did nothing, i changed it to console.log to see if something happend and when i press a button i get "Uncaught SyntaxError: Invalid hexadecimal escape sequence" in the console. When i look at the path from $file it's like: "C:\xampp\htdocs\Wiki/anleitungen/Lager/Durchschub.pdf" is the slash and backslash thing causing a problem? – DogFaceGremlin Nov 15 '22 at 14:00
This code works fine on my server. But your post is related to your filenames in my opinion. With characters like escape or & – Juan Nov 15 '22 at 14:02
I tested with the file name you give as an example, namely "Arbeitsanweisung Wareneingang Durschub & Broker.pdf" and it works. But I'm not on Windows with Xamp, I'm on Linux with Apache et PHP. In your code you use only `$file` to pass at function and you have a path with slash and anti-slash.???? – Juan Nov 15 '22 at 14:26
Use `DIRECTORY_SEPARATOR` instead Slash. I modify the code in my answer – Juan Nov 15 '22 at 16:25
Perfect, now with passing the parameter and the "directory separator" it works. Coding on a windows machine for a remote desktop linux server gave me a hard time. – DogFaceGremlin Nov 16 '22 at 09:55
I'm happy if I could help you. But I'm still coding on Linux so I'm not used to using system-specific predefined PHP constants like `__DIR__ ` or `DIRECTORY_SEPARATOR`. But in your case it is indeed necessary for the code to be compatible between the different OS – Juan Nov 16 '22 at 11:10

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

1 Answers1