2009-10-05 7 views
2

J'ai une liste avec plusieurs lignes, et chaque liste a un bouton ajouter et modifier qui fait apparaître un formulaire en utilisant;jQuery 1.3.2 insertBefore ne fonctionne pas dans IE8


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

Des idées pour lesquelles cela fonctionne dans un navigateur autre que IE8? nous utilisons jQuery 1.3.2.

Merci.


MISES À JOUR SUR CETTE

C'est est juste une simplification excessive du code qui reproduit le problème que je vais avoir avec insertBefore en utilisant IE8 SEULEMENT. suffit de copier et coller tout le code dans un fichier de test, puis modifier le

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

utiliser votre bibliothèque jquery 1.3.2. et ça devrait marcher!

Merci.

<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> 
+0

Êtes-vous sûr que le problème ne vient pas avant la main? Votre variable "rowId" est-elle correctement définie? –

+0

oui, c'est. J'ai débogué depuis un certain temps maintenant. le rowId est correct – Onema

+2

Vérifiez également que $ ('# addOrEditForm') et "#" + rowId correspondent réellement à un élément (s): alert ($ ('# addOrEditForm'). length); alert ($ ('#' + rowId) .length); –

Répondre

0

Il semble que le fadeIn ne fonctionne pas essayer avec show:

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

Je l'ai réduit à ceci:

<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> 

cette volonté travaille maintenant dans ie.

voir ici: jQuery :FadeOut not working with table Rows

Questions connexes