Dynamically added script causes problems

Question

I'm loading an html snippet via ajax to append to a div (I use jquery). A part of the html loaded with ajax looks like this:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var options = {
    mapTypeId : google.maps.MapTypeId.TERRAIN
}
alert('test');
var map = new google.maps.Map(document.getElementById('map-canvas'), options);
</script>

Then this is appended with

contentBox.append(data);

The problem is that this causes a black page in Firefox which keeps loading. In other browsers it seems that the code is not executed at all.

Is there a solution for this?

Answer 1

maybe not the nicest solution, but it seems to work. The server response is now formatted as

$response = array(  'script' => $script,    'html' => $html );

And the client executes the received javascript with eval.