Html include another Html with onclick javascript is not working after page load

Question

For example, Having 1st Page HTML Include header Page HTML

Page 1 javascript

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script> 
   $(function(){
     $("#header").load("Header.html");
   });
</script>
<div id="header"></div>

Header page

<a href="#" data-toggle="dropdown" class="dropdown-toggle">Booking
<span class="caret"></span></a>
<ul class="dropdown-menu">
    <li><a id="booking" href="#">New Booking</a></li>
    <li id="cancel"><a href="url">Cancellation</a></li>
    <li id="my_booking"><a href="url">My Booking</a></li>
</ul>
</li>

So my problem is, in my header page HTML I having a menu drop-down-list. During the page is loading, I am able to click the menu to drop down the list. Once the page is complete loaded to the page 1, the menu is malfunctioned and not response after I click.

Does the dropdown menu work before trying to include it? Btw, we need the JS/jQ for the menu. Your loading function looks fine...I suspect that your menu just doesn't work in the first place. — zer00ne, Jul 28 '16 at 09:13
@zer00ne it works if i put header code to the page 1. Once i separate html and include it. it will work for the first few second then not responding. — hiboss, Jul 28 '16 at 09:15
Maybe you don't attach the event handler to the menu correctly (as it doesn't exist on DOM ready yet, because it is still being loaded asynchronously). see http://stackoverflow.com/a/10920450/2897426 => use `.on()` instead of `.click()`. — Simon Hänisch, Jul 28 '16 at 09:28
btw I wouldn't recommend using javascript for templating... there are CMS's for that (I like https://getgrav.org). — Simon Hänisch, Jul 28 '16 at 09:31
@SimonHänisch , as you can see that i use bootstrap css with
@hiboss I haven't used bootstrap in a while, is the dropdown menu implemented in pure CSS or do you also include the bootstrap javascript? — Simon Hänisch, Jul 28 '16 at 12:59
@hiboss well pure CSS means that it doesn't need javascript to work... I just checked and that is not the case (you need javascript). So I assume you include `jquery.min.js` and `bootstrap.min.js` (in that order) before your own script (the one that loads the header)? I created a fiddle and use jquery's `.html('string')` to dynamically add a menu (which is basically the same as ajax loading regarding event handlers) and it works: https://jsfiddle.net/0d033by6/1/ I can't see where your difference is without seeing more of your code — Simon Hänisch, Jul 28 '16 at 13:32
also your `Header.html` markup is wrong: there is a closing `` at the end that doesn't belong anywhere, and more importantly it needs to be wrapped in a `
` (see http://getbootstrap.com/javascript/#dropdowns) — Simon Hänisch, Jul 28 '16 at 13:37

score 0 · Answer 1 · edited Jul 28 '16 at 09:48

0

You can include it by w3 simple code:

<!-- mport the libraries: -->
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<!-- include the page: -->
<div w3-include-html="Header.html"></div>

<script>
w3IncludeHTML();
</script>

More

edited Jul 28 '16 at 09:48

Black

18,150
39
158
271

answered Jul 28 '16 at 09:25

Samir Junaid

113
1
3
17

Or he can use the jQuery.ajax() method. But i think that there is another problem with his script that we are not seeing. – MrManafon Jul 28 '16 at 09:28
The comments are the problem, you cant comment like this in html – Black Jul 28 '16 at 09:31

score 0 · Answer 2 · answered Jul 28 '16 at 09:38

0

You can use w3-include-html instead to include your header.html.

 <!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="header.html"></div>

<script>
    w3IncludeHTML();
</script>

</body>
</html>

answered Jul 28 '16 at 09:38

Black

18,150
39
158
271

Can you post the output of the console? Any errors? – Black Jul 28 '16 at 15:33

score -2 · Answer 3 · answered Jul 28 '16 at 09:22

-2

You probably have to wait till the document is ready.

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script> 
   $(document).ready
   (
       function ()
       {
           $(function(){
               $("#header").load("Header.html");
           });
       }
   )
</script>
<div id="header"></div>

answered Jul 28 '16 at 09:22

Black

18,150
39
158
271

1

`$(function(){})` does that – Simon Hänisch Jul 28 '16 at 09:22

Html include another Html with onclick javascript is not working after page load

3 Answers3