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"></script>
<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

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>');