JQuery 1.3.2 insertBefore not working in IE8

internet-explorer-8jquery

I have a list with multiple rows, and every list has an add and edit button that brings up a form using; 


$('#addOrEditForm').insertBefore("#"+rowId);

Any ideas why this works in any other browser but IE8? we are using jQuery 1.3.2.

Thank you.

ANY UPDATES ON THIS

This is is just an oversimplification of the code that replicates the problem that I'm having with insertBefore using IE8 ONLY.
just copy and paste all this code into a test file, then modify the 

 <script type="text/javascript" src="/Library/jQuery/jquery.min.js">    </script>

to use your jquery 1.3.2 library. and it should work!

Thank you.

<html>
<head>

<title>Insert title here    </title>

<script type="text/javascript" src="/Library/jQuery/jquery.min.js">    </script>
<script>


$(document).ready(function() {

    $('#linkListLinkOutput').click(function(event) {
          if ($(event.target).parents('tr').attr('id')) {
              var link = $(event.target).parents('tr').attr('id').split('_');
          }

          if ($(event.target).hasClass('nav_new')) {
          removeAddAndEditLinkForms();
          showAddLinkForm($(event.target).parents('tr').attr('id'), link[2], link[3]);
          return false;
        }
      return false;
     });



  function removeAddAndEditLinkForms() {
    removeAddLinkForm();
  }

  function removeAddLinkForm() {
        $('#addLinkListLink')
          .hide()
          .appendTo('#linkListLinks');
    }

    function showAddLinkForm(link, parentId, position) {
      $('#addLinkListLink form input[name="parentId"]').attr('value', parentId);
      $('#addLinkListLink form input[name="position"]').attr('value', position);
      $('#addLinkListLink')
        .insertBefore( "#" + link )
        .fadeIn();
      console.log('Link List name: ' + $('#addLinkListLink').attr('id'));
    }

});



</script>
</head>
<body>

<div id="content">
<div id="statusMessage"/>
<div id="linkListLinkOutput">
<table class="hierarchical widthFull" id="linkListLinks" border=1>
<tbody>
<tr class="head">
<th>Name    </th>
<th>Link    </th>
<th>Image    </th>
<th style="width: 75px;">Options    </th>
</tr>
<tr id="1678_6_0_1">
<td style="padding-left: 40px;" class="level1">    <a class="nav_down" href="#">Down    </a> Worship Net    </td>
<td>None    </td>
<td>Beautiful Sky: beautiful-sky.jpg    </td>
<td>    <a title="Add a link at this position" class="nav_new" href="#">Add    </a>     <a title="Edit is not functional in this example" >Edit    </a>     <a title="Delete is not functional in this example" >Delete    </a>    </td>
</tr>
<tr id="4159_6_0_2">
<td style="padding-left: 40px;" class="level1">    <a class="nav_up" href="#">Up    </a>     <a class="nav_down" href="#">Down    </a> many many many links    </td>
<td>None    </td>
<td>None    </td>
<td>    <a title="Add a link at this position" class="nav_new" href="#">Add    </a>     <a title="Edit is not functional in this example" >Edit    </a>     <a title="Delete is not functional in this example" >Delete    </a>    </td>
</tr>
<tr id="4161_6_0_10">
<td style="padding-left: 40px;" class="level1">    <a class="nav_up" href="#">Up    </a> MOre and more links    </td>
<td>None    </td>
<td>None    </td>
<td>    <a title="Add a link at this position" class="nav_new" href="#">Add    </a>     <a title="Edit is not functional in this example" >Edit    </a>     <a title="Delete is not functional in this example" >Delete    </a>    </td>
</tr>
<tr style="display: none;" id="addLinkListLink">
<td colspan="4">

<form method="post" action="Capture.php" class="tempForm" id="addLinkListLinkForm" name="addLinkListLinkForm">
<table>    <tbody>    <tr>    <th>    <label for="name">Name:    </label>    </th>    <td>    <input type="text" value="" maxlength="255" id="name" name="name"/>    </td>    </tr>
<tr>    <th>    <label for="text">Description:    </label>    </th>    <td>    <textarea id="text" name="text"/>     </textarea>    </td>    </tr>    </tbody>    </table>    <input type="submit" value="Save" name="saveButton" class="blah"/>    <input type="submit" value="Cancel" name="cancelButton" class="blah cancel"/>    <input type="hidden" value="0" name="parentId"/>    <input type="hidden" value="6" name="listId"/>    <input type="hidden" value="1" name="position"/>
</form>

</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

Best Answer

It seems that the fadeIn is not working try it with show:

$('#addLinkListLink')
        .insertBefore( "#" + link )
        .show();

I have narrowed it down to this:

<table>
        <tr id="tr1"><td>3</td></tr>
        <tr id="tr2" style="display:none"><td>2</td></tr>
    </table>

    <script type="text/javascript">
        $('#tr2').fadeIn();
    </script>

this will now work in ie.

see here: jQuery :FadeOut not working with table Rows

Related Topic