Using include html from w3data , JavaScript ( jquery ) not working

Question

So I recently needed to import html to another html , and I'm also using Semantic UI for css.
(I wanted to make a menu with semantic ui and to activate the buttons so when I click them, they work)
So here is my code for header.html:-

<html>
<head> 
      <link rel="stylesheet" href="css/semantic/semantic.css"/>
      <link rel="stylesheet" href="css/generic-style.css"/>
      <link rel="stylesheet" href="css/style-profile.css"/>

      <script src="js/jquery-3.1.0.min.js"></script>
      <script src="js/semantic.min.js"></script>
</head>
<body>
<div class="ui menu  no-borders menu2-padding" id="menu2">

    <a class="green header link item">
        <i class="shop icon"></i>
    blah blah
    </a>
    <a class="green header link item">
        <i class="shop icon"></i>
    blah blah
    </a>
    <a class="green header link item">
        <i class="shop icon"></i>
    blah blah
    </a>
</div> 

<script>
    $('.ui.menu a.item').on('click', function() {
        $(this)
            .addClass('active')
            .siblings()
            .removeClass('active');
     })

</script>
</body>
</html>

And I used w3data.js to include this into another html file (profile.html) which its like this :-

<head>
    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="http://www.w3schools.com/lib/w3data.js"></script>
</head> 

<body>
    <div w3-include-html="header.html"></div>
    <script>
        w3IncludeHTML();
    </script>
</body>

And yet the styles are working fine but when I run the profile.html, the jquery inside the header file wont even work ( it just workes in the header.js itself not on the profile.html).

So any idea what should I do so the main html reads the script I have written ?

In header.html, jQuery is already loaded. When you invoke `w3IncludeHTML()` it's only when profile.html is loaded, so your best bet (besides just loading normally) is to inject anything that's going into the `` separate from the HTML that's going to the `` — zer00ne, Jan 02 '17 at 14:06
Either re-architect so you're not "including" more scripts (that won't work as you expect when you bring more js in via AJAX), OR include files such as header.html server-side (via PHP `include` or similar). — random_user_name, Jan 02 '17 at 14:09

score 1 · Answer 1 · answered Feb 03 '17 at 07:30

this helped me instead of that way :

    <script>
    $(document).ready(function(){
        $.get( "header.html", function( data ) {
            $( ".header-html" ).append(data);
        });
        $.get( "footer.html", function( data ) {
            $( ".footer-html" ).append(data);
        });
    });
    </script>

and in html file :

    <div class="header-html"></div>
    <div class="footer-html"></div>

score 0 · Answer 2 · answered Jan 02 '17 at 14:27

0

you should check the folder structure and path which you have given to the JavaScript file

answered Jan 02 '17 at 14:27

akshay shetty

194
3
10

Using include html from w3data , JavaScript ( jquery ) not working

2 Answers2