Javascript isn't executing when including html-template

Question

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.

There are div elements outside/before the body tag, is this intentional? — Sang Suantak
– Sang Suantak, Commented Jan 20, 2015 at 10:14
Yeah, your're right. In this case it isn't the problem (my real files have them in the right order). — ErrantBard
– ErrantBard, Commented Jan 20, 2015 at 10:58

Razvan Dumitru · Accepted Answer · 2015-01-20 10:24:58Z

1

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>

edited Jan 20, 2015 at 10:24

answered Jan 20, 2015 at 10:19

Razvan Dumitru

12.5k5 gold badges38 silver badges55 bronze badges

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

1 Comment

ErrantBard Over a year ago

Thanks for the answer, I have had the dom-elements inside the body tag before but when I have been experimenting I seem to have messed up the file. That said, that still won't do, it still don't execute the js (or, it might, but I don't get any results). If I call the script from the console, the chart and other things show up as the should. No error's either (other than a glyphicon error but that's unrelated)

Rajdeep Dosanjh · Accepted Answer · 2015-01-20 11:09:51Z

1

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"); 
            });

edited Jan 20, 2015 at 11:09

answered Jan 20, 2015 at 10:18

Rajdeep Dosanjh

1,1971 gold badge9 silver badges20 bronze badges

2 Comments

ErrantBard Over a year ago

Yeah they should :) I seem to have messed up the structure during my experimantation. That said, it isn't the problem here atleast. I still don't get any result from the js without calling it from the console.

ErrantBard Over a year ago

Thx, I hoped that would help but alas it didn't. It still won't load. Added a function call I tried using to the original post, if it might highlight the problem.

Dhaval · Accepted Answer · 2015-01-20 10:19:06Z

0

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>

answered Jan 20, 2015 at 10:19

Dhaval

2,3791 gold badge15 silver badges16 bronze badges

1 Comment

ErrantBard Over a year ago

Yeah they should :) I seem to have messed up the structure during my experimantation. That said, it isn't the problem here atleast. I still don't get any result from the js without calling it from the console.

ErrantBard · Accepted Answer · 2015-01-23 11:49:46Z

0

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.

answered Jan 23, 2015 at 11:49

ErrantBard

1,5011 gold badge21 silver badges42 bronze badges

Collectives™ on Stack Overflow

Javascript isn't executing when including html-template

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related