IE Problem Only with Row Removal and Insert Row

Discussion in 'JavaScript' started by jprice259, Sep 16, 2008.

  1. #1
    Hello,

    I'm working on a page for the company I'm working with. My fellow programmer colleagues have looked into this bug and they too are stumped.

    I believe it's a cache problem with internet explorer since every other browser out there works.

    The problem is, I have rows of data that also contains a drop down that will fire an ajax call to retrieve more data from the server (LAMP).

    When I view the page for the first time (preloaded with data from db) I can add a new row fine and the select box is "appended" via an ajax call.

    However, when I reload page and then click remove... prompts, click ok... it removes the row fine.

    Then, when I insert another row again, after the one has been deleted... The new row inserts without the option values in the select box and the row above now will automatically be selected on the first option.

    I have tried so many different methods in order to debug this. I'm 100% totally stump. Any help will be much appreciated!

    Screen shots:

    1. When I first load page
    [​IMG]

    2. Going to add row, it works after initial page load
    [​IMG]

    3. Refresh page, then I go to remove a row.
    [​IMG]

    4. Then I go to insert new row, then it breaks
    [​IMG]

    THIS IS INTERNET EXPLORER ONLY! I've tested in firefox, opera, safari, google chrome, flock, and it all works.

    I've tried to setTimeout and it doesn't work...

    Any ideas?
     
    jprice259, Sep 16, 2008 IP
  2. LogicFlux

    LogicFlux Peon

    Messages:
    2,925
    Likes Received:
    102
    Best Answers:
    0
    Trophy Points:
    0
    #2
    How do you delete and add the elements to the DOM? Do you completely delete the element from the DOM and then create a new one?
    If you've had trouble debugging this with the benefit of seeing the code, imagine how hard it will be for us. :)
     
    LogicFlux, Sep 16, 2008 IP
  3. LogicFlux

    LogicFlux Peon

    Messages:
    2,925
    Likes Received:
    102
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Also, assuming the P in your LAMP setup is PHP, try this:

    <?php
    header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
    header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
    ?>

    Or when you refresh the page, try adding something random to the url query string before you hit refresh, because a new unique url should keep the browser from showing cached content.
     
    LogicFlux, Sep 16, 2008 IP
  4. jprice259

    jprice259 Peon

    Messages:
    100
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi logic,

    Thanks for your reply, this page is so dynamic that I had to include the javascript file that is over 600 lines long to my page in the works. I don't want to show any code since I'm under contract and it's forbidden.

    I have tried to clear my cache... no luck

    I delete the table / tbody row / removeRow for the elements I don't want. Then it calls a function to "shift" the rows so that they have names / id's of "unique_1", "unique_2" etc...

    Then when adding a new row, it adds to the last row of the table and assigns it the "unique_3" (hypothetically speeking). I insertCell(0), insertCell(1) and so on... appendChild them.

    The only thing that I'm missing is a doctype... since the programmer that has been working here before me never declared one. It seems to not effect anything since every other browser besides i.e. work flawlessly. No errors/warnings, nothing.
     
    jprice259, Sep 17, 2008 IP
  5. LogicFlux

    LogicFlux Peon

    Messages:
    2,925
    Likes Received:
    102
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Try using all the major doctypes(html trans, html strict, xhtml trans, xhtml strict) and see what happens.

    Also try using firefox/firebug to look at the in-memory document and the elements that have been created/deleted during every step of your testing of the form. This probably won't yield the bug since it's breaking in IE and not FF but it won't hurt to try.

    Also try looking for bugs related to the DOM objects/methods you are using.

    http://www.google.com/search?num=100&q=ie dom bug

    http://ejohn.org/blog/ie_dom_bugs/

    And maybe try rewriting this part of the script using a library that wraps DOM access. If it's a common bug in IE's implementation then it's probably been sorted out in the popular JS libraries.
    YUI is broken up into files well and if bandwidth is an issue you can even use a JS packer on the files to make it less of an issue.
     
    LogicFlux, Sep 18, 2008 IP
  6. jprice259

    jprice259 Peon

    Messages:
    100
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    This is fixed... I forgot that I.E. dislikes appendchild. Thanks for the reply to everyone in this thread. Cheers!
     
    jprice259, Oct 4, 2008 IP