jQuery / AJAX / parsererror / XAMPP / Win8.1 / IE11 / Chrome

Question

I know there are a million questions about "parsererror", but can't seem to find an answer that makes sense for my situation. Here is my sickly code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>

<script type="text/javascript">
    $.ajax({
        url: 'http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0',
        dataType: 'jsonp',
        contentType: 'application/jsonp; charset=utf-8',
        jsonp: 'onscriptload',
        success: function(data, textStatus)
            {
                console.log("Success."); 
                var MM = Microsoft.Maps;
                var map = new MM.Map($('#mapDiv')[0],
                    {
                        credentials: 'a valid bing maps key'
                    });
            },
        error: function(xOptions, textStatus)
            {
                console.log(JSON.stringify(xOptions) + ' ' + textStatus);
            }
        });
</script>
</head>
<body>
    <div id="mapDiv" class="map"></div>
</body>
</html>

The "error" part is triggered, and returns {"readyState":4,"status":200,"statusText":"load"} parsererror, and I'm stumped trying to get this to work. Exact same error/behavior in IE11 as well as Chrome. This was the most helpful article (Callback function for JSONP with JQuery ajax), but "onscriptload" should already be a built-in function that I shouldn't have to (re)define/overload, no? Any help appreciated...

that url is a script. Why are you trying to treat it as jsonp? — charlietfl, Sep 21 '14 at 23:29
I'm trying to follow the code examples [here](http://build-failed.blogspot.com/2012/02/bing-maps-nodejs-websockets-with.html) — Adam Mac, Sep 22 '14 at 10:23

score 0 · Accepted Answer · answered Sep 23 '14 at 07:02

That ajax request was an "hack" in order to just load the bing maps lib on-demand and not on page load. I would recommend a typical approach like:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">

          function loadMap() {
              // Initialize the map
              var map = new Microsoft.Maps.Map(document.getElementById("map"),
              {
                  credentials: "BING MAPS KEY HERE"
              });

              //load the pushpins here
          }

      </script>
   </head>
   <body onload="loadMap();">
        <div id="map"></div>
   </body>
</html>

jQuery / AJAX / parsererror / XAMPP / Win8.1 / IE11 / Chrome

1 Answers1