Solved

Firefox Anomaly

Posted on 2009-05-18
54
1,510 Views
Last Modified: 2012-08-13
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-debug.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()livesearch.js (line 98)
(?)()()livesearch.js (line 183)
(?)()()ext-all-debug.js (line 1431)


this[name].applyStyles(this[name+'Style']);

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>

Open in new window

screenshot.jpg
0
Comment
Question by:OmniUnlimited
  • 25
  • 20
  • 9
54 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24419603
How do we get to the screen above from the link given?
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24419779
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!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24420616
Error: this[name] is null
Source File: https://www.sleepamazing.com/chiropractic/wp-includes/js/ExtJS/ext-all-debug.js
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']);

            }

        }

    },

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24420665
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)

  }

},

Open in new window

0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24421080
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.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24421179
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(this[name+'Style']); // assumes that there IS a this[name]
}

to

if(this[name+'Style']){
  if (this[name] == null) this[name] = document.body;
  this[name].applyStyles(this[name+'Style']); // assumes that there IS a this[name]
}
 


0
 
LVL 18

Expert Comment

by:wilq32
ID: 24421293
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
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24421596
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-debug.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()livesearch.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-debug.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()livesearch.js (line 104)
(?)()()livesearch.js (line 389)
(?)()()ext-all-debug.js (line 1431)
[Break on this error] this[name].applyStyles(this[name+'Style']);
ext-all-debug.js (line 16479)
this[name].applyStyles is not a function
[Break on this error] this[name].applyStyles(this[name+'Style']);

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-debug.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()livesearch.js (line 104)
(?)()()livesearch.js (line 389)
(?)()()ext-all-debug.js (line 1431)
[Break on this error] this[name].applyStyles(this[name+'Style']);
ext-all-debug.js (line 16478)
this[name] is null
[Break on this error] this[name].applyStyles(this[name+'Style']);

Thanks guys for all your help!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24421718
you are welcome.

I think you need to try a newer version of EXT or ask the same question in an EXT forum
0
 
LVL 18

Expert Comment

by:wilq32
ID: 24421725
yes thats definetly good approach:)
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24421849
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?
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24421909
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?
0
 
LVL 18

Expert Comment

by:wilq32
ID: 24421921
Try this instead of

if(this[name+'Style']){
 this[name].applyStyles(this[name+'Style']);
}


if(this[name+'Style']){

 if (!this[name]) this[name] = Ext.get(document.body);

 this[name].applyStyles(this[name+'Style']); 

}

Open in new window

0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24422190
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
0
 
LVL 18

Expert Comment

by:wilq32
ID: 24422302
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']); 

}

Open in new window

0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24422450
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!
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24422555
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?
0
 
LVL 18

Expert Comment

by:wilq32
ID: 24422578
Nope there was no such a problem in Firefox:( I still debugging your code
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24422583
Thanks!  You are the greatest!
0
 
LVL 18

Accepted Solution

by:
wilq32 earned 500 total points
ID: 24422595
Livesearch.js  line 60:

width:715  -   remove that and it might look better ;)


Every rest width specified one also remove it
0
 
LVL 18

Expert Comment

by:wilq32
ID: 24422617
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.
0
 
LVL 18

Expert Comment

by:wilq32
ID: 24422668
Ok you changed it ;) I see but search is on top. I think that I know what is a problem ;)
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24422675
Woohoo!  You are a genius!  Display is now looking great, just still have the problem with the floating search box and label.
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24422701
Wow, how do you see my responses so fast?  There is a delay before I see yours.
0
 
LVL 18

Expert Comment

by:wilq32
ID: 24422911
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:


var added = pnode.appendChild(el);

var returned = Ext.get(added);

this[name] = returned;

Open in new window

0
 
LVL 18

Expert Comment

by:wilq32
ID: 24422923
No i noticed search problem after I sent you a fix so I wrote about it before you do ;)
0
 
LVL 18

Expert Comment

by:wilq32
ID: 24422947
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.
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 18

Expert Comment

by:wilq32
ID: 24422953
And to be honest I never saw so strange bug in firefox :)
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24423034
Ha!  That's great.  Listen, there seems to be a problem because now the page will not load.
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24423051
Yeah, neither have I.  Firefox is supposed to be the well behaved browser.
0
 
LVL 18

Expert Comment

by:wilq32
ID: 24423063
16481 :  if (!this[name]) this[name] = Ext.get(document.body);

change to:


if (!this[name]) return;
0
 
LVL 18

Expert Comment

by:wilq32
ID: 24423669
ok Can you revert all changes there ? because now it brokes Ext somehow ;)
0
 
LVL 18

Expert Comment

by:wilq32
ID: 24423755
can you remove  bodyStyle:'padding:5px 5px 0',    from all FormPanel  configuration in livesearch.js  ??
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24424008
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?
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24425781
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.
0
 
LVL 18

Expert Comment

by:wilq32
ID: 24426169
remove it please I need to check something ;) and then  revert also every change in line 16481
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24426243
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.
0
 
LVL 18

Expert Comment

by:wilq32
ID: 24426338
ok can you remove them now ?:)
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24426349
Done!
0
 
LVL 18

Assisted Solution

by:wilq32
wilq32 earned 500 total points
ID: 24426448
Ufff.... this EXT is somewhat broken but I cant find why it is doing like this. This is a Ext bug that obvious but patching it just sux :)

Try get back this bodyStyles, and do this:


Instead of:


if(this[name+'Style']){
 this[name].applyStyles(this[name+'Style']);
}


Try put this:


if(this[name+'Style']){
if (!this[name])
{
 var el = document.createElement('div');
el.className = this[name+'Cls'];
this[name] = Ext.get(pnode.appendChild(el));
}
 this[name].applyStyles(this[name+'Style']);
}
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24426529
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.
0
 
LVL 18

Expert Comment

by:wilq32
ID: 24426558
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
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24426694
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!
0
 
LVL 17

Author Closing Comment

by:OmniUnlimited
ID: 31582733
wilq32, you are a credit to EE.  I truly could not have done this without you.  I will be eternally grateful.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24428826
Great you solved it...
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24428871
See... you gave up too easily! ;)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24428928
I have a life ;) (and I live in CET)
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24429026
Great!  CET is perfect for my all night work fests.  Maybe you can help with the next problem I encounter?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24429039
As long as I do not have to debug EXT or other frameworks.  I prefer writing and understanding my own code ;)
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24429110
OK.  Good to know.  Thanks!
0
 
LVL 18

Expert Comment

by:wilq32
ID: 24429138
i dont like to debug frameworks also :P but this was looking not so hard, but in fact it was uh :)  
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24429160
You rock!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24429278
Yeah, well done Wilq
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24435932
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 http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_24425827.html.

Thanks a million!
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now