JQuery 1.3.2 insertBefore not working in IE8
I have a list with multiple lines and each list has an add and edit button that calls a form;
$('#addOrEditForm').insertBefore("#"+rowId);
Any ideas why this works in any other browser but IE8? we are using jQuery 1.3.2.
Thank.
ANY UPDATES ON THIS
This is just a simplification of the code that replicates the problem I am having with insertBefore, only with IE8. just copy and paste all this code into a test file, then change
<script type="text/javascript" src="/Library/jQuery/jquery.min.js"> </script>
to use your jquery 1.3.2 library. and it should work!
Thank.
<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>
+2
source to share
1 answer
FadeIn doesn't seem to work, try showing it:
$('#addLinkListLink')
.insertBefore( "#" + link )
.show();
I've 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>
now this will work i.e.
0
source to share