CODEWITHSUNDEEP
javascriptphphtml
dynamphorous
dynamphorous

Reputation: 769

javascript executes before browser has finished rendering the page

This question is not a duplicate of some of the other PHP & Javascript questions that have been asked here before, at least not one I have been able to find.

I have a .php file that contains some HTML elements that get rendered by the PHP for the sake of argument here we will say the file is located at http://url.php. It is looking for certain GET tags, and including a div if those get tags exist. 

<?php if(isset($_GET['VAR']))
{
   echo '<div id="VARDIV"></div>';
}?>

Of course I realize that this all happens on the server, and gets sent back to the clients web browser where the javascript takes over.

But in the javascript (on the same PHP page) I have the following code that executes on page load looking for that div tag and doing something with it:

if(document.getElementById("VARDIV")!==null)
{
     alert('div exists!');
}

While the page loads this should logically pop up the div if the URL is http://url.php?VAR correct?

However it does not. If I run the javascript code a second time in the console it works fine, so its not a misspelling (such as getElementsById or something silly like that).

How can this possibly render out of order like this? Should the PHP engine not render the HTML then pass it back to the browser before one line of JS is executed?

EDITED FOR CLARITY BASED ON COMMENTS BELOW:

<script type="text/javascript">
    function doDIVStuff()
    {
       if(document.getElementById("VARDIV")!==null)
       {
        alert('div exists!');
       }
    }
doDIVStuff();
</script>

<html>
   <body>
      <?php if(isset($_GET['VAR']))
      {
      echo '<div id="VARDIV"></div>';
      }?>
   </body>
</html>

Upvotes: 0

Views: 1059

Answers (6)

megaKertz
megaKertz

Reputation: 484

I'd say you should create a javascript file and put your code there so you can debug it.

Upvotes: 0

Paul Zepernick
Paul Zepernick

Reputation: 1462

Any JavaScript that is not inside a function is executed sequentially as the page is interpreted. Your doDIVStuff(); call is executing before any HTML is interpreted on the page, therefore your "VARDIV" is not yet available in the DOM for the JS to read.

As others have suggested, the best approach is to listen for when the page is done loading and then trigger the call to your function.

Upvotes: 1

g-newa
g-newa

Reputation: 469

Actually if you place the javascript code at the end of file after all php and html code it must work.I have tested it.

<?php if(isset($_GET['VAR']))
{
   echo '<div id="VARDIV">Dilip</div>';
}?>

<script type="text/javascript">
    if(document.getElementById("VARDIV")!==null)
{
     alert('div exists!');
}
</script>

but i think it is better to use onload event 

window.onload=function(){if(document.getElementById("VARDIV")!==null)
    {
         alert('div exists!');
    }};

Or if you are ok to use jquery then its awesome..

$(document).ready(function(){
     if(document.getElementById("VARDIV")!==null)
     {
        alert('div exists!');
     }
})

Upvotes: 2

Jack
Jack

Reputation: 172

use either window.onload() or document.onload(), see differences here

you could also place your script just before the end of your tag in the html although there could be unintended consequences in certain things in IE, seen here

Upvotes: 2

lrossy
lrossy

Reputation: 533

Wrap in doc rdy() or just do something like this:

<html>
<head>

</head>
<body>
<?php if(isset($_GET['VAR']))
{
  echo '<div id="VARDIV"></div>';
}?>
<script type="text/javascript">
  function doDIVStuff()
  {
    if(document.getElementById("VARDIV")!==null)
    {
      console.log('div exists!');
    }
  }
  doDIVStuff();
</script>
</body>

</html>

Upvotes: 0

Georgi Bilyukov
Georgi Bilyukov

Reputation: 627

Try to use jquery and document ready event:

$(document).ready(function(){
     if(document.getElementById("VARDIV")!==null)
     {
        alert('div exists!');
     }
})

If you do not want to include jquery js lib, you can use the solution here:

pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

Upvotes: 1

Related Questions