Yuki Chen


I'm trying to load the veapi.ashx file dynamically, but I'm having a big problem with IE6, please test the following code out in IE6, you will need to clean your cookies and cache, to do that in IE6 you need to go to Tools --> Internet Options -->Delete Cookies & Delete Files.. and close all your IE, and start IE6 with these code..

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
var map=null;
function include_js(file) {
var html_doc = document.getElementsByTagName('head').item(0);
var js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', file);
html_doc.appendChild(js);
js.onreadystatechange = function (evt) {
//alert(js.readyState);
if(js.readyState=='complete' || js.readyState=='loaded')
{
map = new VEMap('my_map');
map.LoadMap();
map.HideDashboard();
map.SetScaleBarDistanceUnit(VEDistanceUnit.Kilometers);
}
}
return false;
}
</script>
</head>
<body>
<div id='my_map' style="position:relative; width:500px; height:300px;"></div>
<span style="cursor:pointer;" onclick="include_js('http://maps.live.com/veapi.ashx v=1.3.1115150037.31');">click here</span>
<br />1<br /><br />2<br /><br />3<br /><br />4<br /><br />5<br /><br />6<br /><br />7<br /><br />8<br /><br />9<br /><br />10<br /><br /><br />11<br /><br />12<br /><br />13<br /><br />14<br /><br />15<br /><br />16<br /><br />17<br /><br />18<br /><br />19<br /><br />20<br /><br />21<br /><br />22<br /><br />23<br /><br />24<br /><br />
</body>
</html>

does anyone know why this is happening .. I guess it's caused by several css files are not downloaded before the map was loading, but it works fine in firefox and IE7, How do I work around this problem .. I cant include mapControl.js, because it over writing my whole window .

Yuki







Re: Dynamically load API JS file kills IE6


Re: Dynamically load API JS file kills IE6

Yuki Chen

Thanks John,

I have tested that script, but unfortunatly it still happens if you don't GetMap on load. this IE 6 problem doesn't happen on body onload .. only happens if you dunt refesh the page.. so I modified a bit on the code .. if you delete your cookies and cache, and close all yout IE, and then open the file in IE6,click on the blue link, you will see what I meant.

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
var map = null;
var le = 0;
function GetMap()
{
var head = document.getElementsByTagName("head")[0];
var s = document.createElement('script');
s.id = 'VEScript';
s.type = 'text/javascript';
s.src = "http://local.live.com/veapi.asjx";
head.appendChild(s);
DelayGetMap();
}
function DelayGetMap()
{
try {
map = new VEMap('myMap');
document.getElementById("myLoading").style.display = "none";
document.getElementById("myMap").style.display = "block";
map.LoadMap(new VELatLong(47.6, -122.33), 10 ,'h' ,false);
map.HideDashboard();
map.SetScaleBarDistanceUnit(VEDistanceUnit.Kilometers);
}catch(err)
{
if (le < 30)
{
le++;
setTimeout("DelayGetMap()",1000);
}else
{
alert("Site is busy.");
}
}
} </script>
</head>
<body>
<div id='myMap' style="position:relative; width:400px; height:400px;display:none;"></div>
<span style="cursor:pointer; color='blue'" onclick="GetMap();">Click Here To Load Map</span>

<div id='myLoading' style="position:relative; width:400px; height:400px;">Loading...</div>
</body>
</html>

thank you

Yuki






Re: Dynamically load API JS file kills IE6

SoulSolutions

if you need to defer loading the VE script until the body loads but you can't just use the body onload() then try this:
http://viavirtualearth.com/wiki/DeferScript.ashx

John.






Re: Dynamically load API JS file kills IE6

Yuki Chen

Thanks John,

In my case the page doesn't refresh.. so the event window.onload doesn't fire... in this case what I can do

thank you
Yuki




Re: Dynamically load API JS file kills IE6

SoulSolutions

I getting confused Yuki.

You have to wait until the whole page is finished rendering or else you get the dreaded "operation aborted", that is why you use the differ script stuff. To load the js files on demand the only solution i have is a try..catch..loop method which is less then ideal.

I not sure what you mean by the page refreshing Do you mean a postback You don't need these anymore. Something in javascript simply needs to call the loadmap() function based on some event after the page is fully rendered.

Let me know how you go.

John.






Re: Dynamically load API JS file kills IE6

