JQuery AJAX load of external JavaScript causes browser to redirect to new location

Question

I am having issues with loading external javascript using JQuery. Every time when I try to load this external file, browser window becomes blank and in Firefox it redirects to something like:

wyciwyg://40/http://mydomain.com/myfile.html

What I am trying to do, is to load walkscore google map into one of div's on the page. I've tried using $.get() method, .load(), $.getScript() and $.requireScript() jquery plugin, and nothing works EXCEPT one case, when I put alert() right after the $.get() method. In this case browser is not redirected anywhere and walkscore map show up on the page.

This is my script in head section:

<script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
<script type="text/javascript">

 function loadWalkScore() { $.get("http://www.walkscore.com/tile/show-tile.php?wsid=87439b0626c9eaeacfd6d8d5598afc13",null,null,"script"); } </script>

Script in the body of the page:

<div id="contentArea" style="margin: 20px 0px 10px 10px; border: 1px solid #CCC;">

<script type="text/javascript">
 var ws_lat = "40.710318";
 var ws_lon = "-74.016553";
 var ws_width = "630";
 loadWalkScore();
</script>

</div>

Please also see all examples I have (only first one works):

// 1. $.get() - working example, has alert right after the $.get() method

websvit. com/tabs/walkscore-with-alert.html

// 2. $.get() - exactly the same as above without alert, doesnt work

websvit. com/tabs/walkscore-get.html

// 3. .load() - loading html file with walkscore js, doesnt work

websvit. com/tabs/walkscore-load.html

// 4. $.getScript() - doesnt work

websvit. com/tabs/walkscore-getscript-external.html

// 5. $.getScript() locally saved walkscore js, doesnt work

websvit. com/tabs/walkscore-getscript-local.html

// 6. $.requireScript() - using jquery plugin, doesnt work

websvit. com/tabs/walkscore-get-plugin.html

Answer 1

The problem is that they way the WalkScore script is written, your ajax call would have to be run synchronously (instead of async) in order for it work. This is the reason why having an alert() makes it work.

After looking through your code and going through the script returned by the call to WalkScore, I found the way to make it work. You can use $.getScript with a callback, and append the iframe to contentArea DIV. The WalkScore script uses document.write() for this.

Copy the script below to your head tag. Make sure the wsid is correct for your domain, otherwise you will get a blank page. Remove the script tag that's currently inside your DIV.

<script type="text/javascript"> 
    var ws_lat = "40.710318";
    var ws_lon = "-74.016553";
    var ws_width = "630";
    $(function(){
     $.getScript("http://www.walkscore.com/tile/show-tile.php?wsid=87439b0626c9eaeacfd6d8d5598afc13", function(){   
       $('<iframe src="http://www.walkscore.com/serve-tile.php?' + ws_params 
             + '" marginwidth="0" marginheight="0" vspace="0" hspace="0"'
             + ' allowtransparency="true" frameborder="0" scrolling="no" width="' 
             + ws_width + 'px" height="' + ws_height + 'px" style="' + ws_iframe_css_final + '"></iframe>')
             .appendTo("#contentArea");
       });
    });
</script>

Answer 2

Hi all,

I have a solution to my problem. I found a way to avoid using ajax to load walkscore javascript but to use simple iframe. In case if someone will have similar issue with walkscore map, I am posting code here.

    var ws_lat = "40.710318";
    var ws_lon = "-74.016553";
    var ws_width = "630";
 var ws_height = "300";
 var ws_iframe_css_final = "border: 0";

 var ws_params = "wsid=87439b0626c9eaeacfd6d8d5598afc13";
 ws_params += "&lat=" + ws_lat + "&lng=" + ws_lon;

 $("#walkscore_map").html('<iframe src="http://www.walkscore.com/serve-tile.php?' + ws_params + '" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" frameborder="0" scrolling="no" width="' + ws_width + 'px" height="' + ws_height + 'px" style="' + ws_iframe_css_final + '"></iframe>');