CODEWITHSUNDEEP
javascriptjqueryhtml
ErrantBard
ErrantBard

Reputation: 1471

Javascript isn't executing when including html-template

Since I started using a html-templatefile for my navbar elements I haven't got one of my scripts to execute(I can execute it via the console). I have experimented with on-load-functions but even that didn't seem to work. My problem is that I understand to little of the execution order and if I'm somehow blocking my script. I don't get any error messages either and when the html-template isn't used (ie - the navbar structure is included with everything else in the same html-file) the page loads as it should. So something there is messing it up. And I can call it from the console as well.

(I have tried a variety of ways but nothing have really worked, other than including the template in the document and that I would like to avoid. This setup is one of many). I hope someone can see the errors I do on the spot. I have cut out som css aswell, for readability.

Edit: Threw js out the window, since ASP was found available. Solved it in about half an hour using asp.

Upvotes: 0

Views: 552

Answers (4)

ErrantBard
ErrantBard

Reputation: 1471

Ok, I couldn't get it to work the way I wanted but it turned out we had asp enabled on our server so when I switched to that I got it to work beautiful in about half an hour.

And it's a better way I suspect, in terms of best practice.

Thanks for the responses.

Upvotes: 0

Rajdeep Dosanjh
Rajdeep Dosanjh

Reputation: 1187

The code you are trying to reference in the $("#pageContainerId").load("navbarTemplate.html"); is outside the body tag and most browsers will cut this out.
Try the following: 

        <script src="http://code.jquery.com/jquery.js"></script>
        <script type="text/javascript" src="d3.min.js"></script>
        <script src="Bootstrap/js/bootstrap.min.js"></script>

        <script type='text/javascript'> 
            $(function(){
                $("#pageContainerId").load("navbarTemplate.html"); 
            });
        </script>
    </head>




<body id="bodyCanvas">
<div class="masthead">
    <div class="container">        

    </div>
</div>
<div class="container Override" id ="pageContainerId" >



</div>
    <script>
        Here goes code....
    </script>
</body>

</html>

Also as the script is at the top the DOM may not be loaded at the time try the following:

 $(document).ready(function(){
                $("#pageContainerId").load("navbarTemplate.html"); 
            });

Upvotes: 1

Razvan Dumitru
Razvan Dumitru

Reputation: 12452

Just place your DOM elements inside body tag. Always render script at the end of the body, and append async javascript files at document ready (or at least this is my view of things).

 <html>
    <head>
        <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
    </head>


    <body id="bodyCanvas">


    <div class="masthead">
        <div class="container">        

        </div>
    </div>
    <div class="container Override" id ="pageContainerId" >



    </div>
        <script>

 <script src="http://code.jquery.com/jquery.js"></script> // create a local copy of jquery and other async javascript files you can load at $(document).ready(function(){ //here append async scripts like google maps });

        <script type="text/javascript" src="d3.min.js"></script>
        <script src="Bootstrap/js/bootstrap.min.js"></script>

        <script type='text/javascript'> 
            $(function(){
                $("#pageContainerId").load("navbarTemplate.html"); 
            });
        </script>
            Here goes code....
        </script>
    </body>
</html>

Upvotes: 1

Dhaval
Dhaval

Reputation: 2379

DOM ELEMENT SHOULD INSIDE BODY TAG

<body id="bodyCanvas">
        <div class="masthead">
    <div class="container">        

    </div>
</div>
<div class="container Override" id ="pageContainerId" >



</div>

</body>

Upvotes: 0

Related Questions