Tech Off Thread

9 posts

Forum Read Only

This forum has been made read only by the site admins. No new threads or comments can be added.

IE, being IE again...while FF and Opera continue to work :)

Back to Forum: Tech Off
  • User profile image
    jsampsonPC

    I have a simple set of javascripts on my page to give a person a real-time representation of their selection from a form. What happens is when a person selects a option from the form, a new tableRow is appended to a 'receipt preview' via javascript, and the price of the newly added product is figured into the javascript variable containing the sum of all prices.

    My dynamic tableRows, which are to be added to my receipt preview, are showing up in FireFox and Opera, but not IE. However, although IE isn't showing the tableRows, it is still properly keeping track of my sum total of all products - even though it isn't displaying all products.

    Here's the javascript code I'm using to print the tableRows...can you tell me why IE isn't actually displaying the TR's after they've been created, while FireFox and Opera display them without problem?

        function addProduct()
        {
            // Create shortcuts to master elements
            var repTable = document.getElementById("receiptTable");
            var repTotal = document.getElementById("totalRow");
           
            // Declare wrapper elements
            var newRow = document.createElement("tr");
            var newName = document.createElement("td");
            var newDolr = document.createElement("td");
            var newPrice = document.createElement("td");
            var wraprDiv = document.createElement("div");
           
            // Declare Content
            var prodName = document.createTextNode("Somename");
            var prodDolr = document.createTextNode("$");
            var prodCost = document.createTextNode("5.23");
           
            // Put content in TD's
            newName.appendChild(prodName);
            newDolr.appendChild(prodDolr);
            wraprDiv.appendChild(prodCost);
            newPrice.appendChild(wraprDiv);
           
            // Put TD's in TR
            newRow.appendChild(newName);
            newRow.appendChild(newDolr);
            newRow.appendChild(newPrice);
           
            // Put TR in TABLE
            //repTable.appendChild(newRow);
            repTable.insertBefore(newRow, document.getElementById("receiptTable").childNodes[0]);
           
            figurePrice();
           
        }

  • User profile image
    Matthew van Eerde

    Hmmm... aren't <tr>'s usually grandchildren of <table>?  There should be a <tbody> in there somewhere, at least DOM-wise.

  • User profile image
    jsampsonPC

    You're right. I'll make that change real quick - sorry I overlooked that.

  • User profile image
    jsampsonPC

    Matthew van Eerde wrote:
    Hmmm... aren't <tr>'s usually grandchildren of <table>?  There should be a <tbody> in there somewhere, at least DOM-wise.


    It was the tbody tag missing...thanks for pointing that out to me Wink It's working now. On a side note, any idea why javascript renders 15.690000000000001 as the result of 5.23 + 5.23 + 5.23, instead of 15.69?

  • User profile image
    Matthew van Eerde

    Computers have the habit of translating nice convenient decimals (5.23) into ugly hacky binarials (101.0011...), which creates a small rounding error.

    If you're dealing with approximations anyway, this is no big deal.  If you're dealing with dollars and cents, you're usually better off doing all the calculations in integer cents.

  • User profile image
    jsampsonPC

    Matthew van Eerde wrote:
    Computers have the habit of translating nice convenient decimals (5.23) into ugly hacky binarials (101.0011...), which creates a small rounding error.

    If you're dealing with approximations anyway, this is no big deal.  If you're dealing with dollars and cents, you're usually better off doing all the calculations in integer cents.


    I am using currency. I've already written a corrective-function to fix it...I was just wondering why this happens with javascript...I dont recall getting this type of result from PHP or VB.NET...

  • User profile image
    Rotem Kirshenbaum

    There is a known issue with JS when it comes to floating point calculations and roundig of these results. The same thing happened to me too a couple of weeks ago.

    You might want to try to do these calculations on the server side, making them less prone to rounding errors and JS quirks.
    Server side is also a preferred location for business logic.

    Rotem

  • User profile image
    AlexBu

    It's better to use methods like insertRow, insertCell, deleteRow and so on...

    Search in msdn the article "How to Build Tables Dynamically"

  • User profile image
    jsampsonPC

    Rotem Kirshenbaum wrote:
    There is a known issue with JS when it comes to floating point calculations and roundig of these results. The same thing happened to me too a couple of weeks ago.

    You might want to try to do these calculations on the server side, making them less prone to rounding errors and JS quirks.
    Server side is also a preferred location for business logic.

    Rotem


    Server-side isn't an option in this scenario. My page splashes a large form with many options on the screen. As the user modifies the form, selecting any number of things, and modifying their properties, I am giving them a real-time preview of what they're final selection/order will be. I don't want to bother with AutoPostBack clicks everytime they do anything Smiley

    I do have server-side logic to handle everything once it's sent over. So that's locked down. Any javascript-injections would only allow the user to change the output of his/her client representation of the final order, and not the actual processing on the server-side.

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.