How can I load some html code into a <div> but mantaining the css and js of the original page?

Question

I tried to load html from an external file using load(url) with jQuery, but when I do, for example:

$('#body-content').load('admin/users/partials/settings.php')

the div #body-content doesn't show the css styles and the js files of the page.

JAVASCRIPT:

 $(document).ready(function() {
  $('#button-example').on('click', function() {
    $('#body-content').load('<button type="button" name="button" class="submit-btn">Button from external html</button>');
  });
});

CSS (from the original page) styles.css:

.submit-btn {
      background: #00f;
    }

HTML Code:

<!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Website</title>

        <!--Styles-->
        <link rel="stylesheet" href="assets/css/styles.css">
    </head>
    <body>
        <div id="body-content">
            <section>
                <div class="article-container">
                    <article>
                        <h1>Title of the Article</h1>
                        <hr>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet placeat nostrum voluptatem aliquid!
                            Perspiciatis soluta minus ipsa ex. </p>
                    </article>
                    <button id="button-example" type="button" name="button">Change content</button>
                </div>
            </section>
        </div>
    </body>

Answer 1

I think you have not loaded the css and js files anywhere. Are you sure you have included the js and css files in the file that you are trying to load using jquery?

How can I load some html code into a <div> but mantaining the css and js of the original page?

Question

1 answers

solution1
0 2017-06-12 08:18:07

How can I load some html code into a <div> but mantaining the css and js of the original page?

Question

1 answers

solution1 0 2017-06-12 08:18:07

solution1
0 2017-06-12 08:18:07