0

I have tried to get some jQuery code to execute when a page has been fully loaded and rendered. I have read that I should use the .on("pageshow") event to trigger the code to be executed.

The code below is a test that I can't get to work properly. It loads a "box" that is colored cyan from the beginning. I want the color to be changed to yellow via jQuery after the page has been loaded. I also added a click-trigger to make sure that the color can be changed if I manually click on the text in the box. But the auto execution won't work... I have also tried to define an event for .on("load").

So... I simply want to find a way to execute jQuery code after the page has been loaded (in my real code I will use it to scroll down to a specific element and highlight it) 

    <!DOCTYPE html>
    <html lang="sv">
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    
      <script>
        $(document).ready(function(){
            $(window).on('pageshow', function() {
                $("#box").css("background-color", "yellow"); // This never happens...
            });
    
            $("#titletext").click(function(){
                $("#box").css("background-color", "green"); 
            });
        });
      </script> 
      
    </head>
    <body>
            <div id="box" class="d-flex p-2" style="background-color: cyan">
                <div id="titletext" class="p-2 w-100">
                    My header!
                </div>
            </div>
    </body>
    </html>
Barmar
  • 741,623
  • 53
  • 500
  • 612
Gowire
  • 1,046
  • 6
  • 27
  • 2
    Move `.on` out of dom-ready event. It's possible that your `pageshow` happends before dom-ready and that does not need to be in dom-ready event. – Justinas Feb 18 '20 at 14:09
  • 2
    It works in the snippet here. – Barmar Feb 18 '20 at 14:10
  • @Justinas: Perfect! That was easy! :-D – Gowire Feb 18 '20 at 14:11
  • 1
    This is most probably a race issue as pointed by Justinas. Your event is actually binded but the first time it is triggered is probably not on initial page load. Try logging something in the console instead of changing the color then leave the page and look in the console. [This question](https://stackoverflow.com/questions/14468659/jquery-mobile-document-ready-vs-page-events) might help. – Laurent S. Feb 18 '20 at 14:12

1 Answers1

0

As mentioned in some of the comments I have now modified the code to a working solution. I would like to present it if someone needs it in the future:

<!DOCTYPE html>
<html lang="sv">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

  <script>
    // the event is now defined outside the $(document).ready-part
    $(window).on('pageshow', function() {
        $("#box").css("background-color", "yellow"); // This happens after page is loaded
    });

    $(document).ready(function(){
        $("#titletext").click(function(){
            $("#box").css("background-color", "green"); 
        });
    });
  </script> 

</head>
<body>
        <div id="box" class="d-flex p-2" style="background-color: cyan">
            <div id="titletext" class="p-2 w-100">
                My header!
            </div>
        </div>
</body>
</html>
Gowire
  • 1,046
  • 6
  • 27