By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
460,036 Members | 960 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 460,036 IT Pros & Developers. It's quick & easy.

JavaScript IE incompatability using in html a var set in a js file

P: 6
I'm having an issue with a form page i created, it works fine in Firefox but causes an error in IE 7.

i have a script file where in it it set a:

var fReq = new Array();

Then follows some functions.

On the html file this file is included in the <head> i had to change the link to include language="JavaScript" to fix some errors but was still left with 1 error.

On the bottom of the page right after i close <form> i have a small script tag to run set some variables;

Expand|Select|Wrap|Line Numbers
  1. <script language='JavaScript' type='text/javascript'>fButton = 'postnewthread'; fReq[0] = ''; fReq[1] = ''; fReq[2] = ''; fReq[3] = ''; document.forms['inputform'].elements[fButton].disabled = true;</script>
Here it tells me that fReg isn't set and off course when i try to use it i get same error object not defined.

I'm sure it's something that it's just incompatible haven't looked into the button disabled issue. Was wondering if that isn't running just because java fails on before that.

Thanks for any help
Aug 14 '08 #1
Share this Question
Share on Google+
7 Replies


100+
P: 428
Where do you define fReq, before you refer to it's members- fReq[0], etc?
Aug 14 '08 #2

P: 6
fReq is define on the first line in th formfunction.js which is tagged in the html in the <head> section.

I set the fReq[0]..etc in after the </form>
Aug 14 '08 #3

P: 6
This is the formfunction.js file.

Expand|Select|Wrap|Line Numbers
  1. var fCurr = 0;
  2. var fTotal = 0;
  3. var fButton = "submit";
  4. var fReq = new Array();
  5.  
  6. function changespec(aclass)
  7. {
  8.     var class = new Array();
  9.     class[1] = new Array("Balanced", "Feral", "Resto");    //druid
  10.     class[2] = new Array("Marksmith", "Beast Mastery", "Survival");    //hunter
  11.     class[3] = new Array("Arcane", "Fire", "Frost");    //mage
  12.     class[4] = new Array("Holy", "Protection", "Retribution");    //paladin
  13.     class[5] = new Array("Discipline", "Holy", "Shadow");    //priest
  14.     class[6] = new Array("Assassination", "Combat", "Sublety");        //rogue
  15.     class[7] = new Array("Elemental", "Enhacement", "Restoration");    //shaman
  16.     class[8] = new Array("Arms", "Fury", "Protection");    //warrior
  17.     class[9] = new Array("Affliction", "Demonology", "Destruction");//warlock
  18.     // 1. get the selected value from combo1:
  19.     switch(aclass.value)
  20.     {
  21.         case 'Druid':
  22.               var class_value = 1;
  23.           break;    
  24.         case 'Hunter':
  25.           var class_value = 2;
  26.           break;
  27.         case 'Mage':
  28.           var class_value = 3;
  29.           break;
  30.         case 'Paladin':
  31.           var class_value = 4;
  32.           break;
  33.         case 'Priest':
  34.           var class_value = 5;
  35.           break;
  36.         case 'Rogue':
  37.           var class_value = 6;
  38.           break;
  39.         case 'Shaman':
  40.           var class_value = 7;
  41.           break;
  42.         case 'Warrior':
  43.           var class_value = 8;
  44.           break;
  45.         case 'Warlock':
  46.           var class_value = 9;
  47.           break;
  48.         default:
  49.           var class_value = 1;        
  50.           break;
  51.     }
  52.  
  53.     // 2. make sure combo2 is empty:
  54.     document.forms["inputform"].elements["spec"].options.length=0;
  55.  
  56. //    alert("Checking class_value is " + class_value + " and option is " + class[class_value]);
  57.  
  58.     // 3. loop throught the hard-coded values:
  59.     for (var i=0;i<class[class_value].length;i++)
  60.     {
  61.         // dynamically create a new <option> element:
  62.         var opt = document.createElement("option");
  63.  
  64.         opt.setAttribute('value',class[class_value][i]); 
  65.         opt.innerHTML = class[class_value][i];
  66.  
  67.         document.forms["inputform"].elements["spec"].appendChild(opt);
  68.     }    
  69. }
  70.  
  71. function aEmpty(fBox, fReqnum)
  72. {
  73.     fReq[fReqnum] = fBox.value;
  74.  
  75. //    alert("The new Current is: " + fReq);        
  76.     aSubmit();
  77. }
  78.  
  79. function aSubmit()
  80. {
  81.     var fCheck = true;
  82.  
  83.     for(i = 0;i < fReq.length;i++)
  84.     {
  85.         if(fReq[i] == "" || fReq[i] == " ")
  86.         {
  87.             fCheck = false;
  88.         }
  89.     }
  90.  
  91.     if(fCheck == true)
  92.     {
  93. //        alert("The submit button is enabled");
  94.         document.forms['inputform'].elements[fButton].disabled = false;
  95.     }
  96. }
  97.  
Aug 14 '08 #4

100+
P: 428
IE has always been a bonehead when it comes to select elements.

Up to IE7 it thought a select was a kind of a pop up window, and try to tell it different.

IE7 lets a select be an html element, but it doesn't handle options like the other browsers. Styling an option is difficult for IE, but is just like styling any other element for most browsers.

You can't append a child node to an option in IE,
(probably the cause of your error)
but you can set the option.text property to script the option's text.

This will work in the other browsers the same as appending a text node.
Aug 15 '08 #5

P: 6
Thanks,

It's most definitely an issue i will have to resolve but as it stands i commented out lines:

54, 59-68 and 91-95 and still have a problem with fReq not been declared. Also removed the disabled from the html <script>

Anything else that might be causing the issue?

Here's a skeleton of the html to see if it sheds some light:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. ...
  4. <script language='JavaScript' type='text/javascript' src='formfunctions.js'></script>
  5. </head>
  6. <body>
  7. ...
  8. <form>
  9. ....
  10. </form>
  11. <script language='JavaScript' type='text/javascript'>fButton = 'postnewthread'; fReq[0] = ''; fReq[1] = ''; fReq[2] = ''; fReq[3] = '';</script>
  12. </body>
  13. </html>
  14.  
Also exact error message is:

Line:292
Char: 28
Error: 'fReq' is undefined
Code: 0

1) I'm also considering making another formfunctions.js just for ie and do a browser detection in the header to select file based on browser. Since i don't have much experience with mozzilla/ie incompatabilities is this the best option?

2) Based on your explanation of the option, can i still set the lenght of options and just change the text and value for each instead of removing and adding?

3) is the:
Expand|Select|Wrap|Line Numbers
  1. document.forms["inputform"].elements["spec"]
accepted by ie7 or is there any incompatability;

4) is there any site/book that i can read that i can use to learn a bit more of these diferences between browsers?

Tcks
Aug 15 '08 #6

P: 6
After buying some new update javascript books and read a couple of websites i did some changes on my code, even tho i'm still having problems with ie 7 i've made some progression and learn a few new things.

First i've implemented jQuery to my code so i don't have my code so messed up and, and it fixed my problem with disabling my button.

So on the header after including jquery.js i have this:

Expand|Select|Wrap|Line Numbers
  1. <script type='text/javascript'>
  2.         var sPath = window.location.pathname;
  3.         var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
  4.         var fButton = 'submit';
  5.         var fReq = [];
  6.         $(document).ready(function(){
  7.                 if(sPage == 'app.php'){        
  8.                     fButton = 'postnewthread'; 
  9.                     fReq[0] = ''; 
  10.                     fReq[1] = ''; 
  11.                     fReq[2] = ''; 
  12.                     fReq[3] = '';
  13.                     document.forms['inputform'].elements[fButton].disabled = true;
  14.                 }
  15.         });
  16.         </script>
  17.  
