直到刷新后变量才加载到javascript中

Question

I've a strange situation in which I echo php variables into javascript to use it with jquery. However, the variables are not defined when I open the page for the first time, and when I refresh the page or just go to the same link again, the variables are loaded.

Echoed in the javascript it looks like

   <script type="text/javascript">
            $( document ).ready(function() {
                console.log('test');
                window.GlobalVar = {show_table : "<tr><td>%.0f</td><td>%s</td><td>&#8364; %0.02f</td><td>&#8364; %0.02f</td><td><a href=''><img class='delete_task' src='/brugginkadmin/public_html/images//icons/delete.png' data-id='%s'></a></td><td><input type='checkbox' name='delete_query' value='%s'></td></tr>"};
            });
   </script>

And in later jquery functions they are not reconized, until refresh.

I've included jquery before these scripts.

In conclusion: The problem is that this variable window.GlobalVar.show_table is not defined later on in the javascript, however after hitting refresh, it is.

Answer 1

Echoing PHP inside script tags causes odd and inconsistent behaviour. Build the entire script, tags and all, in php then echo to the page and see if that works better.

var script = <<<SCR
    <script type="text/javascript">
            $( document ).ready(function() {
                console.log('test');
                window.GlobalVar = {show_table : "<tr><td>%.0f</td><td>%s</td><td>&#8364; %0.02f</td><td>&#8364; %0.02f</td><td><a href=''><img class='delete_task' src='/brugginkadmin/public_html/images//icons/delete.png' data-id='%s'></a></td><td><input type='checkbox' name='delete_query' value='%s'></td></tr>"};
            });
   </script>
SCR;
echo script;