0

when I try load a html content into a div using ajax, the referenced scripts aren't not loaded, but the css are. Follow below a test case.

PageA.html content:

<html>
<head> 
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>     
</head> 
<body>
    <h1>Page A</h1>     
    <div>
        <div id="dck">
        </div>   
    </div>          
</body>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: "http://localhost/demo/pageB.html", data: {}, 
            type: "get", async: false, cache: false, dataType: "html",
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            },
            success: function (data, textStatus, XMLHttpRequest) {
                $('div#dck').hide();
                $('div#dck').html(data);
                $('div#dck').delay(1000).show(0);
            }
        });
    });
</script>

PageB.html content:

<html>
<head>      
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
</head> 
<body>
    <h1>Page B <span class="badge badge-secondary">Div Inside</span></h1>
</body>         

<script type="text/javascript">
    alert('1');

    new ClipboardJS('.btn-cp');

    alert('2');

    $(document).ready(function () {
        alert('3');
    });
</script>

If all works we would see three alerts, but unfortunately we see just the first, because the object ClipboardJS is defined in a javascript in pageB that is not loaded.

I have tried some options, but nothing has worked until now, anybody has some suggestion?

I will need this in a cross-domain deploy, but this is not a cross-domain issue, I have the problem with the pages in same path, I have tested puting both the above pages in a single web server folder called demo.

user901366
  • 91
  • 2
  • 12
  • It is a bad idea doing what you are doing because if you do load all the scripts, you are going to overwrite jQuery. – epascarello Oct 11 '18 at 14:51
  • Yes, but it's just a test case, in we real case we has control about this. Thank you! – user901366 Oct 11 '18 at 14:53
  • What is on your console log errors? The reason why you are not seeing alert 3 is because you document is ready already. You do not need that there. The second alert is probably not happening because clipboardjs is returning an error since .btn-cp does not exist on your HTML structure. – gugateider Oct 11 '18 at 15:28
  • @gugateider, the error is "Uncaught ReferenceError: ClipboardJS is not defined", just because the script clipboard.min.js, declared in pageB, is not loaded when it is docked in pageA. This test case was build to demonstrate this probelm, it is not my real scenario. Thus, you can try load pageB directly and you will see the three alerts. Thank you! – user901366 Oct 11 '18 at 16:30
  • have you tried $(window).on('load', function() instead of document? Check out: https://stackoverflow.com/questions/11258068/is-it-possible-to-wait-until-all-javascript-files-are-loaded-before-executing-ja#11258137 – Joe Fitzsimmons Oct 11 '18 at 16:37

0 Answers0