Editing HTML loaded with JQuery

Question

I'm trying to make a navigation bar for my website that is loaded with JQuery so I don't have to edit it in every webpage but some pages need the buttons to be a different colour.

I used the answer I found here to load my nav bar. I tried doing things like $(document).ready() but found that it runs before the nav bar is actually loaded. It does work if I add a timed delay but I feel that not very good practice because every connection is different.

Is there any way that I can maybe set up something in the nav bar's html to call something when it's loaded or maybe some watcher in each page I can add for when the bar gets fully loaded?

Apologies for not adding and code, I suppose that would help, just kind of embarrassed of it

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Placeholder</title>
        <link rel="stylesheet" href="index.css">
        <script src="jquery-1.10.2.js"></script>
    </head>
    <body>
        <div id="nav">

        </div>
        <script>
            $(function(){
              $("#nav").load("navbar.html");
            });
        </script>

        <div class="index-header">
            <h1>Welcome to PLACEHOLDER</h1>
            <p class="desc">A personal portfolio</p>
        </div>
        <script>
            $(document).ready(function(){
                window.setTimeout(function(){
                    bar = document.getElementsByClassName("bar").item(0);
                    buttons = bar.children[0];
                    var buttonArray = Array.from(buttons.children);
                    buttonArray.forEach(function(item){
                        item.style.color="blue";
                    })
                }, 50);
            });
        </script>
    </body>
</html>

Right now, I have it load the bar then later in the document I have it do something when the document loads and wait 50ms. Please excuse any poor practices with JS as I'm fairly new at this.

You totally forgot to post your code :) Please [edit] to create a [mcve]. Warm welcome to Stack Overflow. — Roko C. Buljan, Jun 06 '20 at 20:22
To comment-as-answer, JS is always late. First the browser needs to make sense of your HTML markup (by creating a DOM tree) than it (hopefully not) pauses for the JS interpreter to kick in... than finally reaches the end of document where JS is supposed to live... and, Wait, what you mean by *"because every connection is different"* - you mean speed? — Roko C. Buljan, Jun 06 '20 at 20:33
Yes, I do mean speed. The delay works fine in testing but not in production. It is either too fast for my (slow) connection or too slow for another (fast) connection. Also, is JS supposed to be at the absolute bottom of a document? There was a reason why, during testing, I had it where I do but now I can't remember. Perhaps I need to re-learn it from the beginning again... — Prowler1000, Jun 06 '20 at 20:38

score 1 · Accepted Answer · answered Jun 06 '20 at 20:24

1

Use the jQuery load() method complete callback:

$("#navigation").load("navigation.html", function(){
    // the new html now exists, do what you want to it here

});

answered Jun 06 '20 at 20:24

charlietfl

170,828
13
121
150

Editing HTML loaded with JQuery

1 Answers1