Load script javascript

Question

I'm using 3 html, 1 with the header, 1 with footer, and another with the base of everything. I am loading the header and footer with the following code

jQuery(document).ready(function ($) {
    $('#header-load').load('/app/templates/header.html', function () {
        console.log('header loaded')
    });
    $('#footer-load').load('/app/templates/footer.html', function () {
        console.log('footer loaded')
    });
    $('.dropdown').on('show.bs.dropdown', function (e) {
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
    });

    $('.dropdown').on('hide.bs.dropdown', function (e) {
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp(200);
    });

})

In the base html, this is the following

<!DOCTYPE html>
<html class="no-focus" lang="en">
<head>
    <meta charset="utf-8">
    <title>Home</title>
    <link rel="stylesheet" id="css-main" href="/public/css/app.css">
    <!-- END Stylesheets -->
</head>
<body>
    <!-- Page Container -->
    <div id="page-container" class="">
        <!-- Header -->
        <div id="header-load"></div>
        <!-- END Header -->

        <!-- Main Container -->
        <main id="main-container">


        </main>
        <!-- END Main Container -->

        <!-- Footer -->
        <div id="footer-load"></div>
        <!-- END Footer -->
    </div>
    <!-- END Page Container -->

    <!-- JS-->
    <script src="/public/library/jquery/dist/jquery.min.js"></script>
    <script src="/public/library/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="/public/js/app.js"></script>
</body>

</html>

I have a function in app.js to load into the header.html, but it does not work..

Load the header and footer but the other function does not

have you try to use <script src="ajax.googleapis.com/ajax/libs/jquery/3.2.1/…> instead of public/library/jquery/dist/jquery.min.js ? — R.K.Bhardwaj
– R.K.Bhardwaj, Commented Jun 6, 2017 at 6:52

Erdogan Oksuz · Accepted Answer · 2017-06-06 07:03:14Z

1

.load work async like ajax, you must wait for request complete then find elements and define events.

jQuery(document).ready(function ($) {
$('#header-load').load('/app/templates/header.html', function () {
    console.log('header loaded')
    $('#footer-load').load('/app/templates/footer.html', function () {
        console.log('footer loaded')
        $('.dropdown').on('show.bs.dropdown', function (e) {
            $(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
        });

        $('.dropdown').on('hide.bs.dropdown', function (e) {
            $(this).find('.dropdown-menu').first().stop(true, true).slideUp(200);
        });
    });
})
});

answered Jun 6, 2017 at 7:03

Erdogan Oksuz

62111 silver badges17 bronze badges

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

4 Comments

Aravindh Gopi Over a year ago

then why don't we try timeout function?

Juan David Over a year ago

@erdogan-oksuz Why do we put in the function of loading the header, the other functions?

Erdogan Oksuz Over a year ago

@AravindhGopi Because I don't know request waits time.

Erdogan Oksuz Over a year ago

@JuanDavid Read this document for more help your understanding async request in javascript.developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/…

Collectives™ on Stack Overflow

Load script javascript

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related