Callback not being invoked

Mister Epic asked
javascript powerbi
via

I am building a custom Power BI visualization, so I have access to a javascript file which is consumed by the platform. I don’t have access to any markup, only an element that is injected where I am to mount my visualization.

I am trying to mount a Bing Map, the docs look like this:

    <div id='myMap' style='width: 100vw; height: 100vh;'></div>

    <script type='text/javascript'>
            var map;
            function loadMapScenario() {
                map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
            }


    </script>

    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=YourBingMapsKey&callback=loadMapScenario' async defer></script>

The URL to the script has a callback querystring param that includes the name of the function to invoke.

Given I don’t have access to the markup, I’m trying to do everything dynamically in my visualization’s constructor. I create a function, move it to global scope, and then I add the querystring var to reference it, but it never gets invoked. Can you see anything I might be missing?

constructor(options: VisualConstructorOptions) {
        this.host = options.host;
        this.elem = options.element;
        const self = this;

        function moveMethodsIntoGlobalScope(functionName){
            var parts = functionName.toString().split('n');
            eval.call(window, parts.splice(1, parts.length - 2).join(''));  
        }

        function methodsToPutInGlobalScope(){
            function loadMapScenario(){
                console.log("finally called loadMapScenario");
            }
        }

        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.async = true;

        console.log(loadMapScenario === undefined); // false, definitely in global scope
        script.src = 'https://www.bing.com/api/maps/mapcontrol?key=xxxxxxxxxx&callback=loadMapScenario';
        document.getElementsByTagName('head')[0].appendChild(script);


Answer
via

You’ve defined the functions required to accomplish what you want. However, in the snippet you’ve given, you’re not actually calling upon moveMethodsIntoGlobalScope(), which is why loadMapScenario is undefined. Just add this line before injecting the script.

moveMethodsIntoGlobalScope(methodsToPutInGlobalScope);
Share This
Posted in: