How to make Element.load run scripts?

[Greffin]

Hi.

I'm managing a page which updates it's content through xhr calls. This is done via the Element.load method. The response from such calls are in html, but at least one of my pages contain javascript which needs to be executed.

My Ext Core version is 3.1.0. I've tried adding a callback function on my load:


element.load({
url : 'index.php',
method : 'GET',
params : 'xhr=true&' + args,
callback: function(options, success, response) {
var scriptsFinder = /<script[^>]*>([\s\S]+)<\/script>/gi;
var scripts = scriptsFinder.exec(response.responseText);
Ext.each(scripts, function(item, index, all) {
eval(item);
});
}
This is part of the response I'm getting:


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
alert("Hi world!");
// Ext.onReady(function(){
var myLatlng = new google.maps.LatLng(59.427615, 5.381165);
var myOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// });
</script>
I allways get an error message. In this case the message is:
missing ; before statement
<script type="text/javascript">
which is probably because of the first script which fetches the google maps api.
I've tried to move the first script into my main html header and just retain the second script, but then I receive the following error:

syntax error
var myLatlng = new google.maps.LatLng(59.427615, 5.381165);
I would really like to have the possibility to execute scripts found in the response of such an ajax load. Anybody have any tips?

[fay]

I just took a quick look at this, but would the problem be because you've commented out the wrong line:



<script type="text/javascript">
alert("Hi world!");
// Ext.onReady(function(){


I assume you want to comment out the alert, and not the onReady?

Also, do you not need to specify loadScripts: true in the load call? In that case the onReady should fire, without the need to do the eval stuff.

[Greffin]

There is no "loadScripts" param which can be given to Element.load. There is in Ext.Updater, but this class is not included in Ext Core (at least not in 3.1.0).

The Ext.onReady is commented out because it will never be fired. For Ajax calls there is no onReadyState event firing from Ext. There is however a callback provided from the Element.load method.

I've tried many variations here...

[Greffin]

This works in jQuery:


$(el).load('?xhr=true&' + args);
With response:


<div id="map_canvas" style="width: 100%; height: 350px">&nbsp;</div>

<script type="text/javascript">
function pageInit() {
var myLatlng = new google.maps.LatLng(59.427615, 5.381165);
var myOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
$(function() {
// Ext.onReady(function(){
pageInit();
});
</script>


I would really like for this to be either a clean jQuery site or a clean Ext site. If anybody has any idea on how to do this in Ext Core, I would much appreciate it.