jQuery HTML include stopping JQuery working

Question

Sorry if this is a duplicate question but I couldn't find anything relating to this specific issue I am having.

--

So what I am trying to do is include HTML files into another HTML file. I'm looking to call in header.html and footer.html to make things more efficient.

I'd normally do this using PHP but I'm looking to keep everything client side as the plan is to use the HTML in hybrid apps for the purpose of testing prototypes in user testing, so I want it all self contained.

I found the below jQuery code that pulls in the header and footer which works great in terms of the HTML and CSS but my issue is that the actions to manage the menu that use jQuery no longer work. They work fine when the all code is on the same page.

    <!DOCTYPE html>
    <html>
        <head>
            <script src="jquery.min.js"></script>
            <script>
                $(document).ready(function(){   
                    $('#content').load("new.html");
                });
            </script>
        </head>
        <body>
            <div id="content"></div>
        </body>
    </html>

I am working on my localhost at the moment on Mac but I've also tried this on my server.

I found these links as well but no luck

How to include an HTML file with jQuery?

jQuery .load() call doesn't execute JavaScript in loaded HTML file

https://github.com/LexmarkWeb/csi.js

The all have the same result, content is loaded in no problem but the actions don't work. No error is displayed.

There are additional JS files called locally as well, I am using the Materialize framework.

  <!--  Scripts-->
  <script src="js/jquery-2.1.1.min.js"></script>
  <script src="js/materialize.js"></script>
  <script src="js/init.js"></script>    
  <script type="application/javascript">   
        $(".dropdown-trigger").dropdown();
  </script>

Materialize https://materializecss.com/bin/materialize.js

This is the file in the init.js

(function($){
  $(function(){
    $('.sidenav').sidenav();
  }); // end of document ready
})(jQuery); // end of jQuery name space

I am at a loss cause I can see anything in the developer console, I've uploaded a sample of the code here http://spudatron.net/test/html-include/ to help understand my setup.

If anyone can help I would be very grateful.

You would most likely have to re-initialise the js in the load callback (ie when the load has completed) — Pete
– Pete, Commented Sep 27, 2018 at 11:34
Thanks for the response Pete, do you have an example of how I would do this? — Paul Flood
– Paul Flood, Commented Sep 27, 2018 at 11:36
api.jquery.com/load/#load-url-data-complete or on SO: stackoverflow.com/questions/9899066/… and stackoverflow.com/questions/8812970/… — Pete
– Pete, Commented Sep 27, 2018 at 11:37
Hi @irsha____D, I uploaded an example here spudatron.net/test/html-include if that helps. 3 files in the example spudatron.net/test/html-include/index.html, spudatron.net/test/html-include/header.html, spudatron.net/test/html-include/footer.html — Paul Flood
– Paul Flood, Commented Sep 27, 2018 at 11:38

makku · Accepted Answer · 2018-09-27 11:48:32Z

1

If I understood everything correctly, you include the init.js file in the "main" html file (index.html)? In this case, $('.sidenav').sidenav(); is most likely executed before the actual .sidenav elements are present in the DOM (since they are loaded asynchronously).

What I'd suggest is to make use of $.load's onComplete callback handler, e.g.:

$('#content').load("new.html", function () {
    $('.sidenav').sidenav();
});

This will run $('.sidenav').sidenav(); AFTER the contents of new.html have been loaded (you will most likely want to replace new.html with header.html and #content with where ever you want to put the navigation).

answered Sep 27, 2018 at 11:48

makku

964 bronze badges

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

1 Comment

Paul Flood Over a year ago

Thanks @makku, that worked perfectily, much appreciated. Thank Ussaid Iqbal, pete and irsha____D for your input, I was playing around with your suggestions but the above got me sorted.

Ussaid Iqbal · Accepted Answer · 2018-09-27 11:38:51Z

0

Okay why don't you try the delegate method, just modify the click events inside your js.

$(object).on('click touchend', dynamic object selector, function(){});

I guess it will fix the issues.

answered Sep 27, 2018 at 11:38

Ussaid Iqbal

7961 gold badge7 silver badges16 bronze badges

Collectives™ on Stack Overflow

jQuery HTML include stopping JQuery working

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related