Add PHP code to dynamically generated HTML data

Question

I am trying to make a website which will basically have a lot of buttons that will execute a particular PHP file on click and show their results on an empty box on the same screen. These PHP files are present in a directory test_scripts in the same directory as index.php.

I thought that the obvious step would be to create a loop that will iterate over those files and create their ui dynamically. So I wrote the following PHP code in the middle of index.php

#Index.php
...
 <?php
    $dir_itr = new DirectoryIterator("test_scripts");
    foreach ($dir_itr as $file) {
        if ($file->isFile()) {

            $filename = $file->getFilename();
            $formattedFileName =
                '<button
                     class="box button is-large is-fullwidth is-primary is-light"
                     onclick="loadScriptFileData($filename)">
                               $filename
                 </button>';
            print $formattedFileName;
        }
    }
?>
...

The loadScriptFileData() is a JavaScript function written in a script tag present in head:

<!--index.php-->

<script>
    function loadScriptFileData(filename) {
        alert(filename);
    }
</script>

The for each loop is running correctly, but the JavaScript function and the generated HTML is not working correctly. There are the expected number of buttons on the page, but each button just has the name as the word "$filename" and not the actual expected filename. The case is worse with JavaScript, which straight out does not work and gives the error in the console as Uncaught ReferenceError: $filename is not defined at HTMLButtonElement.onclick ((index):71)

Why is the $variable not getting converted to a string? I even tried the toString() function, but still no good. Am I doing it wrong?

What have you tried to make this work? Is that a JS problem, or a PHP problem? Hint: check this by inspecting the markup to see what is put there — Nico Haase
– Nico Haase, Commented Apr 1, 2020 at 16:41

score 1 · Accepted Answer · 2020-04-01 16:27:53Z

1

Variables are not parsed/interpreted when using single quotes.

Replace

$formattedFileName= '<button 
  class="box button is-large is-fullwidth is-primary is-light" 
  onclick="loadScriptFileData($filename)">$filename</button>';

with

$formattedFileName= "<button 
  class=\"box button is-large is-fullwidth is-primary is-light\" 
  onclick=\"loadScriptFileData('$filename')\">$filename</button>";

and everything should be working as expected.

edited Apr 1, 2020 at 16:27

answered Apr 1, 2020 at 15:57

user8034901

Sign up to request clarification or add additional context in comments.

6 Comments

M. Eriksson Over a year ago

You can also use ' for the html attributes instead of escaping the double quotes. Or even better, close the PHP block ?> <button...></button> <?php. Then they can remove the print-line after as well.

user8034901 Over a year ago

Right, personally I like to have double quotes for html attributes

ansh sachdeva Over a year ago

Both of you guys are awesome! thanks, this worked. i actually figured out about the double quotes and was able to make the ui work, but the js call was still not getting executed. why does it needed those extra ' $filename '?

ansh sachdeva Over a year ago

@MagnusEriksson can you add your alternate approach as an answer as well? I want to learn more about it

M. Eriksson Over a year ago

@anshsachdeva - It's JS 101. When passing a string as an argument, it needs to be quoted: foo('bar'). Your code would produce: foo(bar) which JS would interpret as you trying to pass the value of a JS variable called bar (but in your case, it would be the filename)

|

Peter Mortensen · Accepted Answer · 2020-08-26 15:28:02Z

1

Another option (which is my personal preference) is to end the PHP block when outputting HTML and just echo the PHP variables where needed:

if ($file->isFile()) {
    $filename = $file->getFilename();
    // Let's end the PHP block
    ?>

        <button class="box button is-large is-fullwidth is-primary is-light"
            onclick="loadScriptFileData('<?= $filename ?>')">
            <?= $filename ?>
        </button>

    <?php // Open the PHP block again
}

The upside with this is that IDE's will syntax highlight the code properly (which most IDE's don't do for HTML inside quotes in PHP).

You also don't need to escape quotes or manually print the content since it gets outputted straight away.

edited Aug 26, 2020 at 15:28

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 1, 2020 at 16:17

M. Eriksson

13.7k4 gold badges31 silver badges42 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2020-08-26 15:26:50Z

0

It's a personal preference, but I recommend either concatenation or curly braces:

Using curly braces (note: must wrap with double quotes):

$formattedFileName =
    "<button
        class="box button is-large is-fullwidth is-primary is-light"
        onclick="loadScriptFileData({$filename})">
        {$filename}
    </button>";

Using concatenation:

$formattedFileName =
    '<button
        class="box button is-large is-fullwidth is-primary is-light"
        onclick="loadScriptFileData(' . $filename . ')">
        ' . $filename . '
    </button>';

Yes, you can use variables in a string in PHP if you use double quotes, and there are certainly many people that like doing that. To me, it seems cleaner and less error-prone to use one of these two methods.

Using double quotes causes you to either use single quotes for HTML attributes or forces you to escape them.

Not using concatenation or curly braces can cause issues if you don't want a space after the variable:

$var = 'Pizza';
echo "$vars are awesome!" // Not the best example, but you get the idea

Bottom line, it's a personal preference. But as stated in the other answer, you can't use variables in a string if enclosed by single quotes.

edited Aug 26, 2020 at 15:26

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 1, 2020 at 16:07

Dave

29.2k26 gold badges117 silver badges184 bronze badges

3 Comments

M. Eriksson Over a year ago

I actually think your last example is a pretty spot on example of a real world case where it would fail.

ansh sachdeva Over a year ago

@kerbholz is right .The curly brace example is not working for me and is directly printing {$filename}

Dave Over a year ago

Ah, duh. Yes, I've updated my answer. I'm a concat guy myself, since I like single quotes - forgot braces required double quotes too.

Collectives™ on Stack Overflow

Add PHP code to dynamically generated HTML data

3 Answers 3

6 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related