JavaScript rendering differences between IE and FireFox

[Sylvan012]

I have a question about how IE renders JavaScipt, compared to Firefox.

It would appear that when you put a javascript:function(); in an <a href=""> that also has an "onClick='someOtherFunction();'" command associated with it, IE will execute the <a href="javascript:function();"> first and, then, move on to whatever the onClick wants it to do. Firefox, it would appear, stores all click activities in a buffer associated with that link, somewhere, -in order- and then executes the JavaScript commands.

The reason I think this is that I was working on a Shopping Cart's "RemoveQty" function, this morning, adding a nag pop-up window that would spell out the "virtues" of placing the item just removed, back in the cart. I put a "removeQty" function call in the onClick section and the "openNewPopupWindow" in the <a href="javascript:"> section.

The result of this was that IE was changing the amount in the cart to "0" (but not actually removing the selected product from the cart) while opening the new popup window. Since "RemoveQty()" submits the Shopping Cart form to the server, it was as if the browser was stopping execution before it could finish: it would decriment the product's Quantity to 0, allright, but not actually send that change to the server.

Firefox removed the item, refreshed the screen, and opened the popup window.

I am guessing that this is because IE moved the focus away from the main Shopping Cart page to the new popup window and -somehow- stopped execution of the full "removeQty" script. In order to get it working equally on both browsers, all I had to do was swap the order of the javascript executions, putting the RemoveQty() in the <a href="javascript:"> and adding the openNewPopupWindow to the "onClick=" section.

Has anyone run into this before and can anyone confirm that my guess as to why it functioned this way is correct?

Yours with curiosity,
Sylvan

[Natdrip]

IE makes up there own rules
FF uses WC3 Standard.

you may be able to avoid the problem in the future with an href="JavaScript:void(0);"

[CTTillman]

Internet Explorer will run all commands in the onClick event first by default and move on to the href javascript:function() afterward as long as the onClick event doesn't have "return false;" on the event or "return function_name;" where the function returns false. It looks like you are running into possibly an object problem of some sort.

IE and Firefox support most of the same objects and methods, but some need to be implemented in different ways and some dont work without paying close attention to what it is doing. You said your RemoveQTY script is supposed to decriment the quantity, then remove the product, then the href will open the pop-up. Run it again and watch to see if IE displays the yellow error icon on the lower-left of the browser window. If IE halts operation of a function (which it will do it if attempts to edit an object it cant find), then it will start running the next function without completing the first.

I don't know exactly how you are removing the product from the screen, but if you are using the DOM and something like "someNode.removeChild(someNode.firstChild)" you may need to check they actually exist. If it IS DOM and you are using a table, remember IE automatically adds a <THEAD> tag in the DOM between <TABLE> and <TR>.

Hope this helps in finding out what is wrong.

[CTTillman]

CORRECTION

sorry, IE enters a <TBODY> tag not <THEAD>

ex:

source code:

<TABLE>
<TR>
<TD>Some Text</TD>
<TD></TD>
</TR>
</TABLE>

IE DOM:

<TABLE>
<TBODY>
<TR>
<TD>Some Text</TD>
<TD/>
</TR>
</TBODY>
</TABLE>

Firefox DOM:

<table>
<tr>
<td>Some Text</td>
<td>#textNode</td>
</tr>
</table>

[Sylvan012]

IE makes up there own rules
FF uses WC3 Standard.

you may be able to avoid the problem in the future with an href="JavaScript:void(0);"
I'm curious: what -exactly- does "void(0);" do?

[Sylvan012]

Internet Explorer will run all commands in the onClick event first by default and move on to the href javascript:function() afterward as long as the onClick event doesn't have "return false;" on the event or "return function_name;" where the function returns false. It looks like you are running into possibly an object problem of some sort.

IE and Firefox support most of the same objects and methods, but some need to be implemented in different ways and some dont work without paying close attention to what it is doing. You said your RemoveQTY script is supposed to decriment the quantity, then remove the product, then the href will open the pop-up. Run it again and watch to see if IE displays the yellow error icon on the lower-left of the browser window. If IE halts operation of a function (which it will do it if attempts to edit an object it cant find), then it will start running the next function without completing the first.

I don't know exactly how you are removing the product from the screen, but if you are using the DOM and something like "someNode.removeChild(someNode.firstChild)" you may need to check they actually exist. If it IS DOM and you are using a table, remember IE automatically adds a <THEAD> tag in the DOM between <TABLE> and <TR>.

Hope this helps in finding out what is wrong.

Actually, there were no error icons from IE when I was testing it, which was the most confusing part. I'm guessing it may be that the RemoveQty function -somewhere in it's labyrinthine code- was returning "false".

Hmmm...

Wait a second.

What if there is a variable declaration in the JavaScript? What if you set "q=false"? Would that also interrupt the chain of JavaScript declarations?

[CTTillman]

You would have to write "return false" in the function for it to do that. Declaring a variable will NOT exit a function, regardless of what you declare it as.

Can you post the code for your two functions?

[Sylvan012]

You would have to write "return false" in the function for it to do that. Declaring a variable will NOT exit a function, regardless of what you declare it as.

Can you post the code for your two functions?

I'm afraid not; it's proprietary code owned by my employer. I was mostly just curious as to why the same function call would work only half-way when in one location but work just fine when swapped places with another function...

It's an odd circumstance, especially when Firefox worked fine either way.