Search code examples
javascriptjquerydynamic

Get the ready event after appending HTML code

I have the following jsfiddle

https://jsfiddle.net/3qge41b0/

$('#myP').click(function() {
  GetMap();
});

function GetMap() {
  var text = '<html lang="en">  <head>    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">  <style> .map { height: 400px;  width: 100%; }  </style> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" asynchronous=false defer=true id="oljs" onload="LoadMap"></script' + '>    <title>OpenLayers example</title>  </head>  <body>    <h2>My Map</h2>    <div id="map" class="map"></div> <script type="text/javascript" defer=true>  function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; $(function() { LoadMap() });</script' + '>  </body></html>';

  $("#myDIV").html(text);

}

$('#myP2').click(function() {
  GetMap2();
});


function GetMap2() {
  var text = '<html lang="en">  <head>    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">  <style> .map { height: 400px;  width: 100%; }  </style> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" asynchronous=false defer=true id="oljs" onload="LoadMap"></script' + '>    <title>OpenLayers example</title>  </head>  <body>    <h2>My Map</h2>    <div id="map" class="map"></div> <script type="text/javascript" defer=true>  function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; setTimeout( function() { LoadMap() }, 10);</script' + '>  </body></html>';

  $("#myDIV").html(text);

}
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

  <h1>My Web Page</h1>

  <button id="myP">Click me.</button>
  <button id="myP2">Or Click me.</button>

  <div id="myDIV" style="width=100%;height=100%">This is a div element.</div>
</body>

</html>

    $('#myP').click(function() { GetMap(); });

function GetMap()
{
    var text = '<html lang="en">  <head>    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">  <style> .map { height: 400px;  width: 100%; }  </style> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" asynchronous=false defer=true id="oljs" onload="LoadMap"></script'+'>    <title>OpenLayers example</title>  </head>  <body>    <h2>My Map</h2>    <div id="map" class="map"></div> <script type="text/javascript" defer=true>  function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; $(function() { LoadMap() });</script'+'>  </body></html>';

    $("#myDIV").html(text);
    
}

$('#myP2').click(function() { GetMap2(); });


function GetMap2()
{
    var text = '<html lang="en">  <head>    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">  <style> .map { height: 400px;  width: 100%; }  </style> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" asynchronous=false defer=true id="oljs" onload="LoadMap"></script'+'>    <title>OpenLayers example</title>  </head>  <body>    <h2>My Map</h2>    <div id="map" class="map"></div> <script type="text/javascript" defer=true>  function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; setTimeout( function() { LoadMap() }, 10);</script'+'>  </body></html>';

    $("#myDIV").html(text);
    
}

As you can see its just a div which is loaded dynamically with a HTML string. The problem is, that the first button ends up in an error, because the ol.js library seems not be loaded. If I put a timeout in, it works (GetMap2). Also if you hit the first button a second time.

But I find this is rather a workaround than a solution. What if the connection is slow and the library takes more than 100 ms to load?

Is there a possibility to get the event when the library is loaded? I tried a lot of different ways of appending or adding the html string. Nothing worked. The ready or load event on the ol.js is not firing correctly.

Does anybody have an idea how to solve this?

Solution

  • With jquery you can use getScript to ensure the script is fully loaded.

    $.getScript("https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js", function(){ LoadMap(); });

    https://api.jquery.com/jQuery.getScript/

    Example: https://jsfiddle.net/usc23yt6/#&togetherjs=9NyczI3xx7