CODEWITHSUNDEEP
javascripthtml
Pak Ho Cheung
Pak Ho Cheung

Reputation: 1426

Load external html (separate header and footer) before executing js file

I stuck into this problem. My separate header and footer only show after the data in js file is completely fetched. When the data is loading, I can see the input (search image) and another text input but I can't see the header and footer. Any suggestion for getting the header and footer first before executing js file?

Thanks.

<!DOCTYPE html>
<html>
    <head>
        ...
        <link rel="stylesheet" href="./style.css">
        <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
        <script src="../node_modules/jquery/dist/jquery.js"></script> 
        <script> 
            $(function(){
              $("#header").load("../header/index.html"); 
              $("#footer").load("../footer/index.html"); 
            });
        </script>
        <link rel="stylesheet" href="../header/style.css">
        <link rel="stylesheet" href="../footer/style.css">
    </head>
    <body>
        <div id="header"></div>
        <section>
            <div>
                <input type="image" src="search.png" id="submitKeywordButton" onclick="submitKeyword();" />
                <div style="overflow: hidden;">
                   <input type="text" name="subscribe" placeholder="keyword" id="keyword"/>
                </div>
            </div>
        </section>
        <div id="footer"></div>
        <script src="./main.js"></script>
    </body>
</html>

Header file

<link rel="stylesheet" href="./style.css">
<header>
    <div class="container">
        <div id="branding">
            <a href="../index.html"><img src="../img/icon.png" height="40" width="160"/></a>
        </div>
        <nav>
            <img src="../img/firstFlag.png" height="20" width="30"/>
            <a href="./en.html"><img src="../img/secondFlag.png" height="20" width="30"/></a>
        </nav>
    </div>
</header>

Upvotes: 1

Views: 3095

Answers (2)

aaron.xiao
aaron.xiao

Reputation: 198

if load method is sync, then try change your html structure like this :

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">        
    <link rel="stylesheet" href="../header/style.css">
    <link rel="stylesheet" href="../footer/style.css">
    <script src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<body style="display: none">
    <div id="header"></div>
    <div id="footer"></div>
    <script> 
       $("#header").load("../header/index.html"); 
       $("#footer").load("../footer/index.html"); 
    </script>
    <section>
        <div>
            <input type="image" src="search.png" id="submitKeywordButton" onclick="submitKeyword();" />
            <div style="overflow: hidden;">
               <input type="text" name="subscribe" placeholder="keyword" id="keyword"/>
            </div>
        </div>
    </section>        
    <script src="./main.js"></script>
</body>

Upvotes: 0

Sean Thorburn
Sean Thorburn

Reputation: 1788

Give this a try:

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">        
    <link rel="stylesheet" href="../header/style.css">
    <link rel="stylesheet" href="../footer/style.css">
</head>
<body style="display: none">
    <div id="header"></div>
    <section>
        <div>
            <input type="image" src="search.png" id="submitKeywordButton" onclick="submitKeyword();" />
            <div style="overflow: hidden;">
               <input type="text" name="subscribe" placeholder="keyword" id="keyword"/>
            </div>
        </div>
    </section>
    <div id="footer"></div>
    <script src="../node_modules/jquery/dist/jquery.js"></script>         
    <script src="./main.js"></script>
    <script> 
        $(function(){
            $("#header").load("../header/index.html", function (){
                $("#footer").load("../footer/index.html", function() {
                    $("body").fadeIn(1000);
                }); 
            });                             
        });
    </script>
</body>

Upvotes: 1

Related Questions