Followed by my formfunctions.js. As you can see i move the var declarations from the formfunctions.js right to the page itself. Good news is that i no longer get the error saying that fReq does not exist from the main page at load time.

But i still have 2 errors:

1) When i try to use my dropdown i get a "object expected" error, now as you all know ie7 is very good at detailing errors (NOT), and since it works as intended in firefox i can not use it to debug.

2) My other error is another "object expected", when i run function aEmpty(). I know i use a very unorthodoxic approach to form validation but i'm trying to learn from the process. The process is to create an Array the size of the fields i want to make sure are not empty (fReq), a onchange call to function aEmpty() will change the fReq array respective to that form element and check is all items in fReq have text is none are blank it will then activate the submit button to process form. All this to try to explain why i'm getting an "object expected" on both function, specially when they both different.

My thoughts are on variable scopes, but since firefox uses is w/o a problem i don't see why would it give a problem in ie7 they not that much different. Also i commented out the appendChild and options.lenght= 0 in changespec() just cus they might be a potential ie7 incompatibility.
Aug 18 '08 #7

P: 6
Let's this will be my final post as i finally fixed my problem, another example of going back to the basics.

Expand|Select|Wrap|Line Numbers
  1. function changespec(aclass){
  2.     var fclass = [];
  3.     fclass[1] = ['Balanced', 'Feral', 'Resto'];    //druid
  4.     fclass[2] = ['Marksmith', 'Beast Mastery', 'Survival'];    //hunter
  5.     fclass[3] = ['Arcane', 'Fire', 'Frost'];    //mage
  6.     fclass[4] = ['Holy', 'Protection', 'Retribution'];    //paladin
  7.     fclass[5] = ['Discipline', 'Holy', 'Shadow'];    //priest
  8.     fclass[6] = ['Assassination', 'Combat', 'Sublety'];        //rogue
  9.     fclass[7] = ['Elemental', 'Enhacement', 'Restoration'];    //shaman
  10.     fclass[8] = ['Arms', 'Fury', 'Protection'];    //warrior
  11.     fclass[9] = ['Affliction', 'Demonology', 'Destruction'];//warlock
  12.     // 1. get the selected value from combo1:
  13.     switch(aclass.value)
  14.     {
  15.         case 'Druid':
  16.               var class_value = 1;
  17.           break;    
  18.         case 'Hunter':
  19.           var class_value = 2;
  20.           break;
  21.         case 'Mage':
  22.           var class_value = 3;
  23.           break;
  24.         case 'Paladin':
  25.           var class_value = 4;
  26.           break;
  27.         case 'Priest':
  28.           var class_value = 5;
  29.           break;
  30.         case 'Rogue':
  31.           var class_value = 6;
  32.           break;
  33.         case 'Shaman':
  34.           var class_value = 7;
  35.           break;
  36.         case 'Warrior':
  37.           var class_value = 8;
  38.           break;
  39.         case 'Warlock':
  40.           var class_value = 9;
  41.           break;
  42.         default:
  43.           var class_value = 1;        
  44.           break;
  45.     }
  46.  
  47.     // 2. loop throught the hard-coded values:
  48.     for (var i=0;i<fclass[class_value].length;i++){
  49.         document.forms["inputform"].elements["spec"].options[i].text = fclass[class_value][i];
  50.         document.forms["inputform"].elements["spec"].options[i].value = fclass[class_value][i];                        
  51.     }    
  52. }
  53.  
Here's my new changspec() function, i'm sure you noticed the changes on the way i change the value on the select element. But that the problem, the problem was my original class array, apparently class is a restricted or already used variable or function in explorer. Once i changed the name, "voila champagne".

Now my form works w/o a problem both on mozilla and ie7. Even tho i was able to identify some new approaches at differences between mozilla and ie i was more about following the basics than anything else.

Thanks for all the comments and bearing with me on my JS endeavors.I post my thoughts and conclusions as i hope this might help someone else, after all the point of a forum like this is alot of give and take.
Aug 18 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.