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, Sep 27 '18 at 11:34
Thanks for the response Pete, do you have an example of how I would do this? — Paul Flood, Sep 27 '18 at 11:36
https://api.jquery.com/load/#load-url-data-complete or on SO: https://stackoverflow.com/questions/9899066/calling-function-after-load-jquery and https://stackoverflow.com/questions/8812970/load-scripts-after-ajax-loads-content — Pete, Sep 27 '18 at 11:37
Hi @irsha____D, I uploaded an example here http://spudatron.net/test/html-include/ if that helps. 3 files in the example http://spudatron.net/test/html-include/index.html, http://spudatron.net/test/html-include/header.html, http://spudatron.net/test/html-include/footer.html — Paul Flood, Sep 27 '18 at 11:38

score 1 · Accepted Answer · answered Sep 27 '18 at 11:48

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).

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. — Paul Flood, Sep 27 '18 at 11:58

score 0 · Answer 2 · answered Sep 27 '18 at 11:38

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 '18 at 11:38

Ussaid Iqbal

786
1
7
16

jQuery HTML include stopping JQuery working

2 Answers2