OmniUnlimited
asked on
Firefox Anomaly
Hi everyone!
I hope there is someone out there that can help me. I am pulling my hair out with a problem for which I can find no logical explanation. The problem deals with Firefox 3.0, WordPress and components from the Ext JS library (http://extjs.com/). I have modified a livesearch function from one of the Ext JS tutorials located at http://extjs.com/learn/Tutorial:Building-grid-with-livesearch-form--chapter-1 and am trying to integrate it with my WordPress website at https://www.sleepamazing.com/chiropractic/. It works perfectly fine in IE 8, but in Firefox 3.0 it only displays two thin blue lines (see attached screenshot).
I thought maybe it might be some sort of conflict with WordPress so I went ahead and took a fresh instance of WordPress and set up the livesearch on the homepage, and it works with no significant problems that I can see (you can see it working on https://www.sleepamazing.com/associates/). The only difference between the two sites is the subdirectories, both of which stem off of the main https://www.sleepamazing.com/ root directory, so I went ahead and positioned the files in the exact relative positions in each of the subdirectories, and set up the links in the header.php to be exactly the same in each file. I've included the Ext JS link information in both of the header.php files in the code that follows.
I cannot for the life of me figure out what in the world is going on. I even considered the possibility of it being a plugin that might have been giving me the problems, but upon deactivating all of the plugins, the problem still persisted.
Can anyone help me with this problem? As I say, it only seems to be occurring in Firefox. (Note: Firebug reports the following error:
this[name] is null
createElement()("body", div.x-panel-mc)ext-all-deb ug.js (line 16478)
onRender()(Object dom=div#searchWrapper id=searchWrapper, null)ext-all-debug.js (line 16532)
onRender()(Object dom=div#searchWrapper id=searchWrapper, null)ext-all-debug.js (line 30061)
render()("searchWrapper", undefined)ext-all-debug.js (line 12847)
render()()ext-all-debug.js (line 14511)
createSearchForm()livesear ch.js (line 98)
(?)()()livesearch.js (line 183)
(?)()()ext-all-debug.js (line 1431)
this[name].applyStyles(thi s[name+'St yle']);
IE 8 reports no errors.)
Thanks a million for your time and attention to this matter.
I hope there is someone out there that can help me. I am pulling my hair out with a problem for which I can find no logical explanation. The problem deals with Firefox 3.0, WordPress and components from the Ext JS library (http://extjs.com/). I have modified a livesearch function from one of the Ext JS tutorials located at http://extjs.com/learn/Tutorial:Building-grid-with-livesearch-form--chapter-1 and am trying to integrate it with my WordPress website at https://www.sleepamazing.com/chiropractic/. It works perfectly fine in IE 8, but in Firefox 3.0 it only displays two thin blue lines (see attached screenshot).
I thought maybe it might be some sort of conflict with WordPress so I went ahead and took a fresh instance of WordPress and set up the livesearch on the homepage, and it works with no significant problems that I can see (you can see it working on https://www.sleepamazing.com/associates/). The only difference between the two sites is the subdirectories, both of which stem off of the main https://www.sleepamazing.com/ root directory, so I went ahead and positioned the files in the exact relative positions in each of the subdirectories, and set up the links in the header.php to be exactly the same in each file. I've included the Ext JS link information in both of the header.php files in the code that follows.
I cannot for the life of me figure out what in the world is going on. I even considered the possibility of it being a plugin that might have been giving me the problems, but upon deactivating all of the plugins, the problem still persisted.
Can anyone help me with this problem? As I say, it only seems to be occurring in Firefox. (Note: Firebug reports the following error:
this[name] is null
createElement()("body", div.x-panel-mc)ext-all-deb
onRender()(Object dom=div#searchWrapper id=searchWrapper, null)ext-all-debug.js (line 16532)
onRender()(Object dom=div#searchWrapper id=searchWrapper, null)ext-all-debug.js (line 30061)
render()("searchWrapper", undefined)ext-all-debug.js
render()()ext-all-debug.js
createSearchForm()livesear
(?)()()livesearch.js (line 183)
(?)()()ext-all-debug.js (line 1431)
this[name].applyStyles(thi
IE 8 reports no errors.)
Thanks a million for your time and attention to this matter.
<link rel="stylesheet" type="text/css" href="../chiropractic/wp-includes/js/ExtJS/resources/css/ext-all.css" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<script type="text/javascript" src="../chiropractic/wp-includes/js/ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../chiropractic/wp-includes/js/ExtJS/ext-all-debug.js"></script>
<script type="text/javascript" src="RowExpander.js"></script>
<script type="text/javascript" src="livesearch.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../chiropractic/wp-includes/js/ExtJS/resources/images/default/s.gif';
</script>
screenshot.jpg
How do we get to the screen above from the link given?
ASKER
I've set up a username and password that you can use to access the display above. Go to www.sleepamazing.com/chiropractic and type in "test" as the username, and "test1234" as the password.
Thanks for the help!
Thanks for the help!
Error: this[name] is null
Source File: https://www.sleepamazing.c om/chiropr actic/wp-i ncludes/js /ExtJS/ext -all-debug .js
Line: 16478
can you add
alert(name) here:
Source File: https://www.sleepamazing.c
Line: 16478
can you add
alert(name) here:
createElement : function(name, pnode){
if(this[name]){
pnode.appendChild(this[name].dom);
return;
}
alert(name)
if(name === 'bwrap' || this.elements.indexOf(name) != -1){
if(this[name+'Cfg']){
this[name] = Ext.fly(pnode).createChild(this[name+'Cfg']);
}else{
var el = document.createElement('div');
el.className = this[name+'Cls'];
this[name] = Ext.get(pnode.appendChild(el));
}
if(this[name+'CssClass']){
this[name].addClass(this[name+'CssClass']);
}
if(this[name+'Style']){
this[name].applyStyles(this[name+'Style']);
}
}
},
Actually try this:
createElement : function(name, pnode){
if(this[name]){ // if it already exists, appendChild and leave
pnode.appendChild(this[name].dom);
return;
}
// here there is NO this[name]
var where = "Not known";
try{
if(name === 'bwrap' || this.elements.indexOf(name) != -1){
if(this[name+'Cfg']){
where = "Ext.fly";
this[name] = Ext.fly(pnode).createChild(this[name+'Cfg']); // create it
}else{
var el = document.createElement('div');
el.className = this[name+'Cls'];
where = "Ext.get";
this[name] = Ext.get(pnode.appendChild(el)); // create it and get it (fails?)
}
if(this[name+'CssClass']){
where = "addClass";
this[name].addClass(this[name+'CssClass']); // assumes that there IS a this[name]
}
if(this[name+'Style']){
where = "applyStyles";
this[name].applyStyles(this[name+'Style']); // assumes that there IS a this[name]
}
}
}
catch(e) {
alert(name+' - '+where+':'+e.message)
}
},
ASKER
Nice bit of debugging code! The alert is:
body - applyStyles:this[name] is null
Actually I had placed an alert(name) there before and observed its behavior. In IE 8 it cycles through the following messages three times: header, bwrap, tbar, body, bbar, and footer. In Firefox it cycles through one time and stops on "body" the second time through. However, since I am new to firebug, I have no way of telling whether there is any way of tracing the calls up the ladder.
body - applyStyles:this[name] is null
Actually I had placed an alert(name) there before and observed its behavior. In IE 8 it cycles through the following messages three times: header, bwrap, tbar, body, bbar, and footer. In Firefox it cycles through one time and stops on "body" the second time through. However, since I am new to firebug, I have no way of telling whether there is any way of tracing the calls up the ladder.
So what happens to your application if you take my code and simply comment out the content of the catch
catch(e) {
// alert(name+' - '+where+':'+e.message)
}
Alternatively try changing
if(this[name+'Style']){
this[name].applyStyles(thi s[name+'St yle']); // assumes that there IS a this[name]
}
to
if(this[name+'Style']){
if (this[name] == null) this[name] = document.body;
this[name].applyStyles(thi s[name+'St yle']); // assumes that there IS a this[name]
}
catch(e) {
// alert(name+' - '+where+':'+e.message)
}
Alternatively try changing
if(this[name+'Style']){
this[name].applyStyles(thi
}
to
if(this[name+'Style']){
if (this[name] == null) this[name] = document.body;
this[name].applyStyles(thi
}
When debugging I set:
in Ext.Panel body should refer to Ext.get(document.body);
I dont know why its missing? Maybe in configuration you missed something ?
You could try this:
in line 16343 of ext-all-debug.js
just add:
body: Ext.get(document.body)
But I cant guarantee that it will work :( at least this is a problem but dont know why its null
in Ext.Panel body should refer to Ext.get(document.body);
I dont know why its missing? Maybe in configuration you missed something ?
You could try this:
in line 16343 of ext-all-debug.js
just add:
body: Ext.get(document.body)
But I cant guarantee that it will work :( at least this is a problem but dont know why its null
ASKER
mplungjan:
Commenting out the alert(name+' - '+where+':'+e.message) resulted in the following error report in firebug:
Components is not defined
initEl()(null)ext-all-debu g.js (line 29708)
onRender()(Object dom=div#searchWrapper1 id=searchWrapper1, null)ext-all-debug.js (line 30074)
render()("searchWrapper1", undefined)ext-all-debug.js (line 12847)
render()()ext-all-debug.js (line 14511)
createSearchForm()livesear ch.js (line 104)
(?)()()livesearch.js (line 389)
(?)()()ext-all-debug.js (line 1431)
[Break on this error] this.id = this.el.id || Ext.id();
ext-all-debug.js (line 29708)
this.el is null
[Break on this error] this.id = this.el.id || Ext.id();
For that which you designated as the alternative, you requested a change in the original coding so I am assuming that you wanted the debugging code removed before I made that change.
This change results in the following errors:
Components is not defined
createElement()("body", div.x-panel-mc)ext-all-deb ug.js (line 16479)
onRender()(Object dom=div#searchWrapper1 id=searchWrapper1, null)ext-all-debug.js (line 16533)
onRender()(Object dom=div#searchWrapper1 id=searchWrapper1, null)ext-all-debug.js (line 30062)
render()("searchWrapper1", undefined)ext-all-debug.js (line 12847)
render()()ext-all-debug.js (line 14511)
createSearchForm()livesear ch.js (line 104)
(?)()()livesearch.js (line 389)
(?)()()ext-all-debug.js (line 1431)
[Break on this error] this[name].applyStyles(thi s[name+'St yle']);
ext-all-debug.js (line 16479)
this[name].applyStyles is not a function
[Break on this error] this[name].applyStyles(thi s[name+'St yle']);
wilq32:
Adding "body: Ext.get(document.body)," to line 16343 of ext-all-debug.js resulted in the following error:
createElement()("body", div.x-panel-mc)ext-all-deb ug.js (line 16478)
onRender()(Object dom=div#searchWrapper1 id=searchWrapper1, null)ext-all-debug.js (line 16532)
onRender()(Object dom=div#searchWrapper1 id=searchWrapper1, null)ext-all-debug.js (line 30061)
render()("searchWrapper1", undefined)ext-all-debug.js (line 12847)
render()()ext-all-debug.js (line 14511)
createSearchForm()livesear ch.js (line 104)
(?)()()livesearch.js (line 389)
(?)()()ext-all-debug.js (line 1431)
[Break on this error] this[name].applyStyles(thi s[name+'St yle']);
ext-all-debug.js (line 16478)
this[name] is null
[Break on this error] this[name].applyStyles(thi s[name+'St yle']);
Thanks guys for all your help!
Commenting out the alert(name+' - '+where+':'+e.message) resulted in the following error report in firebug:
Components is not defined
initEl()(null)ext-all-debu
onRender()(Object dom=div#searchWrapper1 id=searchWrapper1, null)ext-all-debug.js (line 30074)
render()("searchWrapper1",
render()()ext-all-debug.js
createSearchForm()livesear
(?)()()livesearch.js (line 389)
(?)()()ext-all-debug.js (line 1431)
[Break on this error] this.id = this.el.id || Ext.id();
ext-all-debug.js (line 29708)
this.el is null
[Break on this error] this.id = this.el.id || Ext.id();
For that which you designated as the alternative, you requested a change in the original coding so I am assuming that you wanted the debugging code removed before I made that change.
This change results in the following errors:
Components is not defined
createElement()("body", div.x-panel-mc)ext-all-deb
onRender()(Object dom=div#searchWrapper1 id=searchWrapper1, null)ext-all-debug.js (line 16533)
onRender()(Object dom=div#searchWrapper1 id=searchWrapper1, null)ext-all-debug.js (line 30062)
render()("searchWrapper1",
render()()ext-all-debug.js
createSearchForm()livesear
(?)()()livesearch.js (line 389)
(?)()()ext-all-debug.js (line 1431)
[Break on this error] this[name].applyStyles(thi
ext-all-debug.js (line 16479)
this[name].applyStyles is not a function
[Break on this error] this[name].applyStyles(thi
wilq32:
Adding "body: Ext.get(document.body)," to line 16343 of ext-all-debug.js resulted in the following error:
createElement()("body", div.x-panel-mc)ext-all-deb
onRender()(Object dom=div#searchWrapper1 id=searchWrapper1, null)ext-all-debug.js (line 16532)
onRender()(Object dom=div#searchWrapper1 id=searchWrapper1, null)ext-all-debug.js (line 30061)
render()("searchWrapper1",
render()()ext-all-debug.js
createSearchForm()livesear
(?)()()livesearch.js (line 389)
(?)()()ext-all-debug.js (line 1431)
[Break on this error] this[name].applyStyles(thi
ext-all-debug.js (line 16478)
this[name] is null
[Break on this error] this[name].applyStyles(thi
Thanks guys for all your help!
you are welcome.
I think you need to try a newer version of EXT or ask the same question in an EXT forum
I think you need to try a newer version of EXT or ask the same question in an EXT forum
yes thats definetly good approach:)
ASKER
Sorry fellas, I was hoping to find some good Ext JS experts here, I have a similar question posted in the Ext JS forum and I am getting very poor response. What I think I need is a good browser expert, because as I say, this problem only occurs in Firefox. It works perfectly well in IE 8, Safari and Mobile Safari. I was hoping that there might have been something lilke a CSS solution, like a browser hack. To be honest with you, I really don't think this is a javascript problem, otherwise why would it work so well in other browsers?
I suspect that somehow the browser is doing something that is interfering with the CreateElement function as this[name] is returning null.
So, are you guys going to give up on me?
I suspect that somehow the browser is doing something that is interfering with the CreateElement function as this[name] is returning null.
So, are you guys going to give up on me?
ASKER
You know, on second thought, there has to be something in the programming of my website that is doing this. Firefox will render the grid perfectly fine in WordPress.
Don't you experts know of any debugging techniques that could help me to get to the heart of the matter?
Don't you experts know of any debugging techniques that could help me to get to the heart of the matter?
Try this instead of
if(this[name+'Style']){
this[name].applyStyles(thi s[name+'St yle']);
}
if(this[name+'Style']){
this[name].applyStyles(thi
}
if(this[name+'Style']){
if (!this[name]) this[name] = Ext.get(document.body);
this[name].applyStyles(this[name+'Style']);
}
ASKER
WOW! You touched on something, alright! You got the grid to render, but it did a wierd thing to the page (see attached screenshot). Are you on to something?
screenshot.jpg
screenshot.jpg
Just dont ask :D it seems that there is style bodyStyle set to define width of this element. Just change line to this and it should work
if(this[name+'Style']){
if (!this[name]) this[name] = Ext.get(document.body);
else this[name].applyStyles(this[name+'Style']);
}
ASKER
Well, I think the strange page display is because the javascript is not executing properly. I made the change and there was no visible effect. Plus I noticed that the livesearch field and textbox are now located at the top of the screen, off the page, instead of directly above the grid (you can see the working example of this and how it should look at https://www.sleepamazing.com/associates/). Again, I think the proper element is not being created for some reason (why it creates just fine in other browsers is beyond me).
I appreciate you lending your expertise at javascript to this problem. You are being a real help!
I appreciate you lending your expertise at javascript to this problem. You are being a real help!
ASKER
Hey, just a quick question. Are you aware of any issues in Firefox and the appendChild method. Like I have noticed in IE sometimes appending a child to an existing div does not work. Sometimes you have to create a whole new div, transfer the contents from the old div over to the new, and then append a child to that div. Do you think something similar might be happening here?
Nope there was no such a problem in Firefox:( I still debugging your code
ASKER
Thanks! You are the greatest!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
you create 3 simple Panels that you specify width for them so Ext setting that width. So first example was ok because it was narrow, and it uses exaly 715 width. Here it does not work because of setting width.
Ok you changed it ;) I see but search is on top. I think that I know what is a problem ;)
ASKER
Woohoo! You are a genius! Display is now looking great, just still have the problem with the floating search box and label.
ASKER
Wow, how do you see my responses so fast? There is a delay before I see yours.
Ok I have to check something... It seems that is somehow a strange firefox behaviour. Now do this:
go to line: 16472 : this[name] = Ext.get(pnode.appendChild( el));
and change to those lines:
go to line: 16472 : this[name] = Ext.get(pnode.appendChild(
and change to those lines:
var added = pnode.appendChild(el);
var returned = Ext.get(added);
this[name] = returned;
No i noticed search problem after I sent you a fix so I wrote about it before you do ;)
There has to be some bug with this. I tried execute the same line when debugger was on it and everything then goes well. But if I go over it using "next statement" it just go out of function. Thats pretty strange hmm.
And to be honest I never saw so strange bug in firefox :)
ASKER
Ha! That's great. Listen, there seems to be a problem because now the page will not load.
ASKER
Yeah, neither have I. Firefox is supposed to be the well behaved browser.
16481 : if (!this[name]) this[name] = Ext.get(document.body);
change to:
if (!this[name]) return;
change to:
if (!this[name]) return;
ok Can you revert all changes there ? because now it brokes Ext somehow ;)
can you remove bodyStyle:'padding:5px 5px 0', from all FormPanel configuration in livesearch.js ??
ASKER
Hi there!
Sorry for the delay, I was experiencing problems with my internet connection. I'm still running a little slow, but it appears I should be able to continue working. When you say revert all changes, do you mean everything you asked me to do, or just the last bits?
Sorry for the delay, I was experiencing problems with my internet connection. I'm still running a little slow, but it appears I should be able to continue working. When you say revert all changes, do you mean everything you asked me to do, or just the last bits?
ASKER
Wow, sorry again for the delay. Just when I thought everything was fixed, my modem crashed. I had to run out and buy another one. I am really sorry. I hope you are still out there to help me.
Looks like the bodyStyle:'padding:5px 5px 0', is required. When I take them out everything returns to the way it was at the beginning.
Looks like the bodyStyle:'padding:5px 5px 0', is required. When I take them out everything returns to the way it was at the beginning.
remove it please I need to check something ;) and then revert also every change in line 16481
ASKER
Oh wonderful! You are back! Thank you so much for your patience.
Per your request, I have commented out the bodyStyles. Let me know when you want me to revert line 16481.
Per your request, I have commented out the bodyStyles. Let me know when you want me to revert line 16481.
ok can you remove them now ?:)
ASKER
Done!
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Wow, so you think this is an Ext JS bug, and not an issue with Firefox? That's awesome. I really appreciate the expert help. I can tell you are operating on a level far beyond me, and I could not resolve this issue without you.
Do you know if there is any way to increase the points on this question beyond the 500?
I've made the changes per your request, and restored all the bodystyles.
Do you know if there is any way to increase the points on this question beyond the 500?
I've made the changes per your request, and restored all the bodystyles.
Ok after this changes it looks ok - does it ?
And no - 500 is max, but of course you can always buy me a beer haha ;P
And no - 500 is max, but of course you can always buy me a beer haha ;P
ASKER
OMG!!! YOU DID IT!!! PERFECT RENDERING, IE8, SAFARI, MOBILE SAFARI AND FF!
THANK YOU, THANK YOU, THANK YOU!!!!!
You are truly a GENIUS!!! I would love to buy you a beer!
Seriously, I can't thank you enough. If there is ever anything I can do for you, please do not hesitate to call. You can contact me at craig a omniunlimited.com (substitute the a for the at sign).
Once again, thanks a million!
THANK YOU, THANK YOU, THANK YOU!!!!!
You are truly a GENIUS!!! I would love to buy you a beer!
Seriously, I can't thank you enough. If there is ever anything I can do for you, please do not hesitate to call. You can contact me at craig a omniunlimited.com (substitute the a for the at sign).
Once again, thanks a million!
ASKER
wilq32, you are a credit to EE. I truly could not have done this without you. I will be eternally grateful.
Great you solved it...
ASKER
See... you gave up too easily! ;)
I have a life ;) (and I live in CET)
ASKER
Great! CET is perfect for my all night work fests. Maybe you can help with the next problem I encounter?
As long as I do not have to debug EXT or other frameworks. I prefer writing and understanding my own code ;)
ASKER
OK. Good to know. Thanks!
i dont like to debug frameworks also :P but this was looking not so hard, but in fact it was uh :)
ASKER
You rock!
Yeah, well done Wilq
ASKER
Aaarrgh!!! I can't believe this!!! I have ANOTHER problem with FIREFOX!!!
Guys, you have been so great. Is there any way you can take a look at this and see if you could help me?
The question is posted at https://www.experts-exchange.com/questions/24425827/Another-Firefox-Problem.html.
Thanks a million!
Guys, you have been so great. Is there any way you can take a look at this and see if you could help me?
The question is posted at https://www.experts-exchange.com/questions/24425827/Another-Firefox-Problem.html.
Thanks a million!