Call Javascript Function from PHP in a loop

Question

I have been looking at answers to this across the web for about an hour now, and trying things based on those answers (I know this kind of issue comes up often). However, nothing I am trying is working. So an explanation first:

I am looping through a table in PHP (in a while loop), and need to call a JavaScript function for each record in the row set returned for my table. To try to get started, I have a super basic function that just lets me know I called it ... it's not working. Here's the PHP code (the reason for the DIV tag is that I eventually want to replace the innerHTML of the DIV from the JS code I know how to do that and have done so elsewhere ...):

// the loop:
while( $row = mysqli_fetch_array( $heralds_result ) )
{
   $herald_id = $row["roster_id"];
   $sca_name = $row["sca_name"];

   // create a div for each herald as we go with its' own name (using id ...)
   echo "      <div id='" . $herald_id . "'>\n";
   echo "         " . $sca_name . "\n";
   echo "         <script type='text/javascript'>test();</script>\n";
   echo "      </div>\n";

}

This is the JavaScript code (at the bottom of the file):

<script type="text/javascript">
    function test()
    {
       alert( "Test function" );
    }
</script>

However, I get no "alert" dialog, just the text streamed out. So for the first row I get:

  <div id='1'>
     Aasa Thorvaldsdoittr
     <script type='text/javascript'>test();</script>
  </div>

As the alert dialog is not displayed, it tells me the Javascript function is not being called, or there is some error that is truly not obvious to me after staring at it for a long time. This is something that shouldn't be this difficult, I am sure I have some really obvious error that someone will see as soon as they look at the code, but it's evading me completely.

Answer 1

"JavaScript code at the bottom of the file"

is the problem. Scripts are run as soon as they are added to the DOM. Things are added to the DOM in the order they are given in the HTML.

Therefore the script tags which try to call your function are added - and executed - before the script tag which actually contains the function gets added. So they try to execute a function which doesn't yet exist. If you look in your browser's Console (in the Developer Tools) you probably have some errors complaining about this.

The simple solution is to declare the script tag containing the function somewhere in your HTML before the code which tries to use it.

---

As an aside, it would be interesting to know what you plan to do with this function in reality - consider whether you could achieve the same effect directly by creating some markup using PHP, rather than firing off lots of JS while the page is loading.

Answer 2

You should move the function declaration upper than it used. For example:

<script type="text/javascript">
function test()
{
   alert( "Test function" );
}
</script>
..
<?php
..
// your loop
..
?>

or

<?php
..
echo '<script type="text/javascript">
function test()
{
   alert( "Test function" );
}
</script>';
..
// your loop
..
?>