从 php 呼叫 javascript function 无效

Question

My research into this was rather frustrating, though I don't see why this doesn't work.

When my index page loads its supposed to load data from a database via php and then echo the data to javascript where javascript formats and works with that data, this works fine if I place an onload event on the body of the html body tag which will then utilize the data loaded into the js variable data. This works but I don't like using the onload event every time the page loads.

Here is the php code which is at the top of the index.php file:

if ($confirmation){

    $data = $membership->get_data("assump");

    echo '<script type="text/javascript">var data = '. json_encode($data) .';
        var dataLoaded = ' . json_encode(false) . '; loadData();</script>';

}

The loadData() function:

<script type="text/javascript">

    function loadData(){

        // Do stuff with the data

    }
</script>

The js function loadData() is written further down in the same php file before the closing tag body. Should I have php build the script instead? or place the script somewhere else? Or is it possible to call this js function?

Answer 1

Seems like you're having two pieces of code in two separate script blocks. That won't work.

In order for function hoisting to work, they need to be in the same tag (the hoisted function needs to be defined there).

Here is a similar question with a more detailed answer: Why is my javascript function not being called in my div?

---

UPDATE (per request)

The browser reads one block of JS at a time, so hoisting works only within the same block (or if the function is defined before, of course). In your case, probably the easiest solution would be to assign the code to a PHP variable, and then just echo it in the same script block:

PHP

$js = '';

if ($confirmation){

    $data = $membership->get_data("assump");

    $js .= 'var data = '. json_encode($data) .';
        var dataLoaded = ' . json_encode(false) . '; loadData();';

}

HTML

<script type="text/javascript">

    <?= $js ?> // or <?php echo $js; ?>

    function loadData(){

        // Do stuff with the data

    }
</script>

Note that this allows you to inject several lines/parts of JS via PHP, that's why I used $js .= ... instead of just $js = ... .

Note that this won't work with external .js files unless you make PHP parse them as well first (nothing to worry about in your code since your JS is in the HTML file which is parsed normally).

Answer 2

echo "<script>function fBefore(x) { console.log('before'); }</script>\n";
echo "<script>fBefore(); fAfter(); </script>\n";
echo "<script>function fAfter(x)  { console.log('after');  }</script>\n";

console log: (Chrome)

before
Uncaught ReferenceError: fAfter is not defined

I conclude that the function definition must be before the use, and may be in a separate script block.

That was from PHP creating blocks of text. I did not test onLoad , or <script src=...> , or other ways to shuffle things around. I worry that "must be declared before calling" may refer to the physical placement of code, or dynamic loading, or something else.