Yuki Chen

Hello John,

Thanks for your time.

Yeh.. it's getting confusing now ..

what I'm trying to do is . I don't put the VE JS file in the header.. because it's really big and I don't need the map unless the user wants to see it ... .so I'm trying to load it when the user click on an element. eg. "<span style="cursor:pointer; color='blue'" onclick="GetMap();">Load Map</span>" through the Javascript functions I posted earlier...

I'm using js.onreadystatechange to determine the js file is fully downloaded .. and then call DelayGetMap().. but this cause the problem in IE6 if you use it after clean you cookies and cache.. (but it works fine in IE7 and firefox )

the sample code in fist link you showed me http://viavirtualearth.com/wiki/Preloader.ashx.. it puts the GetMap in body onload.. <body onload="GetMap();">, so the VE JS file is getting included when loading the page.. but that's just what I'm trying to aviod (not to download the big VE JS file untill user click on the "Load Map" element .. ),

the second link you sent to me http://viavirtualearth.com/wiki/DeferScript.ashx.. that's listerning to window.onload.. but in my case. when user click on the "Load map" element .. the window.onload event is not fired..cause I think window.onload event is only fires when loading the page..

so in this case what event should I use to determine if the page is fully rendered. or do you know why it's only causing the problem in IE6, but not IE7 and firefox

I'm not sure if I have made my problem clear or not.. if still confusing .. could you let me know what time do you normally check the posts so I can up at the same time then we can communicate better.. ..

thanks very much...

Yuki





Re: Dynamically load API JS file kills IE6

SoulSolutions

I was lead to believe that "js.onreadystatechange" only works in IE

Anyway you can do what you want with the code from Preloaded. But instead of calling it onload call it when your user clicks the button. You can be assured the page has loaded becouse they were able to click on the button.

I have been tring to improve me simple try...catch loop method but find its the only way to work in all browsers. If you don't like that i did find a neat trick where you declare something like "var VELatLong = null" then test for it not to be null as this would indicate the VE control has loaded. But if you can ge the "js.onreadystatechange" to work in FF please let me know.

Thanks

John.






Re: Dynamically load API JS file kills IE6

Yuki Chen

yeh ... onreadystatechange only works in IE.. for firefox "onload" works similarly.. eg...

//IE
js.onreadystatechange = function () {
if (js.readyState == 'complete' || js.readyState == 'loaded') {
DelayGetMap();
}
}
//Firefox
js.onload = function () {
DelayGetMap();
}

I am using try and catch loop .. but it doesn't work in IE6. even loadmap() is inside "try".. but it seems still trying to call it before it's ready.. and then kills the browser.. ... can you have a look the following code .. please test it in IE6 .. delete your cookies and cache before testing ..
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
var map=null;
var le = 0;
function include_js(file, functionCall) {
var html_doc = document.getElementsByTagName('head')[0];
var js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', file);
html_doc.appendChild(js);
js.onreadystatechange = function () {
if (js.readyState == 'complete' || js.readyState == 'loaded') {
DelayGetMap();
}
}
return false;
}

function DelayGetMap()
{
try {
map = new VEMap('myMap');
var latlong=new VELatLong(47.22, -122.44);
map.LoadMap(latlong, 12, 'r', false);
}catch(err)
{
if (le < 5)
{
le++;
setTimeout("DelayGetMap()",1000);
}else
{
alert("Site is busy.");
}
}
}
</script>
</head>
<body>
<div id='myMap' style="position:relative; width:500px; height:300px;"></div>
<span style="cursor:pointer;" onClick="include_js('http://maps.live.com/veapi.ashx');">click here</span>

<br />1<br /><br />2<br /><br />3<br /><br />4<br /><br />5<br /><br />6<br /><br />7<br /><br />8<br /><br />9<br /><br />10<br /><br /><br />11<br /><br />12<br /><br />13<br /><br />14<br /><br />15<br /><br />16<br /><br />17<br /><br />18<br /><br />19<br /><br />20<br /><br />21<br /><br />22<br /><br />23<br /><br />24<br /><br />
</body>
</html>

can you see any problem with my code ..or you have a better way of doing it . can you paste you code in here please.....

Thank you

Yuki





Re: Dynamically load API JS file kills IE6

SoulSolutions

I don't have IE6 until Monday at work, but it runs fine in IE7, clearly your FF code is not in there so nothing happens in FF.

