473,769 Members | 6,838 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

6 New Member
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="JavaS cript" 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
7 1850
mrhoo
428 Contributor
Where do you define fReq, before you refer to it's members- fReq[0], etc?
Aug 14 '08 #2
Jabica
6 New Member
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
Jabica
6 New Member
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
mrhoo
428 Contributor
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
Jabica
6 New Member
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.j s 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 incompatabiliti es 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
Jabica
6 New Member
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.j s. As you can see i move the var declarations from the formfunctions.j s 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
Jabica
6 New Member
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

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

Similar topics

14
2829
by: John Bentley | last post by:
Note this is crossposted to comp.lang.javacript and microsoft.public.dotnet.scripting. After some Googling and FAQing my understanding of these terms is, crudely: Javascript (3 different definitions): 1. The scripting language originally developed by Netscape. (I offer a Brief handle: "Original Netscape Script") 2. The current implementation of the ECMAscript 262 (3rd ed.) standard by Netscape. (I offer a brief handle: "Current...
10
2111
by: Rob Fentress | last post by:
I am trying to develop very standards-compliant content using XHTML and CSS. I am using CSS positioning and thus need to only include my stylesheet on browsers I have tested to make sure they display correctly. The page is readable without the CSS though the formatting is not pretty, but browsers like Netscape 4.x bungle the positioning if I include the stylesheet, making it unreadable. I am using the JavaScript Browser Sniffer by Eric...
11
1642
by: Vincent van Beveren | last post by:
Hi everyone, I have the following code using inheritence The important part is the function getName(). The result should alert 'John Doe': function First(name) { this.name = name; this.getName = function() { return this.name;
7
1683
by: e | last post by:
I've been having an extremely difficult time finding an answer to this in IE / js groups, so I thought I'd try here. I've got an aspx page that delivers loads of report data into custom-named <span> tags on the client, hidden from the screen by @media classes. From a dynamically built menu of what was returned, the user selects wich report they want to view/print and a little jscript .innerHTML magic happens under the hood that copies...
0
9589
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9423
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10222
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10050
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9866
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7413
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
1
3967
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3570
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2815
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.