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 minimal reproducible example. Warm welcome to Stack Overflow. — Roko C. Buljan
– Roko C. Buljan, Commented Jun 6, 2020 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
– Roko C. Buljan, Commented Jun 6, 2020 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
– Prowler1000, Commented Jun 6, 2020 at 20:38
exactly as I supposed, you're disseminating <script> tags in the document. try not to do that. Keep all your scripts right before the closing </body> tag. Not an issue, but a good start. Also learn about templating. It's usually done on server-side. Also, take a google about progressive enhancement and SPA (Single Page Application) - in the means that your website should work perfectly with JS disabled and request a desired page (not a must) - and than incrementally you enhance it to become a "SPA". — Roko C. Buljan
– Roko C. Buljan, Commented Jun 6, 2020 at 20:38

charlietfl · Accepted Answer · 2020-06-06 20:24:54Z

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 6, 2020 at 20:24

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Editing HTML loaded with JQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related