How to make page load javascript first, then only load php?

Question

<script type="text/javascript">
function run()
{
  var paper = Raphael( $('.wrapper')[0], 600, 600 ),

       path = paper.path( Raphael.transformPath(pdefs[useDef].path, pdefs[useDef].transform) )
                   .attr( 'stroke-width', 10 )
                   .attr( 'stroke', 'rgb(80,80,80)' ),

    $shim = $('<div id=\'shim-1\'><img src=images/buttons/photo.png></div>') //How to use php assign this line?
}

$(function() {
    run();
});
</script>

I want to use php to write a line of code above : $shim = $('<div id=\\'shim-1\\'><img src=images/buttons/photo.png width=75px height=75px></div>') . Can I write code like below ? :

    <script type="text/javascript">
    function run()
    {
      var paper = Raphael( $('.wrapper')[0], 600, 600 ),

           path = paper.path( Raphael.transformPath(pdefs[useDef].path, pdefs[useDef].transform) )
                       .attr( 'stroke-width', 10 )
                       .attr( 'stroke', 'rgb(80,80,80)' ),
    </script>

    <?php
     Use mysql get data from database...
     if (condition) {
    ?>
     <script type="text/javascript"> $shim = $('<div id=\'shim-1\'><img src=images/buttons/photo.png width=75px height=75px></div>') </script>
    <?php
     }
    ?>
    <script type="text/javascript">
    }

    $(function() {
        run();
    });

    </script>

But I think the page will load the php first, it mean $shim will be assigned first, then only start executing javascript function run() . Thus, $shim will be outside the javascript function run() , how to use php assign $shim into the javascript function run() ?

I found out what is the actually. The problem is actually I close javascript tag </script> before I start php tag <?php . Actually I can start php tag directly without closing javascript tag. For example, <script type="text/javascript"> Java codes here... <?php php codes here.... ?>

<script type="text/javascript">
function run()
    {
       var paper = Raphael( $('.wrapper')[0], 600, 600 ),

               path = paper.path( Raphael.transformPath(pdefs[useDef].path, pdefs[useDef].transform) )
                           .attr( 'stroke-width', 10 )
                           .attr( 'stroke', 'rgb(80,80,80)' ),

        <?php
         Use mysql get data from database...
         if (condition) {

     $shim = $('<div id=\'shim-1\'><img src=images/buttons/photo.png width=75px height=75px></div>') 
        <?php
         }
        ?>

        }

        $(function() {
            run();
        });
</script>

How to call this problem actually? I think this problem is not about php load before javascript...

Answer 1

Please consider what roughly happens:

• The browser (client) sends a request for some URL to the web server over the network.
• The web server runs the PHP script assigned with the URL and generates the HTML page (including JavaScript source, CSS, etc).
• This pages goes over the network into the client.
• The client parses the HTML, CSS and JavaScript.

So JavaScript is executed on the client after PHP has been executed on the server.

Now to your detailed problem, to me it seems you simply want

function run() {

  var paper = Raphael( $('.wrapper')[0], 600, 600 ),
      path = paper.path(
             Raphael.transformPath(pdefs[useDef].path,
                                   pdefs[useDef].transform))
             .attr( 'stroke-width', 10 )
             .attr( 'stroke', 'rgb(80,80,80)' );

  // string broken into three strings to avoid scrolling 
  $shim = $('<div id=\'shim-1\'>' +
          '<img src=images/buttons/photo.png ' + 
          'width=75px height=75px></div>'); 
}