Browser refresh on AJAX with script tags in the response

Question

I'm having some issues with a jQuery AJAX call. My code works fine when I request a page with no javascript in it, but when I have script tags in my code, things start to get weird.

It seems that any script tags referencing external URLs cause the browser to redirect. In firefox, the page goes blank. In safari, the page clears and loads with the content of the AJAX response. In both browsers, the URL doesn't change.

To be specific about my problem; I have a tab control in which I'm trying to embed the walkscore widget. Since it's pretty heavy on the client side, I only want to actually load it once the user clicks the tab it's in. The walkscore AJAX page looks like this:

<script type="text/javascript">
  var ws_address = "1 Market St, San Francisco";
  var ws_width = "500";
</script>
<script type="text/javascript" src="http://www.walkscore.com/tile/show-tile.php?wsid=MY_WSID">
</script>

Is there some restriction on script tags referencing external sites on AJAX calls? Is there any nice way around this?

-- Edit --

OK I've been playing with it for a bit and have narrowed down the problem a little. Let me try give a better explanation at the same time:

I have two files, index.html and walkscore.html

index.html

function widget() {
  var widget = $('#walkscore');
  $.get('/walkscore.html', function(data) {
    $('#loading').slideUp(function() {
      widget.html(data);
      loaded[name] = true;
      widget.slideDown();
    });
  });
}

walkscore.html - as shown in the top code block

In index.html, I have a link that calls the widget function. Whenever I click this link, the whole page is replaced by the output of the js file. It happens regardless of the domain the js file is from. It only seems to happen with js files that have document.write in them. It behaves in exactly the same way when I use the $.getScript function, even when it's in index.html

-- Edit --

It seems it has everything to do with the document.write. I made a copy of the walkscore javascript and replaced all occurrences of document.write with jquery.html, and it seems to work properly. I'm (obviously) a js noob. Is this the expected behavior of document.write? How come it doesn't do it when I include the script on a page load?

Answer 1

Load script separately from html content, you can use $.getScript( ).

Answer 2

It has to do with the document.write in the response.. I was able to fix this in Firefox by doing this:

<script type="text/javascript">

  // save default document.write function so we can set it back
  var write_func_holder = document.write;

  // redefine document.write to output text target div
  document.write = function(text) {
    $('#ad_container').html($('#ad_container').html() + text);
  }
</script>

<script language="JavaScript" type="text/javascript" src="javascriptfile">
</script>

<script type="text/javascript">
  // reset document.write function
 document.write = write_func_holder;
</script>

I'm still getting an issue in Safari where the browser refreshes to a blank page with just the content of the document.write and IE6, IE7 doesn't do anything at all. Firefox works though.

I hope this helps someone figure out what wrong and they in turn can fix the IE6/7 and Safari issues