I'm hoping the whole try...catch block will be redundant.

I'll look monday for you.

John.






Re: Dynamically load API JS file kills IE6

Yuki Chen

Thank you John..

yeh ... it runs fine in IE7.. I didn't put FF code in there because I dont have problem with FF. this code is only to test in IE6.. remember to delete your cookies and cache before testing ... .. I know I have been saying this for too many times...

Thanks

Yuki





Re: Dynamically load API JS file kills IE6

Yuki Chen

Hello John ,

Have you got time to test my code on IE6 yet .. sorry for rushing you ... but it's very urgent for me ...

Thanks

Yuki





Re: Dynamically load API JS file kills IE6

SoulSolutions

I haven't forgotten about you!

I'm still working in the best possible method but i'll see if what i have currently will work for you.

Give me a moment to test it on IE6....

John.






Re: Dynamically load API JS file kills IE6

SoulSolutions

Ok this is where i am at, it works in IE6/7 but not in FF. I still want to get it working with the onreadystate and onload. Lots of things on at them moment. I will let you know how it goes or please do the same if you get it working.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Load VE on demand</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var map = null;

function GetMap()
{
document.getElementById("myLoading").style.display = "block";
var head = document.getElementsByTagName("head")[0];
s = document.createElement('script');
s.id = 'VEScript';
s.type = 'text/javascript';
s.src = "
http://maps.live.com/veapi.ashx v=1.3.1204222815.33";
head.appendChild(s);
DelayGetMap();
}
function DelayGetMap()
{
if (typeof VEMap != "undefined")
{
map = new VEMap('myMap');
document.getElementById("myLoading").style.display = "none";
document.getElementById("myMap").style.display = "block";
map.LoadMap(new VELatLong(47.6, -122.33), 10 ,'h' ,false);
}else
{
setTimeout("DelayGetMap()",1000);
}
}
</script>
</head>
<body>
<div id='myMap' style="position:relative; width:400px; height:400px;display:none;"></div>
<div id='myLoading' style="position:relative; width:400px; height:400px;display:none;">Loading...</div>
<a href="#" onclick=GetMap();">Load Map</a>
</body>
</html>

John






Re: Dynamically load API JS file kills IE6

Yuki Chen

hi John ..

the following code will work for you in FF , IE7 (and IE6 if you previously downloaded veapi.ashx in your broswer),, I have tested you code in IE6 .. it's still killing the browser .. did you delete your browser cookies and cache, and close your browser then start agian

I know "if (typeof VEMap != "undefined")" detects the veapi.ashx is fully downloaded, but it doesn't detect that if the other files included inside veapi.ashx are fully downloaded..    what happens to me is ..  it starts loading the map after the the veapi file is fully downloaded ..  but there are a few css files that are included in veapi.ashx no yet downloaded.. eg. ero.css, api.css .. so it's trying to download these css files and loading the map at the same time .. and then kills the browser..  do you have any idea why this happens

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Load VE on demand</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <script type="text/javascript">
        var map = null;

        function GetMap()
        {
            document.getElementById("myLoading").style.display = "block";
            var head = document.getElementsByTagName("head")[0];
            s = document.createElement('script');
            s.id = 'VEScript';
            s.type = 'text/javascript';
            s.src = "http://maps.live.com/veapi.ashx v=1.3.1204222815.33";        
            head.appendChild(s);

   if(!document.all){
    s.onload=DelayGetMap();
   }
   else{
    s.onreadystatechange=function(e){
     if(s.readyState=='complete' || s.readyState=='loaded'){
      DelayGetMap();
     }
    }
   }
        }

  function DelayGetMap()
        {
            if (typeof VEMap != "undefined")
            {
                map = new VEMap('myMap');
                document.getElementById("myLoading").style.display = "none";
                document.getElementById("myMap").style.display = "block";
                map.LoadMap(new VELatLong(47.6, -122.33), 10 ,'h' ,false);
            }else
            {
                setTimeout("DelayGetMap()",1000);
            }  
        }        
         </script>
   </head>
   <body>
      <div id='myMap' style="position:relative; width:400px; height:400px;display:none;"></div>
      <div id='myLoading' style="position:relative; width:400px; height:400px;display:none;">Loading...</div>
      <a href="#" onclick="GetMap();">Load Map</a>
   </body>
</html>