Jump to content

Browser Differences


careyd

Recommended Posts

I am experiencing different results with IE, Chrome and Firefox on the same JS code.

 

Specifically, it APPEARS that IE and Firefox are identically processing the onBlur

Function I coded, the same, and that Chrome is processing differently.

 

Ironically, it appears that Chrome is doing what I want.

 

My question is: "Are there any posted or known differences as I have described?"

 

OR - should I submit my code for evaluation?

Link to comment
Share on other sites

You haven't really described exactly what they're doing that is different. That and the code would help, you can also add some of your own debugging code like console.log statements to help you figure out what exactly is going on versus what you expect to happen.

  • Like 1
Link to comment
Share on other sites

The last code you posted contained a lot of errors. Some browsers will try to work around errors while others are more strict. This could be the difference you are observing. Have you looked for errors in the Javascript console inside the browsers? Have you tried a Javascript online tool such as...

http://jsfiddle.net/

...or...

http://jshint.com/

  • Like 1
Link to comment
Share on other sites

I have reviewed errors in the JavaScript console, and have done a great deal of research since my first disaster. Before submitting code again, I will take your advice on the two links and then come back if needed. Thank You.

Link to comment
Share on other sites

You can certainly post your code but it is best to try to verify that a debugger couldn't answer your question immediately. In IE you can press F12 to activate the developer tools.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Thanks to all for the guidance. I have resolved my issues with my code and have learned a great deal from all of you. My remaining issue is probably discussed in every forum and fiddle I've read and I don't seem to find one that works....."How to effectively disable the enter key in script using JS and not JQ". Obviously (I think) I am trying to avoid an untimely submit on my form.

Link to comment
Share on other sites

I have now tested my code with the console of all the browsers I am concerned about (IE - Firefox and Chrome). I believe I have no obvious errors as the console report is clean.

 

My page executes as intended in Firefox and Chrome but fails in IE (8, 9, 10, 11), again with clean error logs.

 

Specifically, in the form field entry code: There is a generalized routine (triggered by an "onBlur") for checking the entry of each field for a blank entry, which works on all fields EXCEPT for the first field on the form ("firstInput").

 

After checking for blank entry, the code is supposed to put up an alert box showing a message and then a "Re" focus on the field in question.

 

The generalized routine works on all other fields of the form (except "firstInput"), behaving as expected.

 

As stated above, the first entry on the form fails. By that I mean:

 

It triggers from "onBlur" + It tests for the blank entry + It recognizes the blank entry and produces the alert box + It DOES NOT refocus on the desired field (line input on the form) and then executes the error for the next successive input field.

 

 

 

 

 

Link to comment
Share on other sites

I have now tested my code with the console of all the browsers I am concerned about (IE - Firefox and Chrome). I believe I have no obvious errors as the console report is clean.

 

My page executes as intended in Firefox and Chrome but fails in IE (8, 9, 10, 11), again with clean error logs.

 

Specifically, in the form field entry code: There is a generalized routine (triggered by an "onBlur") for checking the entry of each field for a blank entry, which works on all fields EXCEPT for the first field on the form ("firstInput").

 

After checking for blank entry, the code is supposed to put up an alert box showing a message and then a "Re" focus on the field in question.

 

The generalized routine works on all other fields of the form (except "firstInput"), behaving as expected.

 

As stated above, the first entry on the form fails. By that I mean:

 

It triggers from "onBlur" + It tests for the blank entry + It recognizes the blank entry and produces the alert box + It DOES NOT refocus on the desired field (line input on the form) and then executes the error for the next successive input field.

 

 

 

 

 

Link to comment
Share on other sites

entry.html

 

I continue to experience problems with my code (page attached)

 

I have tested the code on: IE-11, IE-10, IE-9, IE-8, Chrome and Firefox (38.0.5)

 

In all cases I have reviewed the console messages and received an indication of no obvious errors.

 

The code executes as intended in Chrome and Firefox, but fails in all my tested versions of IE.

 

Specifically, my JS Function "procEntered" (called by an "onBlur") in each input field, is intended to be a generalized routine to setup variables and test for the content of input as being blank. In lines 51-58 I load the variables and then proceed to test for a blank entry.

 

In each individual entry from the form in question, the test works and the resulting code executes, EXCEPT for the first entry (id= firstInput) which executes the blank detection, the alert display and then instead of setting the stage for an "retry" entry (as all the other input fields do properly), it drops through to the subsequent input line (id=authenInput) and produces an alert for that field. When "ok" is clicked it loops back to the (id=firstInput) field.

 

Ordinarily I would suspect Browser differences, but after the flaming I received on my last few submissions, I decided to thoroughly test before taking up the time of this forum. I admit to being a "newbie" and unfortunately have exhausted my testing ability... to no avail, and now submit my code for review by anyone on this board who is willing to review it. PLEASE, I am seeking constructive help. I appreciate all who contribute.

 

 

Link to comment
Share on other sites

Sorry for the multiple messages folks. I am obviously getting used to this forum and my brain is soaked with the problem I describe so there's no room for anything else, including my simple comprehension of attaching a sample.

Link to comment
Share on other sites

When I look at this HTML...

<p>First Name: <input id="first" name="first" type="text" style="width: 197px" onFocus="setYellow(first)" onBlur="procEntered(first)"/>			<p>*Company: <input id="company" name="company" type="text" style="width: 342px" onFocus="setYellow(company)" onBlur="setWhite(company)"/>			

... I don't like the fact that each <p> does not have a closing </p> and that your Javascript parameters are not quoted.

  • Like 1
Link to comment
Share on other sites

I have now added the closing code in each instance you pointed out. The console did not warn me of this in any of the browsers. Is it possible the Chrome and Firefox are more forgiving and ran anyway?I don't understand the reference to the JS parameters. Please explain.

Link to comment
Share on other sites

The closing </p> tag is not actually a requirement in HTML, but it's a good idea to put it anyway.

 

As for the Javascript parameter, the problem is that you forgot to quote the string you're passing as an argument to the function.

 

It should be like this:

setWhite('company')

rather than like this:

setWhite(company)
  • Like 1
Link to comment
Share on other sites

I understand and thank you for the info on </p>.Unfortunately, by adding the ('company') as opposed to the existing (company), the process doesn't work for any of the input statements.I have now tested on Opera and Netscape. Oddly, Opera works as does Firefox and Chrome.Netscape has joined IE as behaving the same.I appreciate your patience with my plight, and hope the attached reflects what I am talking about as of NOW.

Link to comment
Share on other sites

Now that you're passing the ID to the function, inside the function you need to get the element:

function setWhite(id) {  var element = document.getElementById(id);
Link to comment
Share on other sites

My problem does not arise in either of the functions: setWhite or setYellow. Both functions operate as I intended in all of the instance in which they are called.My problem arises in browsing with IE or Netscape and executing the procEntered function. The execution of a positive response in the first four input elements of the form work as expected in both field highlighting as well as processing of the data entered.The failure occurs when there is a null in the first input while browsing with IE or Netscape. All subsequent input fields work fine, including the highlighting and the data entered being processed. The form submits fine as well.A null in the first input works as well, when the Browser is: Firefox, Chrome, Opera but not IE (all tested versions) and Netscape.

Link to comment
Share on other sites

Further to my last posting:

I have changed my code to include quotes around the data being passed onBlur, established a variable and loaded the value with the document.getElementById(element); in each instance where suggested, and tested wuth the same suspect browsers.

Unfortunately, the same results are occurring.

 

I am now suspicious of the onBlur and realize that I am grasping at straws. Can someone shed some light on this?

 

Thank You in advance.

entry.html

Edited by careyd
Link to comment
Share on other sites

To me the use of onblur seems like a somewhat pointless complication, but if you really want fields to be completed in a particular order I guess you need to do something like that. I have attached a version that seems to work.

entry2.html

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

davej:

 

I have studied your code you sent. THANK YOU. In addition to it being more elegant it also has served as a valuable study tool for me. While the code seems to work, it does not do what I am trying to do. It moves through the form, highlighting the reentry field and the original email field correctly, but has process logic issues between the last name (if null) versus filled and the first name. It seems to lose its place. All of this happens in IE-11 and different errors in other browsers.

 

I was able to get my code working in all other browsers BUT IE-11. (attached)

 

Before we discuss the logic itself, I am still perplexed by the now verified differences the browsers produce for the identical code. When I apply focus on the first input, as long as I add a "tabindex attribute" the focus works and performs as expected. However, the second input (verify) starts misbehaving as the first one did without the tab index. Experimentation with/without autofocus, onfocus and onblur and tabindex gives various misbehaviors in IE-11 and yet behaves appropriately in other browsers with the identical code.

 

Very Confusing. I am still struggling with the problem being in IE and know that is just a symptom.

 

IN ADVANCE: Thank You for any additional help on this.

entry.html

Link to comment
Share on other sites

Ok, with your code I still see the "infinite loop" problem in IE11.

 

I did update my code several times. Are you sure you have the final version?

 

Perhaps you could outline the desired behavior? My guess was that you wanted the form to be filled out in this order...

1. Email

2. Email reentered

3. Last name

4. First name

5. Any other optional fields

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...