Question

Ok I am making a program in dart that fetches the user location and then reverse geo location(openmapsapi)
and then displays the news with the particular city name(google news api)

I add use the following code for the openmap api and get the city in the local storage.
From there I wanna use the similar code for the google news api but it throws an error probably two window.on.data lines cannot be added.A part of the code was taken from Seth Ladd’s blog and am a little clueless how everything is working.

    window.on.message.add(locReceived);
    Element script = new Element.tag("script");
    var somelat=window.localStorage.$dom_getItem("LAT");
    var somelng=window.localStorage.$dom_getItem("LNG");
    var someurl="http://nominatim.openstreetmap.org/reverse?  format=json&lat="+somelat+"&lon="+somelng+"&addressdetails=1&json_callback=callbackForMapsApi";
    script.src=someurl;
    document.body.elements.add(script);

This is my relevant html code I am using

      <script type="text/javascript">
function callbackForJsonpApi(s) {
    window.postMessage(JSON.stringify(s), '*');
}

function callbackForMapsApi(s) {
    window.postMessage(JSON.stringify(s), '*');
}
</script>

Not really worked on web technologies before,any help would be appreciated.

Answer 1

You should only have one window.on.message.add since all message handlers will receive all messages from JavaScript which can lead to concurrency issues. Instead ensure the JavaScript code adds a target header to the message it sends:

function callbackForJsonpApi(s) {
    s.target = "dartJsonHandler"
    window.postMessage(JSON.stringify(s), '*');
}

function callbackForMapsApi(s) {
    s.target = "dartMapsHandler";
    window.postMessage(JSON.stringify(s), '*');
}

And then switch on this target header in the Dart code. I do similar tricks in DartGap (a dart wrapper for PhoneGap) you can take a look at the relevant code here.