PDA

View Full Version : [CLOSED][3.0rc1] Panel autoLoad IE issue



normanhab101
22 Apr 2009, 7:24 AM
Hi everyone.
When loading html content into a Panel with autoLoad, IE (6,7 & 8) seems to ignore what's between the <script></script> tags.

For example:


function addTab(tabId,tabTitle, targetUrl){
tabPanel.add({
id: tabId,
title: tabTitle,
autoLoad: {url: targetUrl, callback: this.initSearch, scope: this, scripts: true},
closable:true
}).show(); }
file.js (the file to load)

<script type="text/javascript">
Ext.MessageBox.alert('Test','Hello world');
</script>
<div id='div_test'>Hello div</div>This works fine in FF, but in IE don't (only shows the 'Hello div').
Thanks! :)

thesilentman
22 Apr 2009, 7:38 AM
I have the same issue in a quick and dirty (not that dirty!!) app I am programming now with 3.0. The code has been checked with jslint and is ok (no extra commas or such).
However autoload isn't triggering loading from the server.
It seems to crash where the innerHTML is assign the indicatortext.
I traced the error and IE fails here =>ext-all-debug.js:6142 with an 'unknown runtime error'.


6140 showLoading : function(){
6141 if(this.showLoadIndicator){
6142 this.el.dom.innerHTML = this.indicatorText;
6143 }
6144 },



However if I disable the indicator: Ext.Updater.defaults.showLoadIndicator=false;


the error moves further down the rabbithole.... (since I am also embedding script.....)



2897 });
2898 dom.innerHTML = html.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig, "");
2899 return this;

As if there is a problem with the dom.innerHTML in ie....


The code works in all browsers except ie 6,7. I have not tested 8 yet.

ExtJS Version : 3.0 RC1

Any ideas?

CU,
Frank

thesilentman
22 Apr 2009, 8:02 PM
Well, the issue with the unknown runtime error is gone...
I had a forgotten bodyCfg in place that had a wrong tag type ('p') and internet explorer didn't like it...
The strange thing is that all the other browsers didn't have an issue with that.

The execution of scripts issue is still there as normanhab101 stated in the beginning of this thread.

I set up a quick example for that here:
http://frankmayer.net/ext/ext30/examples/window/hello2.html

Cheers,
Frank

bt_bruno
23 Apr 2009, 2:50 AM
...
file.js (the file to load)

<script type="text/javascript">
Ext.MessageBox.alert('Test','Hello world');
</script>
<div id='div_test'>Hello div</div>
...

If you have a js file you should not use any HTML tags as <script> or <div>.

EDITED:

Anyway, I did some tests and it really doesn't load scripts...

bug.html

new Ext.TabPanel({
renderTo : Ext.getBody()
,width : 300
,height : 300
,items : [{
title : 'Test'
,autoLoad : {
url : 'bug2.html'
,callback : function(){ alert('callback!') }
,scripts : true
}
,listeners:{
beforerender:function(){ debugger; }
}
}]
})

bug2.html

<script type="text/javascript">
Ext.MessageBox.alert('Test','Hello world');
</script>
<div id='div_test'>Hello div</div>

Seems that Element.update method has some trouble... It wrappers the autoLoad responde in a <span> and uses the Ext.lib.Event.onAvailable to wait until is avaible soo can work with the scripts tag. The problem is, Ext.lib.Event.onAvailable doesn't executes.



update:function()
{
...
html += '<span id="' + id + '"></span>';

Ext.lib.Event.onAvailable(id, function(){ ... });
...
}

It's too advanced for me to figure out what's wrong, but I think this is the way :-?

thesilentman
23 Apr 2009, 3:19 AM
Hello bt_bruno,
thanks for getting into this.
The file.js in the initial bug report was misleading. It should have been something .html.

As the update method's documentation states [scripts config option]:
scripts : Boolean
If true any <script> tags embedded in the response text will be extracted and executed (defaults to Ext.Updater.defaults.loadScripts). If this option is specified, the callback will be called after the execution of the scripts.

so yes, the <scripts> tags must be there... ;) as this updates the body of the element and should be valid html without the <HTML> and <BODY> tags, since they already exist in the document.

[EDIT]: But you knew that already :)

Cheers,
Frank

normanhab101
23 Apr 2009, 4:24 AM
I need the HTML because there is some PHP involved to handle sessions, mysql and stuff.
Like thesilentman said it's a HTML without <html> and <body> tags, but with a <script> that is completely ignored by IE.

TIP: don’t ask me how, but I opened the app in IE, go to some internet site in the same window, and go back to my app with <-, then… worked! :-/

thesilentman
23 Apr 2009, 4:43 AM
Yes,
I had that experience, too!!!

Breathtaking isn't it?
As I finished answering this thread earlier I went back to test something, did just a reload and it suddenly worked. But only one time..
When I reloaded again it didn't!! Same thing happened on IE7 and on a virtual machine with IE8.

Ghosts? Black Magic? The thing with the dolls and the needles?

Cheers,
Frank

normanhab101
23 Apr 2009, 4:55 AM
is frightening! :((
I guess there is a thing when the page is cached...

evant
23 Apr 2009, 6:22 AM
Confirmed, this seems to be happening "at random" on IE. The weird thing is, if I include Ext.Lib.Event after ext-all-debug, before my test code:



Ext.Lib.Event = {.....};
Ext.onReady(function(){
var p = new Ext.Panel({
width: 400,
height: 400,
renderTo: document.body,
autoLoad: {url: 'x.html', scripts: true}
});
});


It works every time.

normanhab101
23 Apr 2009, 6:56 AM
evant, thank you very much!
the workaround works perfectly, added de js like this:



<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="adapter/ext/ext-all.js"></script>
<script type="text/javascript" src="adapter/ext/ext-base-event-min.js"></script>


and works fine in IE6 IE7 & IE8

anyway the bug needs to be solved :s

evant
23 Apr 2009, 7:01 AM
Seems like some kind of timing issue. We'll look into it further.

thesilentman
23 Apr 2009, 7:16 AM
Hello Evan,

thanks for stepping in..

I did a quick check on that.

Either you have different code or did a different approach or I have something wrong.
I also got it to work but I had to put the
Ext.Lib.Event function inside the onReady just before my function instead of outside and before the onReady...
The way your code showed it, didn't work for me..


I'll also be testing deeper with my project and let you know if I find anything.

Thank you for this workaround :) :D =D>


Oh and I tested also 'normanhab101''s approach, which didn't work also.... again only at random in my example....




<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../../adapter/core/ext-base-event-min.js"></script>
... the path is relative to the examples/Window folder....



Here's the link to the working example where I put the Ext.Lib.Event function inside onReady:
http://frankmayer.net/ext/ext30/examples/window/hello3.html


and here's the link with 'normanhab101's way it didn't work:
http://frankmayer.net/ext/ext30/examples/window/hello4.html


Cheers,
Frank